在带有箭头符号的类中向ES6和不带有箭头符号的类中添加方法之间的区别? [英] Difference between adding a method to a class with the arrow symbol and without in ES6?

问题描述

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

I have recently come across two ways of adding a method to a class in javascript ES6. Here they are in a nutshell:

class SomeClass {

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

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

}

有人可以给我很好的解释这里发生的事情以及语法的含义吗?我从 babel教程了解到，ES6中的箭头=>表示功能.但是我认为这里还有其他事情发生.

Can someone give me a good explanation of what is happening here, and the meaning of the syntax? I understand from the babel tutorial that the arrow => in ES6 indicates a function. But something else is going on here I think.

特别是，如果我没有记错的话，如果尝试通过this关键字访问someMethod()，它将无法正常工作.我认为关键是在我无法从Babelify ES6教程中完全解析的解释中:

Specifically, if I'm not mistaken, if I were try to access someMethod() via the this keyword, it would not work. I think the key is in an explanation that I can't quite parse form the Babelify ES6 tutorial:

与函数不同，箭头与其周围的代码共享相同的词汇.

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

这是否意味着箭头符号会将功能分配给周围示波器的this?因此，如果您在类范围内使用箭头，该功能是否已分配给该对象指向的对象?

Does this mean that the arrow symbol will assign the function to the this of the scope surrounding it? So that if you use an arrow in the scope of a class, the function is being assigned to the object to which this points?

我通过 Babelify的ES6副本运行了上面的示例代码.我不太遵守代码.在我看来，似乎将使用箭头语法创建的方法添加到了新的Class = Object本身中，而将没有使用箭头语法创建的方法添加到了Class = Object的原型中.

I ran this the sample code above through Babelify's ES6 repl. I can't quite follow the code. It looks to me as if the method created using the arrow syntax is being added to the new Class=Object itself, whereas the method created without the arrow syntax is being added to the Class=Object's prototype.

有人对其中的区别以及下面的代码在做什么有一个很好的简洁的解释吗?

Does anyone have a good concise explanation of what the difference is, and what the code below is doing?

"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;
})();

推荐答案

有人可以给我很好的解释这里发生的事情以及语法的含义吗?

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

您对箭头功能的理解和期望是正确的.

Your understanding and expectation of arrow functions is correct.

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

You are using a controversial ES7 proposal: class properties. It is basically the same as declaring that property inside the constructor:

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

因此this将引用该实例.

如果您

If you disable experimental mode in Babel you will see that this property declaration produces a syntax error.

这篇关于在带有箭头符号的类中向ES6和不带有箭头符号的类中添加方法之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！