2

标题说明了一切。当我在 CoffeeScript 中使用胖箭头时，它会this在调用函数之前先存储。例如：

class myClass
    constructor: ->
        element = $ "#id"
        element.click ->
            @myMethod(@value)
            return
        return

    myMethod: (c)->
        window.console.log(c)
        return

会产生

var myClass;

myClass = (function() {
  function myClass() {
    var element;
    element = $("#id");
    element.click(function() {
      this.myMethod(this.value);
    });
    return;
  }

  myClass.prototype.myMethod = function(c) {
    window.console.log(c);
  };

  return myClass;

})();

现在在 JavaScript 的第 8 行，this.myMethod是错误的。在这个范围内，this指的是element而不是类MyClass。

但是，如果在 CoffeeScript 的第 4 行，我用 JavaScript 中的第 8 行替换element.click ->将element.click =>成为_this.myMethod(_this.val)在调用函数之前this存储引用 myClass的位置。_this但是_this.value是未定义的，即使它已定义，我在这里尝试访问的对象也是（由该函数范围内element的实际关键字引用）。this

现在如何访问实际this？

4

1 回答 1

2

您至少可以通过三种方式实现您的目标。第一个是：

class myClass
    constructor: ->
        element = $ "#id"
        element.click =>
            @myMethod(element.value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

第二个：

class myClass
    constructor: ->
        element = $ "#id"
        myMethodCallback = (c) => @myMethod(c)
        element.click ->
            myMethodCallback(@value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

第三个如下图所示。不过，我不确定 jQuery API 的使用情况，所以最好查看适当的文档页面。

class myClass
    constructor: ->
        element = $ "#id"
        element.click (event) =>
            @myMethod(event.target.value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

我更喜欢第一种方式，因为它似乎更直接。这个或另一个，但您需要决定您希望在 element.click 回调范围内拥有“哪个 this”。不可能同时访问两个“thises”。

顺便一提。所有这些返回语句似乎都是不必要的。最短的工作解决方案如下所示：

class myClass
    constructor: ->
        element = $ "#id"
        element.click => @myMethod(element.value)

    myMethod: (c) -> window.console.log(c)
于 2014-02-04T17:50:16.047 回答