JS在回调中引用“this”[重复]答案

【问题标题】：JS Refrencing "this" when in callback [duplicate]JS在回调中引用“this”[重复]
【发布时间】：2014-11-27 11:12:30
【问题描述】：

第 1 部分：

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

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

var someClass = {

   htmlClass : 'aFunClass',

   bindEvents: function(){

      jQuery(function(){
          alert( this.htmlClass );
      });
   });
}

目前这将返回“未定义”作为它引用 jQuery 函数，而不是父函数。

第 2 部分：

这样做最有活力的方式是什么？支持下一个条件。

var someClass = {

   htmlClass : 'aFunClass',

   bindEvents: function(){
      var self = this;

      jQuery(function(){
          if( !jQuery('body').hasClass( self.htmlClass ) ){
              self = {};
          }
      });
   });
}

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

【问题讨论】：

标签： javascript jquery callback scope this

【解决方案1】：

使用范围为您想要记住的“this”的变量：

var someClass = {

   htmlClass : 'aFunClass',

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

局部变量的命名标准包括self、THIS、that等。随心所欲（我倾向于在面向对象的JS中使用THIS，但我主要使用C#所以任何“thisy”对我都有好处）:)

【讨论】：

此方法似乎可以仅用于从其中访问信息 - 但是它不能解决执行此操作时发生的其他问题，如果您查看我对问题的补充，您将能够看。谢谢！

【解决方案2】：

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

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

另一种解决方案是binding 特定上下文的函数：

bindEvents: function(){
      jQuery(function(){
          alert( this.htmlClass );
      }.bind(this));
   });

【讨论】：