• 技术文章 >web前端 >js教程

    js闭包实例汇总_基础知识

    2016-05-16 16:31:46原创748
    Js闭包
    闭包前要了解的知识
    1. 函数作用域
    (1).Js语言特殊之处在于函数内部可以直接读取全局变量

    复制代码 代码如下:


    如果在php里

    复制代码 代码如下:

    <?php
    $n=100;
    function parent(){
    echo $n;
    }
    parent();//会报错 n未定义
    ?>

    (2).在函数外部无法读取函数内的局部变量

    复制代码 代码如下:


    注意函数内部声明变量时一定要加var,否则就声明了一个全局变量

    复制代码 代码如下:

    function parent(){
    m=50;
    }
    parent();
    alert(m);//50

    //当然在php里更是如此了,

    复制代码 代码如下:

    <?php
    function parent(){
    global $m;//全局 ,定义与赋值要分开
    $m=50;
    }
    parent();
    echo $m;//50
    ?>
    //没global的话,一样会报没定义的错误

    有时,需要得到函数内部的的局部变量,就需要变通的方法实现利用js变量作用域的特点,如在函数内部定义子函数,对于子函数来说,父函数就是它的全局,子函数可以访问父函数里的变量(对于整个js代码来说又是局部变量)

    复制代码 代码如下:


    Parent内部所有局部变量对其子函数来说都是可见的,但其子函数内的局部变量对其父函数是不可见的,这就是js特有的链式作用域结构,子对象会一级一级地向上查找所有父对象的变量,父对象的所有变量对子对象都是可见的,反之不成立!上面的son函数就是闭包
    有些同学可能这样

    复制代码 代码如下:

    function parent(){
    var m=50;
    function son(){
    alert(m);
    }
    }
    parent();
    son()//会报 函数son未定义

    注意 在javascript里,在函数里声明的函数都是局部的,函数运行完后就释放了
    注意这点与php的区别

    复制代码 代码如下:

    <?php
    function parent(){
    function son(){
    $m=50;
    echo $m;
    }
    }
    parent();
    son();//输出50 不会报错
    ?>

    闭包

    函数内部定义函数,连接函数内部和外部的桥梁
    闭包的作用有2个:
    一是前面提到的读取函数内部的变量,
    二是让这些变量的值保存在内存中,实现数据共享
    下面是几个闭包的例子

    复制代码 代码如下:


    把匿名函数的执行结果(即对里面子函数的声明赋给全局变量cut),i就保存在内存里了
    执行cut()时就直接从内存取值了,i只有cnt()函数才能调用,直接alert(i)是不行的
    还可以向闭包内传参

    复制代码 代码如下:

    var cnt=(function(num){
    return function(){
    alert(num);
    num++;
    }
    })(5);
    cnt();//5
    cnt();//6
    cnt();//7
    //当然还可以调用时传参
    var cnt=(function(){
    var i=0;
    return function(num){
    num+=i;
    alert(num);
    i++;
    }
    })();
    cnt(1);//1
    cnt(2);//3
    cnt(3);//5

    为了对闭包有更好的理解,我们看以下代码
    比如我想返回一个数组,数组里面有5个函数,第一个函数弹出0,第二个弹出1...
    代码如果这样写

    复制代码 代码如下:

    function box(){
    var arr=[];
    for(i=0;i<5;i++){
    arr=function(){return i;}
    }
    return arr;
    }
    var a=box();
    alert(a);//包含五个函数体的数组
    alert(a[0]());
    alert(a[1]());

    弹出的函数体
    function(){return i;} }
    最后这个i是4,之后++成为5
    For循环停止
    发现均弹出5,明显不符合我们的要求

    解决方案1
    自我即时执行里面的函数

    复制代码 代码如下:

    function box(){
    var arr=[];
    for(i=0;i<5;i++){
    arr=(function(num){return i;})(i);
    }
    return arr;
    }
    var a=box();
    for(var i=0;i alert(a);
    }

    但是我们发现 返回的数组里的元素是函数执行的结果,但我们想要的是函数有得升级我们的代码

    解决方案2
    闭包实现

    复制代码 代码如下:

    function box(){
    var arr=[];
    for(var i=0;i<5;i++){

    arr=(function(num){
    return function(){return num;}
    })(i);

    }
    return arr;
    }

    var arr=box();

    for(var i=0;i<5;i++){

    alert(arr());//0,1,2,3,4
    }

    关键代码

    复制代码 代码如下:

    arr=(function(num){
    return function(){return num;}
    })(i);


    i=0 时
    arr[0]=(function(num){return function(){return num;}})(0);

    1时


    arr[1]=(function(num){return function(){return num;}})(1);

    以上就是闭包的好处!非常简单实用吧。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js 闭包 实例
    上一篇:再谈javascript原型继承_javascript技巧 下一篇:让angularjs支持浏览器自动填表_AngularJS
    Web大前端开发直播班

    相关文章推荐

    • 聊聊Angular中组件之间怎么通信• ie8是否支持es6• 怎么获取Node性能监控指标?获取方法分享• Angular如何对请求进行拦截封装?• 浅析Angular中怎么用 Api 代理

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网