首页  >  文章  >  web前端  >  在 JavaScript 中使用实例方法作为回调时如何保留 this 作用域?

在 JavaScript 中使用实例方法作为回调时如何保留 this 作用域?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-06 19:54:03765浏览

How to Preserve `this` Scope When Using Instance Methods as Callbacks in JavaScript?

this JavaScript 回调中的难题

将实例方法分配为事件处理程序时,this 的范围从事件调用者的对象实例。这可能会出现问题,需要使用如下解决方法:

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

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

虽然有效,但这种方法可能看起来很尴尬。有更好的方法吗?

理解闭包

根本问题超出了 jQuery,根源于 JavaScript 中闭包的行为。闭包允许内部函数访问在其外部作用域中声明的变量。但是,this 是一种特殊变量,可以动态更改其范围。

要将 this 引入嵌入式函数,可以将其分配给别名,例如 abc:

var abc = this;

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!
  }
  ...
};

这使得 abc 即使在嵌入函数中也能保留正确的对象引用。

结论

别名 this 可以在不影响范围的情况下有效地使用实例方法作为回调。此技术不仅适用于 this,还适用于其他伪变量,例如 arguments.

以上是在 JavaScript 中使用实例方法作为回调时如何保留 this 作用域?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn