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;

结果，当在函数内部时toggle，所有可访问的都是事件附加到的元素。因此，thisinside of toggleis elem，这就是为什么你看不到.idx它的原因。

于 2013-03-10T23:40:33.007 回答