从.call()传递到箭头函数

Question

我有一个箭头函数，我尝试使用call()执行。为了简化起见，如下所示：

按预期运行

const func = (e) => {
    console.log(e)
}

func.call(null, e)

嗯...这里发生了什么？

我希望以下代码将element作为this传递给func。

const func = (e) => {
    console.log(this)
    console.log(e)
}

func.call(element, e)

然而，如果我将它改为常规函数定义，则一切都按预期工作。

但是，this仍然保持为undefined。

const func = function (e) {
    console.log(this)
    console.log(e)
}

func.call(element, e)

问题

为什么我不能通过call()函数将上下文传递到箭头函数中的this？

- Adam Hopkins

---

你为什么决定使用箭头函数而不是普通函数？ - CodingIntrigue

@CodingIntrigue 没有理由，纯粹是我注意到这种行为后的实验。 - Adam Hopkins

Answer 1

this 在箭头函数中没有绑定，因此 call() 和 apply() 只能传递参数，会忽略传入的 this 参数。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Invoked_through_call_or_apply

- AJ Funk

---

太好了，然后eslint说它有问题与所有的function()，要使用箭头函数。所以我们之前用let root = this;的解决方案现在变成了，哦看，我们现在不能使用call或apply了。除非你从eslint中删除对function的检查，但是airbnb lint设置为警告函数。 - Pocketninja

Answer 2

在ES6中，this拥有词法作用域的意义，这意味着箭头函数内部的this值与箭头函数外部的this值相同。而在ES6之前的形式中，this是您作为call方法的第一个参数传递的对象。

- user1481317