请大家帮忙看看：如何在事件处理函数中重定向"this"? - JavaScript论坛

问题点数：0 回复次数：28

请大家帮忙看看：如何在事件处理函数中重定向"this"?

我定义了一个对象，它会自动生成两个DIV，并把它们插入到<body></body>中，但我希望这两个DIV在对象中是private的。我想给其中一个DIV添加一个CLICK事件，当它被CLICK时，会改变另一个DIV的背景色。由于这两个DIV在对象中是private的，所以我专门写了一个函数来做这件事。整个代码如下：

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. xml:lang="en" lang="en">
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            function MyClass(){
                this._oDiv1 = document.createElement("div");
                this._oDiv1.style.cssText = "width:200px; height:150px; background-color:#0c0";
                document.body.appendChild(this._oDiv1);
               
                this._oDiv2 = document.createElement("div");
                this._oDiv2.style.cssText = "width:150px; height:30px; background-color:#f55; color:black; margin-top:10px; text-align: center";
                this._oDiv2.innerHTML = "Change to blue";
                document.body.appendChild(this._oDiv2);
            }
            MyClass.prototype.addClick = function(){
                this._oDiv2.onclick = function(){
                    this._oDiv1.style.backgroundColor = "#00c";    //problem happens here
                    return false;
                };
                //alert(this._oDiv2.onclick.toString());
            };
           
            function start(){
                var o = new MyClass();
                o.addClick();
            }
        </script>
    </head>
    <body onload="start();">
    </body>
</html>

其中MyClass.prototype.addClick便是用来给this._oDiv2添加click事件的，但是这段代码不起作用，原因出在this._oDiv1.style.backgroundColor = "#00c";这一句：这里的this本应指向对象的当前实例，但在这里却指向了产生CLICK事件的那个元素（即_oDiv2），结果导致错误。我不知道该如何让这里的this正确的指向当前对象实例？请大家指点一下。先谢谢了。

搜索更多相关主题的帖子: 函数　

第 2 楼

得分:0

刚才去国外的网站搜索了一下（英文不太好，换了好几回搜索词

），找到了一个解决办法，供大家参考。

解决办法就是用闭包：
MyClass.prototype.addClick = function(){
    var that = this;
    this._oDiv2.onclick = function(){
         that._oDiv1.style.backgroundColor = "#00c";
         return false;
    };
};

谢谢大家。

第 3 楼

得分:0

那也不是private的呀！

世事如潮我如水，只叹江湖几人回。

第 4 楼

得分:0

顺便出个小题目

程序代码：

name = 'window';
var Fun = function() {
this.name = 'Fun';

this.show = function() {
return function() {
alert(this.name);
}
}
};

var Test = function() {
this.name = 'Test';
this.msg = new Fun().show();
};

new Test().msg();

猜弹出啥为什么

第 5 楼

得分:0

回复 3楼 hugeannex

你是指_oDiv1和_oDiv2吗？

其实本质上，javascript的object没有private成员，我们只是在逻辑上把它们当成private来看，这就是为什么我要定义一个function来绑定事件处理，而不是让用户直接用
o._oDiv1.onclick = "...";
来绑定事件处理——因为这样就暴露了_oDiv1。

谢谢。

第 6 楼

得分:0

以下是引用foktime在2010-12-14 09:46:03的发言：

顺便出个小题目
var name = 'window';
var Fun = function() {
this.name = 'Fun';

this.show = function() {
return function() {
alert(this.name);
}
}
};

var Test = function() {
this.name = 'Test';
this.msg = new Fun().show();
};

new Test().msg();猜弹出啥为什么

版主这道题出得好呀！我自己试了一下，虽然和一开始想的结果不一样（呵呵，这是婉转的说法，其实就是答错了

），但我的思路是正确的。

我一开始想的是“window”，因为我知道return function(){alert(this.name);}是把alert(...)返回到上一级执行，所以其作用域是上一级，但我一开始忽视了Test这一级（马虎了），不知怎的就把上一级想成了global，所以想结果是“window”。

其实，这道题的本质就是：
var Test = function(){
this.name = 'Test';
this.msg = function(){alert(this.name);}
}
结果当然是“Test”。

Javascript的this指代有时候是有点绕人，而且经常惹祸，不像C#里的this一向规规矩矩老实巴交，以后得多留意。

呵呵，不知我的回答版主是否满意，还请多多指教。