zoukankan      html  css  js  c++  java
  • 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”

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

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

     一个人的时候,总是在想

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

  • 相关阅读:
    UVA 11174 Stand in a Line,UVA 1436 Counting heaps —— (组合数的好题)
    UVA 1393 Highways,UVA 12075 Counting Triangles —— (组合数,dp)
    【Same Tree】cpp
    【Recover Binary Search Tree】cpp
    【Binary Tree Zigzag Level Order Traversal】cpp
    【Binary Tree Level Order Traversal II 】cpp
    【Binary Tree Level Order Traversal】cpp
    【Binary Tree Post order Traversal】cpp
    【Binary Tree Inorder Traversal】cpp
    【Binary Tree Preorder Traversal】cpp
  • 原文地址:https://www.cnblogs.com/freeton/p/2334953.html
Copyright © 2011-2022 走看看