Why Doesn't `this` Work as Expected in ES6 Arrow Functions?

Arrow Functions and this

When incorporating properties within functions using ES6, an issue arises when attempting to access the this object.

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

However, running this code fails to include the intended name, printing only "my name is." This problem stems from arrow functions' unique behavior.

Arrow functions lack bound this, arguments, or other special names. When an object is created, this is located in the enclosing scope, not within the object. By examining the code in these variations, the issue becomes more apparent:

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

and, when translating to 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 instances, this for the shout function points to the scope in which person is defined, not the new scope associated with the object when it's added to person.

While arrow functions cannot replicate the intended behavior, ES6 offers an alternative solution by utilizing method declaration patterns to save space:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

The above is the detailed content of Why Doesn't `this` Work as Expected in ES6 Arrow Functions?. For more information, please follow other related articles on the PHP Chinese website!