Javascript 对原型(prototype)的新效果

Question

我正在尝试将 javascript 对象绑定(bind)到事件监听器，这就是我的做法:(这是一个简化的示例，但它使用了我感兴趣的模式)

function foo(x){
    this.x = x;
}

foo.prototype = {
    'bar': function(){
       // do something with this.x
    },
    'events': function(){
        $(document).on('custom_event', function(event, x){
            var G = new foo(x);
            G.bar();
        });
    }
};

(function(){
    var G = new foo();
    G.events();
})();

因此，在运行自调用匿名函数之后，每次触发 custom_event 时，我的 foo 对象的 bar 方法都会被调用。

问题:

当从 foo 对象的事件处理程序中调用 new foo(x) 时，是否会导致事件监听器重复？

据我了解，属于对象的 prototype 方法仅创建一次，调用 new foo() 只会产生效果，在我的例子中，this .x。如果我是正确的，我很困惑为什么需要在 foo 的 events 方法的事件监听器中使用 new 才能使用附加到 foo 的原型(prototype)方法。

我错过了什么？

Answer 1

看来您主要对 new 的用法和效果感到困惑运算符(operator)。我引用You Don't Know JS, this & object prototypes :

When a function is invoked with new in front of it, otherwise known as a constructor call, the following things are done automatically:

1. a brand new object is created (aka, constructed) out of thin air
2. the newly constructed object is [[Prototype]]-linked
3. the newly constructed object is set as the this binding for that function call
4. unless the function returns its own alternate object, the new-invoked function call will automatically return the newly constructed object.

确保您充分理解这一点。关于您的问题:

When new foo(x) is called from within the event handler of my foo object, does it cause a duplication of the event listener?

没有。你用new foo(x)做什么是使用foo函数作为构造函数，因此您只需创建一个新的、原型(prototype)链接的对象(类似于 {} )，然后执行 foo 中的代码，该新对象为 this 。因此，这将导致一个几乎空的对象，除了它的属性 x 。您只需在 events 内设置事件监听器功能!

It is my understanding that prototype methods belonging to an object are only created once and that calling new foo() only effects, in my case, this.x. If I am correct, I'm confused why it's necessary to use new from within the event listener in foo's events method in order to use the prototype methods attached to foo.

它们在您称为“原型(prototype)”的对象上定义一次(实际上只是函数 prototype 上的 foo 属性)，是的。并且没有必要使用new在这里，您所做的就是创建一个一次性的 foo已存在的函数内的对象 foo对象。

您可能想要做的不是担心设置 this.x在构造函数内部，但在事件处理程序内部，在调用 bar() 之前:

something.on('custom_event', function(e, x) {
  this.x = x;
  this.bar();
});

您在这里遇到的问题是this在事件处理程序的上下文中很可能会被 jQuery 设置/覆盖，而不是指向您想要指向的“foo 对象”。要避免此问题，您需要词法捕获 this在设置事件处理程序时(即 events 函数):

events: function(){
    var self = this;
    $(document).on('custom_event', function(event, x){
        self.x = x;
        self.bar();
    });
}

或bind this在回调处理程序内到您要引用的“foo对象”:

events: function(){
    $(document).on('custom_event', (function(event, x){
        this.x = x;
        this.bar();
    }).bind(this));
}

参见Function.prototype.bind在 MDN 上了解其作用的一些解释。

<小时/>

进一步说明:我不确定您的自定义事件到底是什么，但您正在收听整个 $(document)在每个事件处理程序中。如果您有对应于每个 foo 的 DOM 元素对象，您应该在这些特定的 DOM 元素上设置这些事件处理程序。