Question

为什么将函数引用包装到匿名函数中可以纠正'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
});

为什么？

Answer 1

只是＆＃34;想象＆＃34;如何看待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()），则将其用作this，但如果它没有＆＃39; t ...然后你需要bind它到一个，如：

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

Answer 2

JavaScript中的

（this）基于调用站点（如何调用该函数）来解析。

如果函数被调用为一个方法，意味着它被用作.func（），那么它将作为这个传递。 logger.updateCount（）在事件监听器中被调用，它被称为updateCount方法将始终接收logger对象。这对记录器对象来说很难。
如果函数对象作为事件处理程序或回调传递。这绑定到触发事件的DOM元素。
可以使用bind方法更改函数接收的此上下文，如下所示： logger.updateCount.bind（）在上面的情况下，updateCount将始终接收您作为参数发送的targetObject

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

2 个答案: