Quiz

在构造函数中对方法使用箭头语法有什么好处？

Topics
JavaScript
在GitHub上编辑

使用箭头函数作为构造函数内的一种方法的主要优点是，this的值在函数创建时被设置，之后无法更改。 因此，当构造函数用于创建一个新对象时，this 总是指该对象。 例如，假设我们有一个Person构造函数，以名字作为参数，有两个方法来console.log这个名字，一个是普通函数，一个是箭头函数：

const Person = function (firstName) {
  this.firstName = firstName;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};


const john = new Person('John');
const dave = new Person('Dave');


john.sayName1(); // John
john.sayName2(); // John


// The regular function can have its 'this' value changed, but the arrow function cannot
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John


john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John


john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John


var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because 'this' is now the window object)


var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

这里的主要启示是，对于普通函数`this'可以改变，但对于箭头函数，上下文始终保持不变。 所以，即使你将箭头函数传递到应用程序的不同部分，你也不必担心上下文会发生变化。

这对 React 类组件特别有用。 如果你定义了一个类方法，例如使用普通函数的点击处理程序，然后你把这个点击处理程序作为一个道具传递给子组件，你将需要在父组件的构造函数中绑定this。 如果你使用一个箭头函数，就不需要同时绑定 "this"，因为方法会自动从其包围的词法上下文中获得 "this "值。 (关于优秀演示和样本代码：https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)

在GitHub上编辑