闭包，代码已经实现，原理还是很模糊，请老大指点迷津。

擒兽 2007-10-26 04:48:30

已经一通宵加一下午了，对闭包还是很模糊。



已经一通宵加一下午了，对闭包还是很模糊。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>闭包，我快吐血了，还没搞明白原理</title>

    <script type="text/javascript"> 

        

        //class Say

        function Say(text){

            

            this._text = text;

            

            this._doSay = function(){

                

                //引用HTML对象

                var divObj = window.document.getElementById("SayHello");

                

                //对象内写入HTML

                divObj.innerHTML = this._text;//这里的this指针没变，任然是类对象（按理应该也是换了对象才对，疑问？）。

                

                //divObj.onclick = function(){alert(this.id);}//错误：函数体内的this指针指向的是divObj对象 已经不是 类对象（那么this._text已经丢失，找不到了。）

                

                //绑定事件

                divObj.onclick = this._createDoSay();//调用闭包返回一个函数

            }

            

            //闭包，引用类对象，通过 事件模型 创建事件函数 返回给调用者。

            this._createDoSay = function() {

                var obj = this;//闭包引用指针，用该引用指针调用事件模型 而事件模型可以继续保持 this 关键字

                return function(){

                    obj._doSayModel();//（这里是不是用原模型创建了一个新对象，疑问？）

                }

            }

            

            //onclick事件模型

            this._doSayModel = function() {

                alert(this._text);

            }

        }

        //class Say - over

        

        //WEB main ^_^ WEB版的main方法。

        window.onload = function(){

            new Say("Hello World!!!!")._doSay();

        }

    </script>

</head>



<body>



<div id="SayHello"></div>



</body>

</html>

=====
上面附带一些注释，老大们看看我是不是理解错误。

...全文

219 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

擒兽 2007-10-27

打赏
举报

其实就是将模拟类的一个方法通过闭包拷贝给事件。

上面代码的思路：绑定事件时通过闭包返回一个函数而这个返回的函数实际是模拟类的函数（上面的代码，用面向对象理解就是类对象的方法，如果用JavaScript理解就是嵌套的上级函数的一个子函数指针。）

终于大彻大悟这种做法是为了避免JavaScript中途文档对象抢占this关键字，而this关键字在模拟类内一直表达为类对象，编码上就更加像C#或Java了，不会对象错乱。

散分咯 ^_^

擒兽 2007-10-27

打赏
举报

睡一觉，我终于清晰了，HOHO

No_Data_Found 2007-10-26

打赏
举报

关注

cloudgamer 2007-10-26

打赏
举报

感觉lz只是被this的用法弄糊涂了
跟闭包有什么关系？

hbhbhbhbhb1021 2007-10-26

打赏
举报

不好意思，我浏览器有点问题，重帖



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>闭包，我快吐血了，还没搞明白原理</title>

    <script type="text/javascript"> 

        

        //class Say

        function Say(text){

            

            this._text = text;

            

            this._doSay = function(){

                

                //引用HTML对象

                var divObj = window.document.getElementById("SayHello");

                

                //对象内写入HTML

                divObj.innerHTML = this._text;//这里的this指针没变，任然是类对象（按理应该也是换了对象才对，疑问？）。

                

                //divObj.onclick = function(){alert(this.id);}//错误：函数体内的this指针指向的是divObj对象 已经不是 类对象（那么this._text已经丢失，找不到了。）

                

                //绑定事件

                divObj.onclick = function(i){return function(){i._doSayModel();}}(this)//调用闭包返回一个函数

            }

            

            //onclick事件模型

            this._doSayModel = function() {

                alert(this._text);

            }

        }

        //class Say - over

        

        //WEB main ^_^ WEB版的main方法。

        window.onload = function(){

            new Say("Hello World!!!!")._doSay();

        }

    </script>

</head>



<body>



<div id="SayHello">asdasd</div>



</body>

</html>

擒兽 2007-10-26

打赏
举报

先去昏倒一会，明天再看了。

muxrwc 2007-10-26

打赏
举报

（这里是不是用原模型创建了一个新对象，疑问？）

不懂你说什么。。

this._createDoSay = function() {
var wc = this; //这里只不过是把this对象的引用给wc 这个变量copy了一份。。
return function(){
wc._doSayModel(); //这里只是通过那个引用来执行那个对象的这个方法。。。
}
}

这里执行完毕后，这个函数的资源应该不会释放吧。。。
貌似直到divObj.onclick = null的时候才会释放。。。

prototype里有个bind方法，和这个很类似的说。。。

he_8134 2007-10-26

打赏
举报

应该是：楼主代码可以运行，1楼的不行~~~

he_8134 2007-10-26

打赏
举报

1楼代码可以运行，2楼的不行~~~

mingxuan3000 2007-10-26

打赏
举报

一通宵加一下午 ?强
去51js看看月影的文章

hbhbhbhbhb1021 2007-10-26

打赏
举报

找到地址了，：）感觉最主要就是this指向和变量的作用域
http://www.never-online.net/blog/article.asp?id=106

hbhbhbhbhb1021 2007-10-26

打赏
举报

this._createDoSay = function() {
var obj = this;//闭包引用指针，用该引用指针调用事件模型而事件模型可以继续保持 this 关键字
return function(){
obj._doSayModel();//（这里是不是用原模型创建了一个新对象，疑问？）
}
}
这部分也可以不用定义个变量obj=this，注释还是你的注释，没改，这个问题想清楚是有些麻烦的，我记得好象BlueDestiny兄弟以前写了一个BLOG，看看那个会有些帮助



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>闭包，我快吐血了，还没搞明白原理</title>

    <script type="text/javascript"> 

        

        //class Say

        function Say(text){

            

            this._text = text;

            

            this._doSay = function(){

                

                //引用HTML对象

                var divObj = window.document.getElementById("SayHello");

                

                //对象内写入HTML

                divObj.innerHTML = this._text;//这里的this指针没变，任然是类对象（按理应该也是换了对象才对，疑问？）。

                

                //divObj.onclick = function(){alert(this.id);}//错误：函数体内的this指针指向的是divObj对象 已经不是 类对象（那么this._text已经丢失，找不到了。）

                

                //绑定事件

                divObj.onclick = this._createDoSay();//调用闭包返回一个函数

            }

            

            //闭包，引用类对象，通过 事件模型 创建事件函数 返回给调用者。

            this._createDoSay = function() {

                //var obj = this;//闭包引用指针，用该引用指针调用事件模型 而事件模型可以继续保持 this 关键字

                function(obj){

	                return function(){

	                    obj._doSayModel();//（这里是不是用原模型创建了一个新对象，疑问？）

	                }

              	}(this);

            }

            

            //onclick事件模型

            this._doSayModel = function() {

                alert(this._text);

            }

        }

        //class Say - over

        

        //WEB main ^_^ WEB版的main方法。

        window.onload = function(){

            new Say("Hello World!!!!")._doSay();

        }

    </script>

</head>



<body>



<div id="SayHello">asdasd</div>



</body>

</html>