事件处理函数中的this

[color=red]这个问题我遇到过，但是我不是很明白下面的讲述-----ajax in action4.3.1[/color]

我们已经得到了一个DOM元素的句柄，分配了一个回调函数给onclick属性。当DOM元素收到鼠标点击事件时，回调即被调用。然而，函数上下文（即变量this所确定的值——参见附录B，可获得关于JavaScript Function对象的完整讨论）赋值为收到事件的DOM节点。根据函数最初是在什么地方声明以及如何声明的，情况会有所不同，这可能会把人搞糊涂。

让我们通过一个例子来研究这个问题。我们定义了一个表示按钮对象的类，它有一个到DOM节点的引用、一个回调处理函数，以及当点击按钮时显示出的一个值。当鼠标点击事件发生时，按钮的任何实例都将以同样的方式响应，因此我们定义回调处理函数作为按钮类的一个方法。这些说明对于初学者已经足够了，下面让我们看看代码。这里是按钮类的构造函数。

function Button(value,domEl){

this.domEl=domEl;

this.value=value;

this.domEl.οnclick=this.clickHandler;

}

继续定义一个事件处理函数作为Button类的一部分。

Button.prototype.clickHandler=function(){

alert(this.value);

}

这段代码看起来很直观，但是它并没有做我们希望它做的事情。警告框通常会返回消息unde- fined，而不是传递到构造函数的value属性。为什么呢？当点击DOM元素时，函数click- Handler由浏览器调用，它设置函数上下文到DOM元素，而不是Button的JavaScript对象。于是，this.value指向DOM元素的value属性，而不是Button对象的value属性。你永远也不可能通过查看事件处理函数的声明来发现这个情况，是不是？

我们可以通过向DOM元素传递Button对象的引用来解决这个问题，也就是，按下面的方法修改构造函数：

function Button(value,domEl){

this.domEl=domEl;

this.value=value;

this.domEl.buttonObj=this;

this.domEl.οnclick=this.clickHandler;

}

DOM元素仍然没有value属性，但是它有一个到Button对象的引用，可以从那里得到value。通过对事件处理函数做如下修改，我们的工作就完成了：

Button.prototype.clickHandler=function(){

var buttonObj=this.buttonObj;

var value=(buttonObj && buttonObj.value) ?

buttonObj.value : "unknown value";

alert(value);

}

DOM节点引用Button对象，Button对象引用它的value属性，这样事件处理函数就做了我们希望它做的事情。我们可以直接给DOM节点附加value，不过附加一个指向整个后端对象的引用可以使这种模式容易地用于任意复杂的对象，顺便说一句，我们在这里已经实现了一个小的MVC模式，其中DOM元素作为后端对象模型的前端视图。