• 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”

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

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

     一个人的时候,总是在想

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

  • 相关阅读:
    使用MFC开发的一个U盘后台拷贝程序
    cpp和c编译区别extern
    VC++的一个类中调用另一个类的变量
    科技创新项目基本知识学习(1) (07年10月2日)
    【原创】斌伯的DirectX学习笔记(2)DirectX的初始化化(10.19 下午)
    【原创】斌伯的DirectX学习笔记——引子
    斌伯的博客园Blog开张大吉
    科技创新项目开始(07年10月2日)
    小哈学Python第二课:Hello Word
    小哈学Python第一课:基本介绍
  • 原文地址:https://www.cnblogs.com/freeton/p/2334953.html
Copyright © 2020-2023  润新知