2

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?

0

2 Answers 2

2

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();     

1
  • If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.
    – Mark
    Commented Nov 23, 2018 at 5:27
2
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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.