箭头函数使用call、apply、bind方法——不起作用？

Question

当我尝试将一个简单的ES5代码转换为ES6时，我有些困惑。

假设我有这段代码：

var obj = {num: 2}

var addToThis = function (a, b, c) {
  return this.num + a + b + c
}

// call
console.log(addToThis.call(obj, 1, 2, 3))

// apply
const arr = [1, 2, 3]
console.log(addToThis.apply(obj, arr))

// bind
const bound = addToThis.bind(obj)
console.log(bound(1, 2, 3))

以上所有内容都运行顺利，符合预期。

但是一旦我开始使用ES6功能，比如const和箭头函数，像这样：

const obj = {num: 2}

const addToThis = (a, b, c) => {
  return this.num + a + b + c
}

它不再起作用并抛出错误：无法读取未定义属性“num”。

有人能解释一下为什么this不再起作用吗？

- angular_learner

---

嘿，@angular_learner，你在这里得到了必要的答案吗？如果没有，请指出来，这样其他人就可以提供更详细的答案，如果有的话，请将其标记为已接受。这对许多人都有帮助。 - Abrar

答案不足够。 - Eric Bishard

Answer 1

lambda函数（箭头函数）不会创建新的函数上下文，而是使用调用函数的上下文。

因此，“this”指向父级上下文。如果没有“num”变量，则为未定义。

通常这非常方便，因为大多数情况下您仅在每个创建的函数中使用一个上下文，而不是创建新的上下文。在我看来，使用call / apply / bind完全令人困惑，而lambda函数则使其变得不必要。

- norekhov