Question

我试过写一个简单的coffeescript脚本。当用户单击鼠标时，它使用画架来生成一个小的灰色圆圈。这是代码

$(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()

前两个警报调用正常。并且正确创建了testshape。回调也正常注册：鼠标单击会提示警告“单击”。但是从未调用spawn方法。我不明白为什么并看一下生成的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看起来很实用。为什么没有生成spawn？

更新我已将代码更改为

window.onmousedown=(ev)=>

现在正确调用该方法。但在方法内部，其他成员不可用。 spawn内的这个警告

alert(@stage)

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

如果只有回调和可选的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
    });
  };

Coffeescript：函数无法在同一个对象上调用函数

2 个答案: