为什么将函数引用封装到匿名函数中可以更正'这'指向

Why wrap a function reference into an anonymous function can correct 'this' point to?

本文关键字：函数 指向 封装 引用 为什么      更新时间：2023-10-20

为什么将函数引用封装到匿名函数中可以更正"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()中一样），它就会将其用作this，但如果它没有。。。然后你需要将其bind转换为一个，比如：

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

（this）是根据调用站点（函数的调用方式）解析的。

  1. 如果函数是作为一个方法调用的，也就是说，如果它像.func（）一样使用，那么它将按如下方式传递。logger.updateCount（）是在事件侦听器中调用的，而不是从哪里调用它。updateCount方法将始终接收logger对象。这是硬绑定到记录器对象的。

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

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

相关文章：