如何在 JavaScript 回调中正确访问'this”？

JavaScript 回调中的这种关联性

在 JavaScript 中，利用事件处理程序回调中的实例方法可以改变“this”的预期范围调用回调的源的实例。因此，经常使用类似于以下示例的代码：

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

虽然功能强大，但这种方法可能看起来很奇怪。有没有更优化的解决方案？

理解闭包和“this”亲和性

这个问题超越了 jQuery，源于 JavaScript 对“this”和闭包的处理。闭包允许嵌套函数访问封闭函数中定义的变量，如下所示：

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

“但是，”行为不同。与在特定范围内保持不变的普通变量不同，“this”可以在不同范围内动态变化。

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

解决方案：给“this”起别名

来规避这个问题挑战，JavaScript 允许我们将“this”分配给一个变量，本质上是给它起别名。这使我们能够在整个嵌套函数中引用预期对象。

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

同样的原则也适用于其他伪变量，例如“参数”。

以上是如何在 JavaScript 回调中正确访问'this”？的详细内容。更多信息请关注PHP中文网其他相关文章！