jquery事件中的Javascript“this”答案

【问题标题】：Javascript "this" in a jquery eventjquery事件中的Javascript“this”
【发布时间】：2015-08-18 02:23:45
【问题描述】：

如何在 Jquery 更改函数中正确调用 functionOne？ “this”不再引用该对象。

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(function(){
       if ( $(this).val() > 1) {
         this.functionOne(); // this is no longer calling function one 
       }
    }
  }
}

【问题讨论】：

错字？你有两个functionTwos
第一个functionTwo:之后也没有逗号？
this.functionOne() 在functionThree 范围内不存在； this 指的是输入元素内部的 jQuery 对象（事件处理程序）

标签： javascript jquery function this

【解决方案1】：

由于您有两个不同的值要使用，并且 jQuery 已经将其中一个放在 this 中，您可以将另一个值保存在更高范围的变量中：

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    // save value if this so it can be used later in this scope
    var self = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
         self.functionOne();
       }
    }
  }
}

或者，由于这是一个静态命名的NameSpace.object，您也可以直接引用该名称：

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(function(){
       if ( $(this).val() > 1) {
         NameSpace.object.functionOne();
       }
    }
  }
}

或者，由于 jQuery 提供了一种机制 .change( [eventData], handler ) 用于将数据传递给事件处理程序，您也可以使用它：

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(this, function(e){
       if ( $(this).val() > 1) {
         e.data.functionOne();
       }
    }
  }
}

这里我不喜欢 jQuery 机制，因为我认为调用 e.data.functionOne() 的代码不太明显（读者必须回顾代码才能弄清楚 e.data 是什么），但这只是我个人的看法对于这种情况。

【讨论】：

谢谢@jfriend00，这两种解决方案都有好处还是坏处？
我知道。我在发布问题时看到了他们。有趣的是，前两个答案都忽略了这些错误。
@MicFin - 如果你通常从这个结构之外调用NameSpace.object.functionOne()，那么我也会在这里坚持这个方案。否则，这真的是你的选择。
@guest271314 - 是的，假设有人打电话给functionThree() 开始工作。出于问题的目的，这显然是一个虚构的例子。我认为 OP 知道他们需要调用它。
是的，感谢您理解我的假设和错别字@jfriend00！

【解决方案2】：

尝试在functionThree 中设置NameSpace 的变量，调用NameSpace.object.functionThree() 在input 元素处设置change 事件

var NameSpace = {};
NameSpace.object = {
  functionOne: function(){
     // stuff
     alert("functionOne")
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    var ns = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
        ns.functionOne(); // this is no longer calling function one 
       }
    })
  }
}

NameSpace.object.functionThree()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" />

【讨论】：

【解决方案3】：

您也可以使用jQuery.change([eventData ],...) 的可选eventData 参数。

通过将this 传递给eventData，您可以通过事件变量从处理程序内部访问它。

$('input').change(this,function(e){
    ...
    e.data.functionOne(); 
    ...
}

var NameSpace = {};
NameSpace.object = {
  functionOne: function(){
     // stuff
     alert("functionOne")
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(this,function(e){
       if ( $(this).val() > 1) {
         e.data.functionOne();  
       }
    })
  }
}

NameSpace.object.functionThree()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" />

【讨论】：

不错的解决方案，聪明！

【解决方案4】：

一种方法是使用通常称为self 来保留对它的引用

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    var self = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
         self.functionOne(); // this is no longer calling function one 
       }
    }
  }
}

在正常情况下，您可以使用this bind 回调您的对象。但在这种情况下，我不知道它如何与 jquery 的 this 覆盖交互以引用触发回调的元素......

【讨论】：

您在两个 functionTwos 之间缺少一个逗号，哦，是的，您有两个 functionTwos ;)