JavaScript:将对象的方法绑定到事件处理程序

Question

根据John Resig的"学习高级JavaScript"(http://ejohn.org/apps/learn/#83),将对象的方法绑定到事件处理程序而不将原始对象作为上下文传递是不正确的,但我发现该示例存在缺陷.它声称被点击的属性被意外设置.这是一个反例.

var Button = {
  click: function(){
    this.clicked = true;
    console.log( elem.clicked );
  }
};

var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click;
document.children[0].appendChild(elem);

console.log( !elem.clicked );

必须有另一个不这样做的理由.它是什么？

Answer 1

在任何对象方法中,this始终引用已调用方法的对象.所有this提供调用上下文的 JavaScript都是如此,而不是方法所有者 ^(*).

var sample = {
    foo: function () {
        this.clicked = true;
    }
}

sample.foo();         // 'this' refers to 'sample' 
alert(sample.clicked) // true

在事件处理程序中this引用触发事件的元素.这意味着当您将对象方法传递给click事件时...

var div = document.getElementById("test");
div.onclick = sample.foo;

然后foo()将在DOM元素上调用,即使它已在其他地方定义.

/* ... click the div ... */ 

alert(sample.clicked); // false
alert(div.clicked);    // true

这将导致意想不到的结果.

^(*)那是因为从技术上讲,JavaScript中没有方法所有者.方法是恰好由对象属性引用的独立函数.在不同的对象中存储对同一函数的引用(div.onclick = sample.foo就是这样)很容易实现.

因此,obj.method()是语法糖.

function func() { /* ... */ }
var obj = {
    method: func
};

obj.method();
func.call(obj);  // same thing