javascript 闭包 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<style type="text/css">
    body,html,ul,li{padding: 0;margin: 0;list-style: none}
    .warp{max-width: 1200px;width: 80%;margin: auto;}
    .demo{display: block;margin-top: 50px;border: #ddd solid 1px;}
</style>
<body>
    <div class="warp">
		<ul>
            <li>点击1</li>    
            <li>点击2</li>    
            <li>点击3</li>    
            <li>点击4</li>    
            <li>点击5</li>    
            <li>点击6</li>    
            <li>点击7</li>    
        </ul>
    </div>

</body>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script type="text/javascript">
    //变量的寿命兼闭包的第一大作用：延长寿命

    function test(){
        var a = 1;  //退出后函数局部变量a直接被销毁
          
    };

    function test1(){
        var a=1;
        return function(){
            a++;
            console.log(a);
        }
    }

    var f=test1();
    f();
    f();
    f();


    //闭包的第二大作用：封闭变量

    var len=$(".warp ul li").length;

    for(var i=0;i<len;i++){
        let j=i;
        $(".warp ul li:eq("+i+")").click(function(){
            console.log(j);
        })
    }


    //第三大作用：模拟面向对象

    var extent = {
        value:10,
        call:function(){
            this.value++;
            console.log(this.value);
        }
    };
    extent.call();
    extent.call();
    extent.call();


    var Extent=function(){
        this.value=20;
    };
    Extent.prototype.call=function(){
        this.value++;
        console.log(this.value);
    };
    var extent=new Extent();
    extent.call();
    extent.call();
    extent.call();


</script>
</html>

　　

posted @ 2017-03-29 15:07  fm060  阅读(44)  评论(0)    收藏  举报