Coffeescript：函数不能调用同一对象上的函数

Question

我试图编写一个简单的coffeescript脚本。当用户点击鼠标时，它使用easeljs产生一个小的灰色圆圈。这里的代码

$(window).load -> 
    game.init() 


game= 
    init: -> 
     canvas= document.getElementById("Canvas") 
     alert(canvas) 
     @stage= new createjs.Stage(canvas) 
     alert(@stage) 

     @testshape= new createjs.Shape() 
     @testshape.graphics.beginFill("#555") 
     @testshape.graphics.rect(50,50,500,500) 

     @stage.addChild(@testshape) 
     @stage.update() 

     window.onmousedown= (ev)-> 
      alert "click" 
      mx=ev.screenX 
      my=ev.screenY 
      @spawn({x:mx,y:my}) 

    spawn: (data)-> 
     alert("spawn") 
     x=data.x 
     y=data.y 

     shape = new createjs.Shape() 
     shape.graphics.beginFill("#555") 
     shape.graphics.circle(x,y,5) 
     @stage.addChild(shape) 
     @stage.update() 

前两个警报呼叫工作正常。 Testhape正确创建。回调也很好记录：鼠标点击提示“点击”。但是产生的方法永远不会被调用。我不明白为什么，并看看生成的javascript：

// Generated by CoffeeScript 1.6.1 
(function() { 
    var game; 

    $(window).load(function() { 
    return game.init(); 
    }); 

    game = { 
    gameObjects: [], 
    init: function() { 
     var canvas; 
     canvas = document.getElementById("Canvas"); 
     alert(canvas); 
     this.stage = new createjs.Stage(canvas); 
     alert(this.stage); 
     this.testshape = new createjs.Shape(); 
     this.testshape.graphics.beginFill("#555"); 
     this.testshape.graphics.rect(50, 50, 500, 500); 
     this.stage.addChild(this.testshape); 
     this.stage.update(); 
     return window.onmousedown = function(ev) { 
     var mx, my; 
     alert("click"); 
     mx = ev.screenX; 
     my = ev.screenY; 
     return this.spawn({ 
      x: mx, 
      y: my 
     }); 
     }; 
    }, 
    spawn: function(data) { 
     var shape, x, y; 
     alert("rpcspawn"); 
     x = data.x; 
     y = data.y; 
     shape = new createjs.Shape(); 
     shape.graphics.beginFill("#555"); 
     shape.graphics.circle(x, y, 5); 
     this.stage.addChild(shape); 
     return this.stage.update(); 
    } 
    }; 

}).call(this); 

JavaScript似乎功能。为什么产卵不叫？

UPDATE： 我已经改变了代码

window.onmousedown=(ev)=> 

现在该方法被正确调用。但在该方法内部其他成员不可用。内部产生此警报

alert(@stage) 

返回“未定义”。我也修改了spawn。它现在也使用粗箭头语法。但是这并没有解决问题。只剩下一种方法：init。自然我试图将init更改为粗箭头语法。但所有三种方法都使用粗箭头，原来的问题又回来了：产卵不会被调用。

• 如果只有回调和可选的spawn使用粗箭头，则会正确调用spawn。
• 如果init使用粗箭头，则不能调用spawn。
• 在任何情况下，其他成员都不能从spawn内部访问。

更新： 我改变了这个OOP编程。现在游戏是一类与粗箭头的解决方案工作

Answer 1

你的代码更改为：

window.onmousedown= (ev)=> 
     alert "click" 
     mx=ev.screenX 
     my=ev.screenY 
     @spawn({x:mx,y:my}) 

（注意=）。

的问题是，在事件处理程序，@（在JavaScript又名this）的情况下调用时为window，不game。使用=>将该方法绑定到game。

Answer 2

这里的问题是，this，在那里你叫this.spawn()您window.onmousedown回调里面，实际上是window对象，而不是你的game对象。

你应该这样做

var that = this; 
return window.onmousedown = function(ev) { 
    var mx, my; 
    alert("click"); 
    mx = ev.screenX; 
    my = ev.screenY; 
    return that.spawn({ 
     x: mx, 
     y: my 
    }); 
    };