Question

在我的程序中使用function()语法返回目标元素的this值，但使用箭头函数返回窗口对象。这两个函数中的每一个如何获得this？

function editTemplates() {

//sits within for loop

    clocksTemplate.gmt[i].addEventListener('keydown', (e) => {
      console.log(this); //returns window object
    });

    clocksTemplate.gmt[i].addEventListener('keydown', function(e) {
      console.log(this); //returns element bound to clocksTemplate.gmt
    });

根据带有箭头功能的MDN，这应该＆＃34;保留封闭上下文中的原始含义＆＃34;。封闭上下文是事件监听器吗？还是它所处的功能？根据我的测试，箭头函数的封闭上下文必须是Window对象，但我不知道如何。使用 function（）语法，封闭函数用于重新定义此值，我假设它在addEventListener方法中执行此操作。我已经深入讨论了这个主题here和here，但我是一个JS新手，我无法理解这是如何应用于我的问题。

Answer 1

这是完全正常的＆amp;箭头函数的预期行为。

正如documentation提到常规功能：

每个新函数都定义了自己的this值（一个新的对象）构造函数的情况，在严格模式函数调用中未定义，上下文对象，如果函数被调用为＆＃34;对象方法＆＃34;等等。

如果需要在常规函数中覆盖this的值，那么我们可以使用call()或apply()来调用它，而不是直接调用它。

因此，在常规函数的情况下，回调函数由addEventListener函数在内部使用call()或apply()进行调用，其值设置为绑定到{{1的元素}}。使用clocksTemplate.gmt或call()来调用回调是一种标准做法。

如果是第一个函数（箭头函数），则不会为apply()分配任何新值。无法使用this或call()调用它们，因为箭头函数是匿名的。因此它继续具有由封闭函数apply()定义的值，恰好是editTemplates()。

请参阅下面的代码示例：

window

希望这能回答你的问题。

箭头函数将此作为窗口对象返回

1 个答案: