使用jQuery应用面向对象编程(OOP)

Question

我正在使用jQuery，并尝试将一些基本的Javascript面向对象编程原则应用于控制悬停行为的一组函数。然而，我无法弄清如何让"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()。

有没有任何方法可以做到这一点？

- Ralph

Answer 1

只是将函数分配给对象的属性，并不会使函数内部的this与对象相关联。这取决于如何调用函数。

通过调用

.hover(my_zoomin.hoverOn,...)

您只是传递了函数。它不会“记得”它属于哪个对象。您可以做的是传递一个匿名函数并在其中调用hoverOn：

.hover(function(){ my_zoomin.hoverOn(); },...)

这将使得在hoverOn内的this指向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插件。

- Felix Kling

---

感谢您的出色回答。它真正为我澄清了事情 :-) 我一定会考虑将其制作成插件。 - Ralph

Answer 2

1. 你可以将事件处理程序“绑定”到对象上（例如查看Mootools绑定代码）。
2. 你可以将对象作为参数传递给匿名函数，并在事件处理程序中使用它，而不是使用this。

至于第一点，你需要将bind方法添加到function中。

bind: function(bind){
        var self = this,
            args = (arguments.length > 1) ? Array.slice(arguments, 1) : null;

        return function(){
            if (!args && !arguments.length) return self.call(bind);
            if (args && arguments.length) return self.apply(bind, args.concat(Array.from(arguments)));
            return self.apply(bind, args || arguments);
        };
    }

不过我不确定它与JQ的东西交互得有多好。

- Itay Moav -Malimovka

Answer 3

请查看我的回答： "this" 在哪里？ 为什么 "this" 不是 this？ 这种混淆经常发生。当您将函数作为回调传递时，它会作为独立函数调用，因此其 "this" 变成全局对象。

"bind" 是 ECMAScript 5 的本地部分，是函数原型的一部分。如果您转到我的第二个回答的末尾，您会得到一个链接，链接到 Mozilla 网站上提供的 "兼容性" 版本的 bind 函数。使用 myfunction.bind(myobject)，它将使用本机函数（如果可用）或 JS 函数（如果不可用）。

- Breton