JS在回调时引用“this”

JS Refrencing "this" when in callback

本文关键字：this 引用 回调 JS      更新时间：2023-09-26

Part 1：

如何从回调中动态引用父属性？

例如，如果我们有这个结构。

var someClass = {
   htmlClass : 'aFunClass',
   bindEvents: function(){
      jQuery(function(){
          alert( this.htmlClass );
      });
   });
}

目前，这将返回"undefined"作为其引用jQuery函数，而不是父函数。

篇二：

执行此操作

的最动态方法是什么？ 支持下一个条件。

var someClass = {
   htmlClass : 'aFunClass',
   bindEvents: function(){
      var self = this;
      jQuery(function(){
          if( !jQuery('body').hasClass( self.htmlClass ) ){
              self = {};
          }
      });
   });
}

目前，如果您这样做 - 那么 someClass 保持不变，并且不会成为空对象。因此，将其直接分配给另一个变量似乎不起作用。

使用范围限定为您要记住的"this"的变量：

var someClass = {
   htmlClass : 'aFunClass',
   bindEvents: function(){
      var that = this;
      jQuery(function(){
          alert( that.htmlClass );
      });
   });
}

局部变量的命名标准包括self、THIS、that等。只要选择你喜欢的东西（我倾向于在面向对象的 JS 中使用 THIS，但我主要使用 C#，所以任何"thisy"对我都有好处）:)

常见的做法是在变量中保留对this上下文的引用：

bindEvents: function(){
      var self = this; // keep a reference to this
      jQuery(function(){
          alert( self.htmlClass );
      });
   });

另一种解决方案是将函数绑定到特定上下文： 

bindEvents: function(){
      jQuery(function(){
          alert( this.htmlClass );
      }.bind(this));
   });
相关文章：