首页 web前端 js教程 为什么在 JavaScript 中使用'var self = this”?

为什么在 JavaScript 中使用'var self = this”?

Nov 27, 2024 am 02:11 AM

Why Use

JavaScript 习惯用法:理解“var self = this”

“var self = this;”这种习惯用法在 JavaScript 代码中很常见,尤其是在事件处理程序中。它允许您在嵌套函数或事件处理程序闭包内维护对原始“this”对象的引用。

当您在构造函数或对象内定义函数时,执行上下文会发生变化,并且“this”引用到非严格模式下的全局对象(窗口)。在严格模式下,“this”将是未定义的。为了避免这种情况,开发人员使用“var self = this”来保留对原始对象的引用。

为什么使用“var self = this”?

考虑以下来自 WebKit 的 HTML5 SQL Storage Notes 演示的示例:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}
登录后复制

在此代码中,“self”被分配给“this”构造函数。这确保了当调用事件处理程序时(例如单击“note”div),“this”仍将引用原始 Note 对象,从而允许正确调用“onMouseDown”等方法。

“var self = this”常见吗?

是的,这个习惯用法在 JavaScript 应用程序中广泛使用,特别是在处理闭包时和事件处理程序。它允许开发人员在嵌套函数中维护对原始上下文的引用。

替代方法

虽然“var self = this”很有效,但它可能会令人困惑读。另一种方法是使用箭头函数(ES6 中引入),它保留周围上下文的“this”绑定。

例如:

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}
登录后复制

注意:

现在不鼓励使用“var self = this”,因为它可能由于存在而导致错误“窗口.self”。建议使用箭头函数或其他替代方法来维护“this”绑定。

以上是为什么在 JavaScript 中使用'var self = this”?的详细内容。更多信息请关注PHP中文网其他相关文章!

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

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 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中替换字符串字符

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

自定义Google搜索API设置教程

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

示例颜色json文件

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

8令人惊叹的jQuery页面布局插件

10个jQuery语法荧光笔 10个jQuery语法荧光笔 Mar 02, 2025 am 12:32 AM

10个jQuery语法荧光笔

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

构建您自己的Ajax Web应用程序

什么是这个'在JavaScript? 什么是这个'在JavaScript? Mar 04, 2025 am 01:15 AM

什么是这个'在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles