javascript - 在 ES6 中使用箭头符号和不使用箭头符号向类添加方法的区别？

Question

我最近遇到了两种在 javascript ES6 中向类添加方法的方法。简而言之:

class SomeClass {

  someMethod(arg) {
    console.log(this.anotherMethod); 
      // This will produce an error because 'this' is undefined here.
  }

  anotherMethod = (arg) => {
    // does stuff
  }

}

有人能给我一个很好的解释，说明这里发生了什么，以及语法的含义吗？我从babel tutorial了解到ES6 中的箭头 => 表示一个函数。但我认为这里还发生了其他事情。

具体来说，如果我没记错的话，如果我尝试通过 this 关键字访问 someMethod()，它是行不通的。我认为关键在于我无法完全解析 Babelify ES6 教程的解释:

Unlike functions, arrows share the same lexical this as their surrounding code.

这是否意味着箭头符号会将函数分配给它周围作用域的 this？因此，如果您在类的范围内使用箭头，函数将被分配给 this 指向的对象？

我通过 Babelify's ES6 repl 运行了上面的示例代码.我不能完全遵循代码。在我看来，好像使用箭头语法创建的方法被添加到新的 Class=Object 本身，而没有箭头语法创建的方法被添加到 Class=Object 的原型(prototype)。

有没有人对区别是什么以及下面的代码在做什么有一个很好的简明解释？

"use strict";

var _createClass = (function() {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }
    return function(Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
})();

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var SomeClass = (function () {
  function SomeClass() {
    _classCallCheck(this, SomeClass);

    this.anotherMethod = function (dog) {
      // do stuff
    };
  }

  _createClass(SomeClass, [{
    key: "someMethod",
    value: function someMethod(arg) {
      console.log(this.anotherMethod);
      // This will produce an error b/c this is undefined here.
    }
  }]);

  return SomeClass;
})();

Answer 1

Can someone give me a good explanation of what is happening here, and the meaning of the syntax?

您对箭头函数的理解和期望是正确的。

您正在使用有争议的ES7 提案:class properties .它与在构造函数中声明该属性基本相同:

constructor() {
  this.anotherMethod = (arg) => {
    // does stuff
  };
}

因此 this 将引用该实例。

如果你disable experimental mode in Babel您会看到此属性声明会产生语法错误。