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

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

Nov 06, 2024 pm 07:54 PM

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

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替换字符串字符

jQuery检查日期是否有效 jQuery检查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery检查日期是否有效

jQuery获取元素填充/保证金 jQuery获取元素填充/保证金 Mar 01, 2025 am 08:53 AM

jQuery获取元素填充/保证金

前5个日期操纵JS插件 前5个日期操纵JS插件 Feb 28, 2025 am 12:34 AM

前5个日期操纵JS插件

10值得检查jQuery插件 10值得检查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得检查jQuery插件

10个jQuery手风琴选项卡 10个jQuery手风琴选项卡 Mar 01, 2025 am 01:34 AM

10个jQuery手风琴选项卡

jQuery添加卷轴到Div jQuery添加卷轴到Div Mar 01, 2025 am 01:30 AM

jQuery添加卷轴到Div

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

自定义Google搜索API设置教程

See all articles