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

    js闭包有什么用处?js闭包的用法实例(附代码)

    不言不言2018-08-23 11:38:34原创907

    本篇文章给大家带来的内容是关于js闭包有什么用处?js闭包的用法实例(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    Js语言在函数内部可以直接读取全局变量,但函数外部无法读取函数内的局部变量

    <script type="text/javascript">
    var n=100;
    function parent(){
      alert(n);
    }
    parent();//100
    </script>
    
    <script type="text/javascript">
    function parent(){
      var m=50;
    }
    parent();
    alert(m);//报错 m未定义
    </script>

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

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

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

    <script type="text/javascript">
    function parent(){
       var m=50;
       function son(){
            alert(m);
       }
       return son;
    }
    var s=parent();//将结果保存在全局里
    s();//50
    </script>

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

    闭包:函数内部定义函数,连接函数内部和外部的桥梁,闭包的作用有2个:

    下面是几个闭包的例子

    1、匿名函数实现闭包:

    <script type="text/javascript">
    var cnt=(function(){
        var i=0;
        return function(){
            alert(i);
            i++;
        }
    })();
    cnt();//0
    cnt();//1
    cnt();//2
    cnt();//3

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

    2、向闭包内传递参数:

    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

    相关推荐:

    js闭包 和 prototype

    一分钟理解js闭包_javascript技巧

    以上就是js闭包有什么用处?js闭包的用法实例(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    快捷开发Web应用及小程序:点击使用

    支持亿级表,高并发,自动生成可视化后台。

    专题推荐:js闭包
    上一篇:javascript如何实现图片切换的动画效果(代码) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• js闭包引起的事件注册问题介绍_基础知识• 分析js闭包引起的事件注册问题_javascript技巧• js闭包所用的场合以及优缺点分析_javascript技巧• js闭包实例汇总_基础知识• 详解js闭包_基础知识• javascript学习笔记(十三) js闭包介绍(转)_基础知识
    1/1

    PHP中文网