Javascript对原型的新影响

我正在尝试将javascript对象绑定到事件侦听器，我将这样做： （这是一个简化的示例，但它使用了我感兴趣的模式）

因此，在运行自调用匿名函数后，每次触发

custom_事件

时，都会调用my foo对象的bar方法

问题:

当从我的foo对象的事件处理程序中调用

newfoo（x）

时，是否会导致事件侦听器的重复

我的理解是，属于对象的

prototype

方法只创建一次，在我的例子中，调用

newfoo（）

只会影响

this.x

。如果我是正确的，我很困惑为什么必须在

foo

的

events

方法中的事件侦听器中使用

new

，以便使用附加到

foo

的原型方法

---

我遗漏了什么？

您似乎主要对新的

操作符的用法和效果感到困惑。我引述：

当函数前面有
new
调用时，或者称为构造函数调用，会自动执行以下操作：

一个全新的物体是由稀薄的空气创造出来的
新构造的对象是链接的
新构造的对象被设置为该函数调用的
this
绑定
除非函数返回自己的备用对象，否则调用的
新
函数调用将自动返回新构造的对象
确保你能很好地理解这一点。关于你的问题：

当从我的foo对象的事件处理程序中调用
newfoo（x）
时，是否会导致事件侦听器的重复

不可以。您使用
new foo（x）
所做的是将
foo
函数用作构造函数，因此您只需创建一个新的、原型链接的对象（类似于
{}
），然后在
foo
中执行代码，新对象为
this
。因此，这将导致一个几乎为空的对象，除了它的属性
x
。您只需在
events
函数中设置事件侦听器

我的理解是，属于对象的
prototype
方法只创建一次，在我的例子中，调用
newfoo（）
只会影响
this.x
。如果我是正确的，我很困惑为什么必须在
foo
的
events
方法中的事件侦听器中使用
new
，以便使用附加到
foo
的原型方法

它们只在您称为“原型”的对象上定义过一次（这实际上只是函数
foo
上的
prototype
属性），是的。这里不需要使用
new
，您所做的就是在已经存在的
foo
对象的函数中创建一个一次性
foo
对象

在调用
bar（）
之前，您可能不需要担心在构造函数中设置
this.x
，而是在事件处理程序中：

这里您将遇到的问题是，事件处理程序上下文中的
this
很可能由jQuery设置/覆盖，而不是指向要指向的“
foo
对象”。要避免此问题，您需要在设置事件处理程序（即
events
函数）时从词汇上捕获
this
：

或者
bind
将回调处理程序中的
this
绑定到要引用的“
foo
对象”：

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

请参阅MDN上的部分，以了解其作用


进一步注意：我不确定自定义事件到底是什么，但您正在监听每个事件处理程序中的整个
$（文档）
。如果您有对应于每个
foo
对象的DOM元素，则应该在这些特定DOM元素上设置这些事件处理程序。
FYI：可能只是复制和粘贴错误，但您的
事件
缺少
}
。只有在调用
.events（）
时，才会绑定您的
自定义\u事件。由于该事件已绑定到
文档
，因此每次调用
.events（）？您不需要执行
varg=newfoo（x）。这取决于你想做什么。您无法访问其中的
this
，因此您可能需要执行
var that=this$（document）.on（“…”，function（）{that.bar（）；}）这一切都取决于你试图做什么。@Rocket Hazmat-In
events
如果我使用
foo（x）.bar（）
而不是
new foo（x）.bar（）
我得到
无法读取未定义的属性“bar”。嗯，是的
newfoo（x）
创建一个新的
foo
对象（从而继承
prototype
）
foo（x）
只调用函数，对于构造函数来说，函数不会执行您想要的操作。
something.on('custom_event', function(e, x) {
  this.x = x;
  this.bar();
});

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

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