我正在使用jQuery并尝试将一些基本的
Javascript OOP原则应用于一组控制悬停行为的函数.但是,我无法弄清楚如何让“this”关键字引用我正在创建的对象的实例.我的示例代码是：
var zoomin = new Object();
zoomin = function() {
// Constructor goes here
};
zoomin.prototype = {
hoverOn: function() {
this.hoverReset();
// More logic here using jQuery's $(this)...
},hoverReset: function() {
// Some logic here.
}
};
// Create new instance of zoomin and apply event handler to matching classes.
var my_zoomin = new zoomin();
$(".some_class").hover(my_zoomin.hoverOn,function() { return null; });
上面代码中有问题的行是在hoverOn()函数内调用“this.hoverReset()”.由于“this”现在指的是悬停在其上的元素,因此它不能按预期工作.我基本上想要为该对象的实例(my_zoomin)调用函数hoverReset().
有没有办法做到这一点？
谢谢！
解决方法
仅将函数分配给对象的属性不会将此函数与对象关联.这是你调用函数的方式.
通过电话
.hover(my_zoomin.hoverOn,...)
你只是传递了这个功能.它不会“记住”它属于哪个对象.你可以做的是传递一个匿名函数并在里面调用hoverOn：
.hover(function(){ my_zoomin.hoverOn(); },...)
这将使内部hoverOn引用my_zoomin.因此对this.hoverReset()的调用将起作用.但是,在hoverOn中,您将不会引用选择器创建的jQuery对象.
一种解决方案是将所选元素作为参数传递：
var zoomin = function() {
// Constructor goes here
};
zoomin.prototype = {
hoverOn: function($ele) {
this.hoverReset($ele);
// More logic here using jQuery's $ele...
},hoverReset: function($ele) {
// Some logic here.
}
};
var my_zoomin = new zoomin();
$(".some_class").hover(function() {
my_zoomin.hoverOn($(this)); // pass $(this) to the method
},function() {
return null;
});
下一步,您可以考虑制作jQuery plugin.
