Javascript 为什么将函数引用包装到匿名函数中可以纠正'；这'；指向？

为什么将函数引用包装到匿名函数中可以更正“this”指向

var logger = {
  x: 0,
  updateCount: function () {
    this.x++;
    console.log( this.x );
    console.log( "Now I'm pointing to : " + this );
  }
}

当我这样打电话的时候

btn.addEventListener('click', logger.updateCount );

// may work like below
function cb() {
  console.log(this);
}

addEventListener('click', cb) {

  // this --> DOM element

  cb(); //=> console.log(this) --> DOM element

}

但是，当我在匿名函数中包装logger.updateCount时，是否可以更正“this”

btn.addEventListener('click', function (e) {
    logger.updateCount(); //=> this -- point to 'logger' object
});

为什么

只要“想象”一下它在

btn.addEventListener

内部的样子，可能会像：

function addEventListener( eventString, callback ) {

   // check the event
   // if all is good
   // set up an event object
   // call back
   callback(eventObject);

}

由此可以看出，

addEventListener

只知道有一个回调函数，但不知道它的

this

是否应该是一个特定的对象

JS的工作方式是，假设它在点之前找到某个对象（如第二个示例中的

logger.updateCount（）

），它将其用作

此

，但如果它没有。。。然后您需要将它绑定到一个，如：

btn.addEventListener('click', logger.updateCount.bind(logger) );

（这一点）在JavaScript中是根据调用站点（函数的调用方式）来解决的

如果函数是作为方法调用的，这意味着如果它像.func（）一样使用，则将作为以下内容传递。updateCount（）在事件监听器中被调用，无论从何处调用，updateCount方法将始终接收记录器对象，如下所示。这很难绑定到logger对象

如果函数对象作为事件处理程序或回调传递。this绑定到触发事件的DOM元素

函数接收的此上下文可以通过使用bind方法进行更改，如下所示： logger.updateCount.bind（）文件 在上述情况下，updateCount将始终接收作为此上下文的参数发送的targetObject

---

logger.updateCount.bind（this）

使用它传递this@murli2308，您应该回答这个问题…绑定

this

而不是

logger

，当代码在全局上下文中执行时，

this

是什么？