Javascript "this" 在 jquery 事件中
Javascript "this" in a jquery event
如何在 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
}
}
}
}
一种方法是保留对它的引用,通常称为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
}
}
}
}
在正常情况下,您可以 bind
使用 this
回调您的对象。但在这种情况下,我不知道它如何与 jquery 覆盖 this
交互以引用触发回调的元素...
由于您有两个不同的值要使用,并且 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()
的代码不太明显( reader 必须回顾代码才能弄清楚是什么e.data
是),但这只是我个人对这种情况的看法。
尝试在 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" />
您还可以使用 jQuery.change([eventData ],...)
的可选 eventData
参数。
通过将 this
传递给 eventData
,您可以通过事件变量从处理程序内部访问它。
$('input').change(<b>this</b>,function(<b>e</b>){
...
<b>e.data</b>.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" />
如何在 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
}
}
}
}
一种方法是保留对它的引用,通常称为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
}
}
}
}
在正常情况下,您可以 bind
使用 this
回调您的对象。但在这种情况下,我不知道它如何与 jquery 覆盖 this
交互以引用触发回调的元素...
由于您有两个不同的值要使用,并且 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()
的代码不太明显( reader 必须回顾代码才能弄清楚是什么e.data
是),但这只是我个人对这种情况的看法。
尝试在 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" />
您还可以使用 jQuery.change([eventData ],...)
的可选 eventData
参数。
通过将 this
传递给 eventData
,您可以通过事件变量从处理程序内部访问它。
$('input').change(<b>this</b>,function(<b>e</b>){
...
<b>e.data</b>.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" />