• JS闭包理解的彻底吗?


    关于JS闭包的概念和是应用这里不说,只针对个人理解做一个简单测试,如果回答正确,并且知道什么回事,说明对闭包的原理掌握差不多了。

    请看题:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <script type="text/javascript">
    function f1() {
    var arr = document.getElementsByTagName("p");
    for( var i=0; i<arr.length; i++ ) {
    arr[i].onclick
    = function() {alert(i); }
    }
    }
    </script>
    </HEAD>
    <body onload="f1();">
    <p>点击我 0</p>
    <p>点击我 1</p>
    <p>点击我 2</p>
    <p>点击我 3</p>
    </body>
    </HTML>

        试着回答一下上面代码点击的时候后会弹出什么值 ?

        如果是0,1……  那就错了(刚开始我也错了 ^_^)

        正确答案是4.

        什么原因?  自己在网上搜索一下JS变量作用域就明白了(其实我也说不清楚 ……)

    解决方案

        其实解决的方法有好几种,比如隐藏域,我要说的是闭包的方式

    请看代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <script type="text/javascript">
    function f1() {
    var arr = document.getElementsByTagName("p");
    for( var i=0; i<arr.length; i++ ) {
    arr[i].onclick
    = (function(k){ return function(){ alert(k); } })(i); //这个变了
    }
    }
    </script>
    </HEAD>
    <body onload="f1();">
    <p>点击我 0</p>
    <p>点击我 1</p>
    <p>点击我 2</p>
    <p>点击我 3</p>
    </body>
    </HTML>

        运行代码看看。  果然正确了。

        至于为什么,Google一下就明白  呵呵。

    还有一个……

        这个例子看的别人的,不过很典型拿来用用 ^^

        他涉及到this关键字的用法,看仔细了

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <script type="text/javascript">
    var name = "The Window";
    var object = {
    name :
    "My Object",
    getNameFunc :
    function(){
    return function(){
    return this.name;
    };
    }
    };
    alert(object.getNameFunc()());

    </script>
    </HEAD>
    <body >
    </body>
    </HTML>

    猜结果什么?

    答案: “The Window”

    其他的不说了,如果能明白上面两个例子,闭包应用可以小试牛刀了  哈哈……

    ———————————————————————————————————————— 

     一个人的时候,总是在想

        我的生活到底在期待什么……

  • 相关阅读:
    查看whl包名是否满足系统的条件的命令,以此解决whl包出现“is not a supported wheel on this platform”错误提示的问题
    C++-文件输入输出流
    C++-PTA-6-7-1 地下迷宫探索
    C++-PTA-时钟模拟
    数据结构-深入虎穴-树的应用
    数据结构-二叉树-(先序|后序)+中序求(后序|先序)笔记
    C++-课后习题-日期类DATE时间类Time
    C++-课后习题-学生类
    数据结构-串数组广义表笔记
    数据结构-PTA-银行业务队列简单模拟
  • 原文地址:https://www.cnblogs.com/freeton/p/2334953.html
Copyright © 2020-2023  润新知