javascript - onclick 事件以不同的方式执行相同的功能

Question

这个问题已经有答案了:

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

已关闭 3 年前。

我有一个测试功能:

function test(element) {
    console.log(element.id);
    console.log(element);
}

当我的按钮 <button id="testbtn">afsdasd</button> 时我想将其用作回调被按下。如果我这样做:

document.getElementById('testbtn').onclick = () => { 
    test(this); 
};

我得到以下输出: 但是，如果我这样做:

document.getElementById('testbtn').onclick = function() { 
    test(this); 
};

输出不同: 为什么？我认为两个版本完全相同？

Answer 1

第一个是箭头函数，第二个是常规函数。箭头函数没有自己的 this 绑定(bind)，因此它们将在下一个外部词法范围中搜索 this。在您的情况下，箭头函数的封闭词法范围是 Window 对象。

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope, an arrow function ends up finding the this from its enclosing scope. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions