why 'this' keyword is not working inside shorthand method of an object in javascript?

Question

I am learning javascript. I used 'this' as below in javascript

let person = {
    name: 'Krishna',
    age: 35,
    sayHello() {
        return 'Hello, my name is ' + this.name;
     },
     sayHi: () => `Hi ${this.name}`
};

console.log(person.sayHello());
console.log(person.sayHi());

sayHello() function is properly getting 'this' as person object. But in shorthand function sayHi(), this is referring to global window object. Here I am calling sayHi() with person object. But not sure why this is not getting referred to window object. Can any one please explain why this in sayHi() is not getting initialized with person object?

Because you are calling it from a context where the global window is assigned to `this` and the arrow function (lamda) is capturing that passing it on to the call. — Igor, Mar 20 '18 at 18:11
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Igor, Mar 20 '18 at 18:12

score 1 · Answer 1 · answered Mar 20 '18 at 18:30

1

Arrow Functions lexically bind their context so this actually refers to the originating context.

{
  sayHi: () =>  // in context,
  sayHello() {
    // needs this to be in context
  }
}

answered Mar 20 '18 at 18:30

Joe Warner

2,928
1
12
29

score 1 · Answer 2 · answered Mar 20 '18 at 18:32

1

When you use sayHi: () => ... you are bounding this to the global context, not to person, thus you don't have a name property on the scope. This reading might help you.

answered Mar 20 '18 at 18:32

josebreijo

169
1
5

score 1 · Answer 3 · answered Mar 20 '18 at 18:47

this inside the arrow function point to the same object as it did right before the arrow function was assigned (window).

If you really want to access the person object inside arrow function you have to do that directly by the the object name (person):

let person = {
    name: 'Krishna',
    age: 35,
    sayHello() {
        return 'Hello, my name is ' + this.name;
     },
    sayHi: () => `Hi ${person.name}`
};

console.log(person.sayHello());
console.log(person.sayHi());

score 1 · Accepted Answer · answered Mar 20 '18 at 18:55

When you define sayHello(), you are leaving the this keyword unbound, to be assigned in the function invocation person.sayHello(). this refers to whatever is left of the dot in the invocation, namely person.

In sayHi(), you are binding the this keyword at the moment sayHi is defined. Since the context is not a function invocation but rather an object definition, the value of this is unknown and it defaults to the window object. Once you bind it in this way, it cannot be reassigned. When you run person.sayHi(), this refers to window and not person.

score -1 · Answer 5 · answered Mar 20 '18 at 18:15

-1

In sayHello, you are returning the resulting string (which is calculating in context of the object (has this).

In sayHi, you are returning a function to console.log and then calling it where this is no longer defined because you're out of context.

answered Mar 20 '18 at 18:15

J Livengood

2,363
1
9
23

why 'this' keyword is not working inside shorthand method of an object in javascript?

5 Answers5