1

私は単純なクラス、ボックスを持っています:

class Box
    constructor: (@idx, grid) ->
        console.log("constructing", @idx)
        @elem = document.createElement("div")
        @elem.id = "box" + idx
        @elem.className = "box"
        @elem.onclick = @toggle
        grid.appendChild(@elem)

    toggle: () ->
        alert("click")
        console.log("My idx is: ", @idx)

コンストラクターが実行されると、「constructing 0」、「constructing 1」などが報告されるため、クラス属性が定義されていることがわかります。b.toggle() (b はボックス インスタンス) を呼び出すと、idx が適切に報告されます。しかし、ページ上の要素をクリックすると、@idx が未定義であると表示されます。

そのため、onclick側でボックスの属性が失われているようです。どうしてこれなの？

コンパイルされた Javascript は次のとおりです。

Box = (function() {

  function Box(idx, grid) {
    this.idx = idx;
    console.log("constructing", this.idx);
    this.elem = document.createElement("div");
    this.elem.id = "box" + idx;
    this.elem.className = "box";
    this.elem.onclick = this.toggle;
    grid.appendChild(this.elem);
  }

  Box.prototype.toggle = function() {
    alert("click");
    return console.log("My idx is: ", this.idx);
  };

  return Box;

})();

ありがとう！

4

2 に答える 2

4

メソッド定義に太い矢印を使用toggleして、正しいコンテキスト (この場合はクラス インスタンス) にバインドします。

toggle: =>
  alert("click")
  console.log("My idx is: ", @idx)
于 2013-03-10T23:27:12.483 に答える
4

nl_0 には、ソリューションに対する適切な回答があります。しかし、物事のjavascriptの終わりに、これがうまくいかなかった理由です.

Boxオブジェクトを構築する関数は、次のコード行でプロトタイプ関数を要素にBoxアタッチします。toggle

this.elem.onclick = this.toggle;

その結果、 function の内部では、toggleアクセスできるのはイベントが関連付けられている要素だけです。したがって、 のthis内部はtoggleでelemあり、そのため上が見えません.idx。

于 2013-03-10T23:40:33.007 に答える