箭头函数的 this 值

Question

我正在尝试理解 ECMAScript 6 中的箭头函数。

这是我在阅读时遇到的定义：

Arrow functions have implicit this binding, which means that the value of the this value inside of an arrow function is aways the same as the value of this in the scope in which the arrow function is defined!

根据定义，我认为 arrow function 的 this 应该包含与箭头函数定义相同的块级值。

代码：

var test = {
  id: "123123",
  k: {
    laptop: "ramen",
    testfunc: () => console.log(this)
  }
}

console.log(test.k.testfunc);

但是，我从代码中得到了这个结果

function testfunc() {
    return console.log(undefined);
}

我认为我会得到的输出是：

{"laptop": "ramen"}

如果我运行这个

console.log(test.k.testfunc());

Answer 1

让我们转换成等效的 ES5 代码：

var test = {
  id: "123123",
  k: {
    laptop: "ramen",
    testfunc: function(){return console.log(this)}.bind(this)
  }
}

请记住，this 取决于您如何调用该函数。外部 this 不在函数内部，因此在严格模式下它将默认为 undefined。

下面的简化场景：

console.log(this) // undefined

var test = {
  a: this // same `this` as above
}

Answer 2

您在定义 var test 的相同范围内定义箭头函数。如果您在全局范围内定义 test，那么箭头函数的上下文也将是全局范围。

如果您在方法内部定义测试，箭头函数将共享该方法的上下文。

function method() {
  const self = this;

  const test = {
    foo: () => console.log(self === this);
  }

  test.foo()
  // console: true
}

箭头函数的 this 值

This values for arrow functions

javascript

ecmascript-6

arrow-functions