JS闭包研究、自造困扰与解答

<!DOCTYPE html>

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

<head>

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

    <script>

        //------------------------------------------------------------------

        var intCount = 0;

        function Add() {

            return intCount++;

        }

        //------------------------------------------------------------------

        var AddPkgErr = function () {

            var intCount = 0;

            //var intCountErr = 0;

            AddPkgErr.prototype.Add = function () {

                //return intCount++;

                return intCount++;

                //return intCountErr++;

            }

        }

        //------------------------------------------------------------------

        var AddPkgOK = function () {

            //定義包的變量

            AddPkgOK.prototype.intCount = 0;

            //AddPkgOK.prototype.intCountOK = 0;

            //定義包的方法

            AddPkgOK.prototype.Add = function () {

                return AddPkgOK.prototype.intCount++;

                //return AddPkgOK.prototype.intCountOK++;

            }

        }

        var AddPkg3 = function () {

            //定義包的變量

            this.intCount = 0;

            //定義包的方法

            this.Add = function () {

                return this.intCount++;

            }

        }

        //====================================================================

        function test1()

        {

            WriteLog("=====================================");

            WriteLog("非閉包，每次累加：" + Add());

        }

        function test21() {

            WriteLog("=====================================");

            var objAddPkg = new AddPkgErr();

            WriteLog("閉包單組21，每次都是新的：" + objAddPkg.Add());

        }

        function test22() {

            WriteLog("=====================================");

            var objAddPkg = new AddPkgOK();

            WriteLog("閉包單組22，每次都是新的：" + objAddPkg.Add());

        }

        function test3() {

            WriteLog("=====================================");

            WriteLog("閉包多組，每組都是新的並且組與組之間互不影響(錯誤結果)");

            var objAddPkg1 = new AddPkgErr();

            WriteLog("第一組，第一次：" + objAddPkg1.Add());

            WriteLog("第一組，第二次：" + objAddPkg1.Add());

            WriteLog("第一組，第三次：" + objAddPkg1.Add());

            WriteLog("=====================================");

            var objAddPkg2 = new AddPkgErr();

            WriteLog("第二組，第一次：" + objAddPkg2.Add());

            WriteLog("第二組，第二次：" + objAddPkg2.Add());

            WriteLog("第二組，第三次：" + objAddPkg2.Add());

            WriteLog("=====================================");

            WriteLog("第一組，第四次：" + objAddPkg1.Add());

            WriteLog("第二組，第四次：" + objAddPkg2.Add());

        }

        function test4() {

            WriteLog("=====================================");

            WriteLog("閉包多組，每組都是新的並且組與組之間互不影響(預期結果)");

            var objAddPkg1 = new AddPkgOK();

            WriteLog("第一組，第一次：" + objAddPkg1.Add());

            WriteLog("第一組，第二次：" + objAddPkg1.Add());

            WriteLog("=====================================");

            var objAddPkg2 = new AddPkgOK();

            WriteLog("第二組，第一次：" + objAddPkg2.Add());

            WriteLog("第二組，第二次：" + objAddPkg2.Add());

            WriteLog("=====================================");

            WriteLog("第一組，第三次：" + objAddPkg1.Add());

            WriteLog("第二組，第三次：" + objAddPkg2.Add());

        }

        function test5() {

            WriteLog("=====================================");

            WriteLog("閉包多組，每組都是新的並且組與組之間互不影響(預期結果)");

            var objAddPkg1 = new AddPkg3();

            WriteLog("第一組，第一次：" + objAddPkg1.Add());

            WriteLog("第一組，第二次：" + objAddPkg1.Add());

            WriteLog("=====================================");

            var objAddPkg2 = new AddPkg3();

            WriteLog("第二組，第一次：" + objAddPkg2.Add());

            WriteLog("第二組，第二次：" + objAddPkg2.Add());

            WriteLog("=====================================");

            WriteLog("第一組，第三次：" + objAddPkg1.Add());

            WriteLog("第二組，第三次：" + objAddPkg2.Add());

        }

        function WriteLog(sMsg) {

            txtMsg.innerHTML = txtMsg.innerHTML + sMsg + "\n";

        }

    </script>

</head>

<body>

    <input id="btnTest1" type="button" onclick="test1();" value="非閉包" />

    <input id="btnTest2" type="button" onclick="test21();"  value="閉包單組" />

    <input id="btnTest3" type="button" onclick="test22();" value="閉包單組" />

    <input id="btnTest4" type="button" onclick="test3();" value="閉包多組多次(錯誤結果)" />

    <input id="btnTest5" type="button" onclick="test4();" value="閉包多組多次(預期結果)" />

    <input id="btnTest6" type="button" onclick="test5();" value="閉包多組多次(正确)" />

    <input id="btnClear" type="button" onclick="txtMsg.innerHTML = '';" value="清空" />

    <br />

    <textarea id="txtMsg" rows="2" cols="20" style="width:100%; height:600px;"></textarea>

