Question

我阅读了有关此主题的其他答案，但不确定我是否了解for (var i = 0; i < lstdata.posts.data.length; i++) { var Post = { Id: lstdata.posts.data[i].id, Images: lstdata.posts.data[i].full_picture, Message: lstdata.posts.data[i].message } Postparam.push(Post); //all[i] = Post; $.ajax({ type: "post", url: '/Facebook/AddPost', data: Post, success: function (responses) { } }); }关键字在this中的工作原理。

addEventListener

const button = document.querySelector('button'); function foo() { console.log(this) } button.addEventListener('click', foo);是foo中的常规函数，它不是addEventListener对象上的方法。调用button时应在全局对象的上下文中执行，因此foo应该等于this而不是window。

类似于this example的情况：

button

其中const obj = { method: function (cb) { console.log('method', this); // `this` === `obj` return cb(); } }; obj.method(function() { console.log('cb', this); // `this` === `window` });可以视为obj，button可以是method，而addEventListener是cb内部的回调。

我知道我可以使用addEventListener来更改bind的上下文，但是我想更深入地了解它为何如此工作。

为什么在this回调中的this是在当前元素的上下文而不是全局对象的上下文上调用的？

Answer 1

如果我们使用使用function关键字定义的函数作为事件处理程序，则该事件处理程序函数将在绑定了事件的元素的上下文中执行

button.addEventListener('click', foo);

因此，在这种情况下，foo中的this值将是button元素。

如果我们使用箭头函数代替它们，则this值将成为窗口对象

原因是箭头函数中的this与创建箭头函数的上下文具有相同的值

button.addEventListener('click', () => { console.log(this) // window } );

有关词汇的更多信息 What is lexical 'this'?

Answer 2

在将this设置为触发事件的对象的情况下执行事件侦听器，因为一个侦听器可以侦听许多对象的事件。

但是，如果调用表达式不包含通过this进行的成员访问，则常规函数调用不会设置.。在这些情况下，如果没有激活"use strict"，则this将成为全局上下文，在浏览器中为window。

如果您希望this的{{1}}为cb，则可以将obj替换为cb()，这将设置cb.apply(this)的cb到封闭功能。

最后的警告：这些this机制仅适用于用this关键字定义的功能（以及类似的机制）。定义时，箭头功能内的function会锁定为封闭范围的作用域。

Answer 3

就像您可以使用bind或call来将this设置为所需的内容一样，浏览器API也可以调用任何设置为this的值的函数。它以多种怪异的方式使用，而且不一致。在类和方法之外，this更像是函数的秘密额外参数。在这种情况下，您可以通过从event.target获取按钮元素来避免需要它。

Answer 4

由于事件处理程序是回调的一种，因此将它们作为参数传递给函数。让我们创建一个简单的函数，并将一个回调作为参数传递给它，并查看其实际工作原理。

    function testCallBack(fn){
       console.log('inside testCallBack');
       fn('Hello I am a callBack')
    }

    testCallBack(foo);

    function foo(param){
      console.log(param);
    }

// Outputs: 
inside testCallBack
Hello I am a callBack

JavaScript中的每个作用域都有一个 this 对象，该对象代表该函数的调用对象。
这就是为什么在当前元素而不是全局对象的上下文上调用addEventListener回调中的this的原因。请参考下面的代码以获得更清晰的理解：

   function sayNameForAll() {
        console.log(this.name);
    }

    var person1 = {
        name: "Rajat",
        sayName: sayNameForAll
    };

    var person2 = {
        name: "pldg",
        sayName: sayNameForAll
    };

    var name = "Sidd";

    person1.sayName();      // outputs "Rajat" here calling object is person1, so this represents person 1
    person2.sayName();      // outputs "pldg"

    sayNameForAll();        // outputs "Sidd"

因此，当您呼叫button.addEventListner('click',foo)时，您的呼叫对象是button。

Answer 5

虽然我们知道事件侦听器是在将'this'设置为事件目标的情况下执行的，但是您发现的EventTarget链接中EventTarget.prototype.dispatchEvent方法中的以下代码行将回答您的问题：实施方式。

for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
}

'stack'数组具有回调函数，并且通过将事件目标实例（this）和事件作为参数传入来使用.call调用它们。

addEventListener回调中的此关键字

5 个答案: