Question

我有一个简单的类，框：

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)

当构造函数运行时，它报告“构造0”，“构造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;

})();

谢谢！

Answer 1

使用fat arrow将toggle方法定义绑定到正确的上下文（在本例中为您的类实例）：

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

Answer 2

nl_0对解决方案有很好的答案。但是在javascript结尾处，这就是为什么这个效果不好的原因。

构造Box对象的Box函数将toggle原型函数附加到具有以下代码行的元素：

this.elem.onclick = this.toggle;

因此，当在函数toggle内部时，可访问的所有内容都是事件附加到的元素。因此，this内的toggle为elem，这就是您无法在其上看到.idx的原因。

Coffeescript - 为什么我的班级属性未定义onclick？

2 个答案: