Javascript:当事件处理程序是对象的多个实例时，如何从事件处理程序中获得正确的对象实例

Javascript: How to get the right instance of an object from an event handler when their are multiple instances of the object

本文关键字：对象 程序 实例 事件处理 Javascript      更新时间：2023-09-26

我创建了一个对象，当我有一个对象实例时，它的工作效果很好。这不是实际的Object，但概念是一样的。

function foo(name){
    this.name = name;
}
foo.prototype.CreateElement = function(){
    var newElement = document.createElement("a");
    that = this;
    newElement.onclick = function(){
        that.SayName(this);
    };
    document.getElementsByName("body")[0].appendChild(newElement);
}
foo.prototype.SayName = function(LinkObj){
    alert(this.name);
    LinkObj.href = "http://google.com";
}

有人告诉我，通过将this的实例保存到一个变量（在本例中为that），我仍然可以获得对SayName方法的正确对象实例的引用。这将使this表示从onclick传入的元素的实例。这一切似乎只适用于一个实例，但当我创建对象的多个实例时，最后一个实例就是onclick事件中提供的实例。

我初始化了两个类似的对象

var ObjOne = new foo("Ted");
ObjOne.CreateElement();
var ObjTwo = new foo("Steve");
ObjTwo.CreateElement();

当onclick为ObjOne触发时，我得到了ObjTwo的对象实例，因此this.Name被设置为Steve。

有人知道当onclick事件从各种实例中触发时，我如何获得正确的对象实例吗？我想我需要将正确的实例与call绑定，但我真的不确定如何绑定。

提前感谢，希望这不会让人困惑。

问题是这一行：

that = this;

您在未使用var的情况下声明了that，这意味着它是全局，即您的所有实例都在更新相同的全局that变量。改为：

var that = this;

则that将是每个的本地。（也就是说，CreateElement函数的每个闭包都是本地的。）

演示：http://jsfiddle.net/SEsLJ/

此外，document.getElementsByName应该是document.getElementsByTagName（假设您实际上没有给body一个等于"body"的name属性）。

相关文章：