JavaScript 上下文箭头函数

Question

这个问题已经有答案了:

Methods in ES6 objects: using arrow functions (6 个回答)

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答)

已关闭 5 年前。

我有以下代码:

const person = {
  name: 'Bob',
  greet: () => {
    console.log(`Hi, my name is ${this.name}`);
  }
};

person.greet();

由于某种原因，它输出:

Hi, my name is undefined

我希望它输出:

Hi, my name is Bob

Answer 1

An arrow function does not have its own this; the this value of the enclosing execution context is used

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

示例:

// An arrow function does not have its own this
// this of enclosing context is used
window.something = 'Yo yo yo'; 
const data = {
  something: 'Eduardo Stuart',
  
  arrowPrintName: () => {
    console.log(this.something) // this will print "window.something" instead
  },

  shortPrintName () {
    console.log(this.something) // this will print eduardo stuart
  }
}

data.arrowPrintName();
data.shortPrintName();