Javascript 对象文字jquery事件作用域
解决此范围界定问题的最佳方法是什么Javascript 对象文字jquery事件作用域,javascript,jquery,Javascript,Jquery,解决此范围界定问题的最佳方法是什么 NAMESPACE.myObject = { foo: 'foo', init: function() { $('.myBtn').on('click', this.myMethod); }, myMethod: function() { console.log($(this), foo); } }; NAMESPACE.myObject.init(); console.log的结果应该是单击的jQuery对象和myObj
NAMESPACE.myObject = {
foo: 'foo',
init: function() {
$('.myBtn').on('click', this.myMethod);
},
myMethod: function() {
console.log($(this), foo);
}
};
NAMESPACE.myObject.init();
console.log的结果应该是单击的jQuery对象和myObject的属性foo。我该如何实现这一点呢？基本上，你不能有一个以上的
这个THISthismyMethodmyObjectNAMESPACE.myObject = {
this.foo: 'foo',
init: function() {
var THIS = this;
$('.myBtn').on('click', function(){
// "this" here is the button clicked
// "THIS" is still the myObject instance
THIS.myMethod(this);
});
},
myMethod: function(element) {
// "this" here is myObject
// The clicked element was passed as parameter "element" instead
console.log($(element), this.foo);
}
};
NAMESPACE.myObject.init();
正如jfriend00所指出的，您也可以使用
bind这个作用域的函数调用（非常可爱），但这在IE8或更早版本上不起作用。基本上，您不能有多个这个，因此需要解决它
作为一般规则，创建一个作用域变量（THIS
，在下面的示例中）来保存要从任何其他作用域中保留/访问的作用域
但是，在调用myMethod时，您需要在click处理程序中保留this
，这样您就不能只传递myMethod
，因为它会丢失myObject
实例
NAMESPACE.myObject = {
this.foo: 'foo',
init: function() {
var THIS = this;
$('.myBtn').on('click', function(){
// "this" here is the button clicked
// "THIS" is still the myObject instance
THIS.myMethod(this);
});
},
myMethod: function(element) {
// "this" here is myObject
// The clicked element was passed as parameter "element" instead
console.log($(element), this.foo);
}
};
NAMESPACE.myObject.init();
我希望我解释得足够清楚：）
正如jfriend00所指出的，您也可以使用bind
动态地创建一个带有这个作用域的函数调用（非常可爱），但这在IE8或更早版本上不起作用。您可以像这样使用.bind（）
：
NAMESPACE.myObject = {
foo: 'foo',
init: function() {
$('.myBtn').on('click', this.myMethod.bind(this));
},
myMethod: function() {
console.log($(this), foo);
}
};
NAMESPACE.myObject.init();
或者，对于旧版本的IE，因为您已经有了jQuery，所以可以使用jQuery的$.proxy（）
：
当您将this.myMethod
传递给事件侦听器时，它将丢失与this
的绑定（正如您所注意到的），因为事件侦听器没有保存该引用或调用该方法。保持该绑定的一种方法是使用（对于早期版本的IE，需要IE9或polyfill）。您可以像这样使用.bind（）
：
NAMESPACE.myObject = {
foo: 'foo',
init: function() {
$('.myBtn').on('click', this.myMethod.bind(this));
},
myMethod: function() {
console.log($(this), foo);
}
};
NAMESPACE.myObject.init();
或者，对于旧版本的IE，因为您已经有了jQuery，所以可以使用jQuery的$.proxy（）
：
当您将this.myMethod
传递给事件侦听器时，它将丢失与this
的绑定（正如您所注意到的），因为事件侦听器没有保存该引用或调用该方法。保持这种绑定的一种方法是使用（对于早期版本的IE，需要IE9或polyfill）。既然我看到您标记了jQuery，您也可以使用这种方法，我知道这与您在问题中发布的方法不同，但我仍然可以选择
因为我看到您标记了jQuery，所以您也可以使用这种方法，我知道这与您在问题中发布的方法不同，但我仍然可以选择
那很酷。不知道你可以这样做：）将不得不进一步调查绑定。。。调查：不支持IE 8及以上版本。。这就是为什么他们从不在这里使用它：）@TrueBlueAussie$。proxy做同样的事情，并且在IE8@TrueBlueAussie-如果您已经有了jQuery（显然是这样），那么可以使用$.proxy（）
，或者可以添加polyfill，使其在所有浏览器版本中都能工作。有关$.proxy
的信息已添加到我的答案中。使用此解决方案，您不知道右键单击了哪个元素？@user1081577-事件
对象仍会传递到回调，因此您仍然可以查看事件.target
以查看是哪个对象生成了事件。您可能希望将其声明为myMethod
的第一个参数，或者您可以将其作为参数[0]
访问。这很酷。不知道你可以这样做：）将不得不进一步调查绑定。。。调查：不支持IE 8及以上版本。。这就是为什么他们从不在这里使用它：）@TrueBlueAussie$。proxy做同样的事情，并且在IE8@TrueBlueAussie-如果您已经有了jQuery（显然是这样），那么可以使用$.proxy（）
，或者可以添加polyfill，使其在所有浏览器版本中都能工作。有关$.proxy
的信息已添加到我的答案中。使用此解决方案，您不知道右键单击了哪个元素？@user1081577-事件
对象仍会传递到回调，因此您仍然可以查看事件.target
以查看是哪个对象生成了事件。您可能希望将其声明为myMethod
的第一个参数，或者您可以将其作为参数[0]
访问。这是切换到jQuery实际上增加了代码量的少数情况之一：）某种程度上违反了“以少胜多”的原则jQuery:）的方法确实有效。这样，您的代码就更结构化了。唯一的jquery位是ready函数和$.extend，这有助于名称空间，加上“use strict”，而且它不是对象文字，因此您可以创建任意多个myObject实例……这是一个很酷的替代解决方案。但是它的代码要多得多，而文字对象对于我所面临的问题是有好处的。这是切换到jQuery实际上增加了代码量的少数情况之一：）有点挫败了jQuery的“以少胜多”方法：）但确实有效。这样，您的代码就更结构化了。唯一的jquery位是ready函数和$.extend，这有助于名称空间，加上“use strict”，而且它不是对象文字，因此您可以创建任意多个myObject实例……这是一个很酷的替代解决方案。但是它有更多的代码和一个文字对象对于我面临的问题来说是很好的。最好的答案，很好的支持，还保留了对被点击元素的引用。感谢最好的回答、良好的支持，并保留对已单击元素的引用。谢谢