CODEWITHSUNDEEP
javascriptecmascript-6arrow-functions
김종현
김종현

Reputation: 53

What is the difference between the two arrow functions?

I understand 'this' in the arrow function points to this in the upper excution context.

var name = 'aaa';
const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}
person.getName();

so I understand that getName() is logging the name of the global object in the code above.

const name = 'aaa';
const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}
const test = new Person();
test.getName();

However, the test object in this code is an object that is created as a Person constructor. Therefore, I think getName() of test object is the same as this used in method in object as above code. What did I understand wrong?

Upvotes: 2

Views: 122

Answers (2)

Mark
Mark

Reputation: 92440

this in arrow functions is defined by the enclosing lexical context. A regular object doesn't define a this local to the object. So the lookup continues outward and you get the global object. On the other hand when you use the new operator with a function it creates an object and explicitly sets this to point to that object. That is the value of this the arrow function will see because that is the value of this in the immediate lexical context.

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {
    name: 'bbb',
    // non-arrow function
    getName() { console.log(this.name)}
}
person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {
    this.fname = 'Bob';
    this.obj = {
      getName: () => { console.log(this.fname)}
    }
   
}
const test = new Person();
test.obj.getName();

Upvotes: 2

Tân
Tân

Reputation: 1

const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}

By this way, you have defined an object name person with 2 properties name and getName. The type of name is a string while the type of getName is a function (arrow function). One of the differences between a normal function and an arrow function is the way to use this keyword.

Since person is an object and NOT a function, you cannot create new instanceof this object:

var p = new person(); // Error: person is not a constructor

Otherwise, if Person is a function

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

const person = {
    name: 'bbb',
    getName: () => {console.log(this)}
}

person.getName();

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {console.log(this)}
}
const test = new Person();
test.getName();

Upvotes: 2

Related Questions