Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Arrow Functions and This [duplicate]

I'm trying out ES6 and want to include a property inside my function like so

var person = {   name: "jason",    shout: () => console.log("my name is ", this.name) }  person.shout() // Should print out my name is jason 

However, when I run this code console only logs my name is. What am I doing wrong?

like image 528
thank_you Avatar asked Mar 01 '15 19:03

thank_you


People also ask

What does () => mean in JavaScript?

It's a new feature that introduced in ES6 and is called arrow function. The left part denotes the input of a function and the right part the output of that function.

What does => mean in programming?

What It Is. This is an arrow function. Arrow functions are a short syntax, introduced by ECMAscript 6, that can be used similarly to the way you would use function expressions. In other words, you can often use them in place of expressions like function (foo) {...} .

Can we use this keyword in arrow function?

In short, with arrow functions there are no binding of this . In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever. With arrow functions the this keyword always represents the object that defined the arrow function.

What is difference between arrow function and traditional function?

Since regular functions are constructible, they can be called using the new keyword. However, the arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.


1 Answers

Short answer: this points at the nearest bound this - in the code provided this is found in the enclosing scope.

Longer answer: Arrow functions do not have this, arguments or other special names bound at all - when the object is being created the name this is found in the enclosing scope, not the person object. You can see this more clearly by moving the declaration:

var person = {   name: "Jason" }; person.shout = () => console.log("Hi, my name is", this); 

And even more clear when translated into a vague approximation of the arrow syntax in ES5:

var person = {   name: "Jason" }; var shout = function() {   console.log("Hi, my name is", this.name); }.bind(this); person.shout = shout; 

In both cases, this (for the shout function) points to the same scope as person is defined in, not the new scope that the function is attached to when it is added to the person object.

You cannot make arrow functions work that way, but, as @kamituel points out in his answer, you can take advantage of the shorter method declaration pattern in ES6 to get similar space savings:

var person = {   name: "Jason",   // ES6 "method" declaration - leave off the ":" and the "function"   shout() {     console.log("Hi, my name is", this.name);   } }; 
like image 72
Sean Vieira Avatar answered Sep 29 '22 18:09

Sean Vieira