[JS] Answer arrow function in constructor method question (#163)
* answer for arrow function in constructor method question * fixed typo in my comment * Update javascript-questions.md
This commit is contained in:
parent
7e88383f98
commit
89cc3711a0
|
|
@ -1061,7 +1061,46 @@ One obvious benefit of arrow functions is to simplify the syntax needed to creat
|
|||
|
||||
### What advantage is there for using the arrow syntax for a method in a constructor?
|
||||
|
||||
TODO
|
||||
The main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, `this` will always refer to that object. For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log` that name, one as a regular function and one as an arrow function:
|
||||
|
||||
```js
|
||||
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
|
||||
```
|
||||
|
||||
The main takeaway here is that `this` can be changed for a normal function, but the context always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the context changing.
|
||||
|
||||
This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
|
||||
###### References
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
|
||||
* https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
|
||||
|
||||
[[↑] Back to top](#js-questions)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue