箭头函数将此作为窗口对象返回 [英] Arrow functions return this as the window object

问题描述

在我的程序中使用函数（）语法返回目标元素的 this 值，但是使用箭头函数返回窗口对象。这两个函数如何得到这个？

In my program using the function() syntax is returning the this value of a target element, but using an arrow function returns the window object. How are each of these two functions getting their 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 带有箭头函数，这应该保留封闭上下文中的原始含义。封闭上下文是事件监听器吗？还是它所处的功能？根据我的测试，箭头函数的封闭上下文必须是Window对象，但我看不出如何。使用 function（）语法，封闭函数用于重新定义此值，我假设它在 addEventListener 方法中执行此操作。本主题已深入讨论此处和这里但我是一个JS新手，我无法理解这是如何应用于我的问题。

According to MDN with arrow functions, this should "retain the original meaning from the enclosing context". Is the enclosing context the event listener? or the function it sits within? According to my test, the enclosing context for the arrow function must be the Window object but I can't see how. With the function() syntax the enclosing function is meant to redefine the this value, which I'm assuming it is doing here within the addEventListener method. This topic has been discussed in depth here and here but I'm a JS newbie and I couldn't understand how this applied to my problem.

推荐答案

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

That is perfectly normal & expected behaviour of arrow functions.

由于文档提到常规函数：

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

every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.).

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

If it is required to override the value of this in a regular function, then instead of calling it directly, we can invoke it using call() or apply().

所以在常规函数的情况下，回调函数由 addEventListener 函数在内部调用，使用调用（）或 apply（），其值设置为绑定到 clocksTemplate.gmt 的元素。标准做法是使用 call（）或 apply（）来调用回调。

So in your case of regular function, the callback function is getting invoked internally by addEventListener function using a call() or apply() with value of this set to element bound to clocksTemplate.gmt. It's a standard practice to use call() or apply() for invoking callbacks.

如果是第一个函数（箭头函数），则此不会被赋予任何新值。它们不能使用 call（）或 apply（）调用，因为箭头函数是匿名的。所以它继续具有由封闭函数 editTemplates（）定义的值，恰好是 window 。

In case of the first function (arrow function), the this does not get assigned any new value. They can't be invoked using call() or apply() because arrow functions are anonymous. So it continues to have the value that was defined by the enclosing function editTemplates() and that happens to be window.

请参阅下面的代码示例：

See below for code example:

// REGULAR FUNCTION

function editTemplates() {

    console.log(this)    // window
    var myVar = this;

    // sits within for loop

    clocksTemplate.gmt[i].addEventListener('keydown', function(e) {

        // new value assigned for 'this' as element bound to clocksTemplate.gmt

        console.log(this);    // returns element bound to clocksTemplate.gmt

        console.log(myVar);    // returns window
    });



// ARROW FUNCTION (Anonymous Functions)

function editTemplates() {

    console.log(this)    // returns window object
    var myVar = this;

    // sits within for loop

    clocksTemplate.gmt[i].addEventListener('keydown', (e) => {

        // No new value gets assigned to 'this'

        console.log(this); // returns window object

        console.log(myVar);    // returns window object

        // Saves the hassle of saving 'this' to another variable!
    });

希望这能回答你的问题。

Hope this answers your question.

这篇关于箭头函数将此作为窗口对象返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！