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上编辑