</body>

</html>


上面的代码关于“閉包多組多次(錯誤結果)”和“閉包多組多次(預期結果)”，红色字体结果都不是我预期的，还请教一下大家，感恩！ 预期的结果应该是：

=====================================
閉包多組，每組都是新的並且組與組之間互不影響(預期結果)
第一組，第一次：0
第一組，第二次：1
=====================================
第二組，第一次：0
第二組，第二次：1
=====================================
第一組，第三次：2
第二組，第三次：3--->2(期望是2)
=====================================
閉包多組，每組都是新的並且組與組之間互不影響(錯誤結果)
第一組，第一次：0
第一組，第二次：1
第一組，第三次：2
=====================================
第二組，第一次：0
第二組，第二次：1
第二組，第三次：2
=====================================
第一組，第四次：3
第二組，第四次：4--->3(期望是3)

-----------------------------------------------------------

又仔细看了一边，真发现自己太粗心。

直接this就搞定了，唉。

人家明明写的：这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

仔细思考应该可以认为：AddPkgErr中var intCount = 0;和AddPkgOK中AddPkgOK.prototype.intCount = 0;应该效果是一样的。

参考资料：

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

JS闭包研究、自造困扰与解答的更多相关文章

探讨js闭包
背景:爱就要大胆说出来,对于编程我只想说,喜欢就大胆写出来.喜欢却不行动那就意味着失败.所以,对于在研究编程的猿们,我对同伴们说,大胆的学,大胆的写.呵呵,说这些其实无非是给我自己点动力,写下去的勇气 ...
浅谈js闭包（closure）
相信很多从事js开发的朋友都或多或少了解一些有关js闭包(closure)的知识. 本篇文章是从小编个人角度,简单地介绍一下有关js闭包(closure)的相关知识.目的是帮助一些对js开发经验不是很 ...
js闭包的作用域以及闭包案列的介绍：
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
js闭包之初步理解（ JavaScript closure）
闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...
(原创)JS闭包看代码理解
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
js闭包理解
js闭包的作用是使函数外可以访问函数内部的变量,是通过在函数内部定义访问函数内变量的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...
js闭包理解实例小结
Js闭包闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

随机推荐

Openjudge计算概论-角谷猜想
/*===================================== 角谷猜想总时间限制: 1000ms 内存限制: 65536kB 描述所谓角谷猜想,是指对于任意一个正整数,如果是奇数 ...
CI框架3.0关于session的设置改动及存数据库的使用方法
Session的设置跟之前有点不一样我们来看看2.0版本中的设置是什么样子的: $config['sess_cookie_name']= 'test_session'; $config['sess_ ...
【转】个人最常用的Eclipse快捷键
记录下自己在Eclipse中最常使用的快捷键: 其实网上总结多的是,自己记录下自己平时最切身受益的一些快捷键. 1.SHIFT+ ALT+Z(刚学的): 条件:选中一段代码会弹出上面的右键菜单, ...
Redis持久化机制和恢复机制
Redis持久化方式有两种: (1)RDB 对内存中数据库状态进行快照 (2)AOF 把每条写命令都写入文件,类似mysql的binlog日志 RDB 将Redis在内存中的数据库状态保存到磁盘里面, ...
【性能诊断】八、并发场景的性能分析（windbg案例，连接泄露）
此前遇到一个项目反馈系统宕机问题,摘要描述如下: 系统不定期出现卡死现象,在多个模块不同功能上都出现过,未发现与特定功能相关的明显规律: 当系统出现卡死现象时,新的用户无法登陆系统: 跟踪应用服务器, ...
控制台程序实现利用CRM组织服务和SqlConnection对数据库中数据的增删改查操作
一.首先新建一个控制台程序.命名为TestCol. 二.打开App.config在里面加入,数据库和CRM连接字符串 <connectionStrings> <add name=&q ...
用javacsv API 来操作csv文件
javacsv是国外开发的一个比较好的操作csv文件的API,这里简单讲一下用法. 先下载javacsv2.0.zip的文件,解压后,把javacsv.jar 添加到项目中. 本站下载地址: htt ...
sql2008 将行转为字符串，将字符串转为行互转
--将行转为字符串 select stuff((select top 20 ','+ QQ from dl_QQ where uiid=1 order by tim desc for xml path ...
【linux】 /etc/shadow 文件
格式:username: passwd: lastchg: min: max: warn: inactive: expire: flag 登录名:加密口令:最后一次修改时间:最小时间间隔:最大时间间隔 ...
c# string 数组转 list
string str = "1,11,121,131"; var arr = str.Split(','); List<string> list = new List& ...

JS闭包研究、自造困扰与解答

JS闭包研究、自造困扰与解答的更多相关文章

随机推荐

热门专题