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

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

请大家帮忙看看：如何在事件处理函数中重定向"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

回复 3楼 hugeannex

你是指_oDiv1和_oDiv2吗？

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

谢谢。

第 4 楼

得分: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一向规规矩矩老实巴交，以后得多留意。

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

第 5 楼

得分:0

回复 4楼 foktime

刚才想去投版主一票，顺便挣50分，结果因为是新人，被剥夺了民主权力

。唉，啥时论坛里能实现普选呀？

第 6 楼

得分:0

以下是引用foktime在2010-12-14 15:31:25的发言：

function MyClass(){
    var temp = "";
    function test(){
        //code
    }
}temp不叫MyClass的私有属性叫什么；test不叫MyClass的私有方法又叫什么

作为C#出身的javascript菜鸡（鸡也是“鸟”），每当提到private和public，你猜我脑子里首先浮现出的是谁？

肯定不是“董存瑞”，而是传达室的张大爷，呵呵...——为什么？因为private和public主要是定义类成员的可访问性，public成员向所有类用户公开，就像单位的对外接待部门，而private成员只供类内部的其它成员访问，比如领导的秘书。所以，当我说"私有"属性时，主要是指其可“访问性”这层意思。

第 7 楼

得分:0

以下是引用foktime在2010-12-14 15:47:40的发言：

那你就声援一下吧

咱们版选版主不存在竞争，有人选就会中，因为人不多呵呵

有没有选举权要看在版里的活跃度，其实多发几个帖子你就有选举权了，只是为了防止马甲作弊

嗯，我明白了，不是剥夺我的民主权力，而是拿我当“未成年”儿童了。

第 8 楼

得分:0

以下是引用foktime在2010-12-14 16:02:38的发言：

例子里的私有属性和方法在外部也是访问不到的再说下去就有些较真了呵呵
语言之间的差异我们不好拿C#的private去理解js的。

版主指的那个，叫“成员”，Javascript类的所有成员都是可访问的；版主所说的“访问不到”，其实不是访问不到，而是没有清楚地告诉javascript解释器要访问哪个对象里的成员——所以，概念还是应该树立清楚。其实，javascript里也有“私有”概念，就是变量开始的“_”，虽然这概念是存在于程序员头脑中。

第 9 楼

得分:0

以下是引用foktime在2010-12-14 16:05:54的发言：

有时间你也可以多去C#版去帮人解决解决问题自己也会有提高那个版也够冷的发个问题经常一天没人理

我是看了网上的推荐才来这里的，觉得这里应该人气旺一些。