有这样一个段子：说闭包的主要作用是什么？，答：面试。确实在许多面试中，闭包是必问项目，所以不为别的，只为面试，理解闭包就很重要。

说到 闭包 ，这是js不得不提的一个特性，很多传统语言都不具备这样的特性，比如JAVA C等等。

之前看书的时候，总是理解不好什么是闭包！下面就通过手绘一张原理图，来理解一下：

　　首先基本上所有的编程语言都有类似的特性，局部方法可以访问外部父类方法的属性，也就是说，子类或子方法可以访问父类的资源。

        <!-- 在正常的脚本中，某个方法可以获取到外部的变量，或者全局变量 -->

        var num = 11;

        function func1(){

            console.log(num);

        }

        func1();

　　因此上面的这段代码，我们可以获取到num的值。

　　父类能否获取到子方法内部的值呢？

        function func2(){

            var num1 = 22;

            num2 = 33;

        }

        func2();

        <!--console.log(num1);  会报错！-->

        console.log(num2); <!--可以获取到num2的值，因为不使用var定义变量时，默认是全局变量 -->

　　当然是不可以的，因为子方法的变量作用域仅仅是子方法的范围，外部是无法获取到的。

　　

　　那么如何才能在外部获取到子方法的局部变量呢！

　　如果是java，一个类的私有属性，可以通过公共的get方法来获取，比如：

class Person{

  private String name;

  public String getName(){

    return name;

}

}

　　通过上面的方式可以获取到一个类内部的私有属性，同样的，在js中可以通过某个方法来获取这个方法的局部变量，然后通过这个方法内的方法来读取想要的变量值。

        function func3(){

            var num3 = 44;

            function func4(){

                return num3;

            }

            return func4;

        }

        var func = func3();

        console.log(func());

　　参考下面的图解：

　　在外部无法获取到func3内部的局部变量，但是func3内部的局部方法func4却可以获取到，因此 返回一个func4的引用 ，这样在外部通过这个func4就可以获取到func3的内部变量。

　　虽然是绕了一个圈子，但是在方法外部却通过这样一个手段获取到了内部的值。

　　而这个方法内的局部方法func4就叫做闭包，按照很多书上的概念，这个方法搭建了方法内部与方法外部的桥梁，使得在外部也可以任意的获取到方法内部的资源。

　　但是闭包会造成变量在内存中持久占用，因此会有一定的性能问题，最好不要轻易使用，即便使用也要在恰当的实际进行释放。

　　示例的源码：

<!doctype html>

<html>

    <head>

    </head>

    <body>

        <script type="text/javascript">

        <!-- 在正常的脚本中，某个方法可以获取到外部的变量，或者全局变量 -->

        var num = 11;

        function func1(){

            console.log(num);

        }

        func1();

        <!-- 但是在外部是无法获取方法内部的局部变量的 -->

        function func2(){

            var num1 = 22;

            num2 = 33;

        }

        func2();

        <!--console.log(num1);  会报错！-->

        console.log(num2); <!--可以获取到num2的值，因为不适用var定义变量时，默认是全局变量 -->

        <!-- 那么如何在外部获取到内部的变量呢！javascript可以办到 -->

        function func3(){

            var num3 = 44;

            function func4(){

                return num3;

            }

            return func4;

        }

        var func = func3();

        console.log(func());

        </script>

    </body>

</html>

　　运行结果：

JavaScript——闭包（转自别人）的更多相关文章

  1. 最简明的JavaScript闭包解释

    最简明的JavaScript闭包解释 JavaScript是这几年最火的编程语言之一,从前端到服务器端,再到脚本,好像没有一个地方没有JavaScript的身影.这个世界上任何的一种事物的存在必然有其 ...

  2. 那些年，我们误解的 JavaScript 闭包

    说到闭包,大部分的初始者,都是谈虎色变的.最近对闭包,有了自己的理解,就感觉.其实我们误解闭包.也被网上各种说的闭包的解释给搞迷糊. 一句话:要想理解一个东西还是看权威的东西. 下面我来通俗的讲解一个 ...

  3. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  4. JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  5. JavaScript闭包(Closure)

    JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...

  6. Javascript闭包和C#匿名函数对比分析

    C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...

  7. javascript闭包理解

    //闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...

  8. Javascript闭包深入解析及实现方法

    1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...

  9. javascript闭包和作用域链

    最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...

  10. JavaScript闭包深入解析

    for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...

随机推荐

  1. nnIPXougCC

    13:58:31           2020-03-14 发现一本书叫做<活法> 学习ing 2020-03-14 15:22:36 太快 ,练习了一会sql语句和打字 想看一会 憨豆特 ...

  2. PHP命令执行学习总结

    前言 最近学习了PHP命令执行,内容比较多,把自己学到的总结下来,加深理解,水平有限,欢迎大佬斧正. 什么是PHP命令注入攻击? Command Injection,即命令注入攻击,是指由于Web应用 ...

  3. 【Java8新特性】你知道Java8为什么要引入Lambda表达式吗？

    写在前面 这是一道真实的面试题,一个读者朋友出去面试,面试官竟然问他这样一个问题:你说说Java8中为什么引入Lambda表达式?引入Lambda表达式后有哪些好处呢?还好这个朋友对Java8早有准备 ...

  4. Scrapy爬虫框架基本使用

    scrapyhub上有些视频简单介绍scrapy如何学习的(貌似要FQ):https://helpdesk.scrapinghub.com/support/solutions/articles/220 ...

  5. 【BIM】BIMFACE中创建雾化效果

    背景 在BIM运维场景初始化的时候,一般都是首先将整个运维对象呈现在用户面前,例如一座大厦.一座桥梁.一个园区等等,以便于用户进行总览,总体把握运维对象,如果这个宏大的场景边界过于清晰,与背景融合也不 ...

  6. springboot之异常处理

    我在使用springboot的时候,运行主类结果报错 : 异常错误:java.sql.SQLException: The server time zone value '?й???????' is u ...

  7. NLP（二十九）一步一步，理解Self-Attention

      本文大部分内容翻译自Illustrated Self-Attention, Step-by-step guide to self-attention with illustrations and ...

  8. 麦基数(p1045)

    描述: \(计算2^{P}−1的位数和最后500位数字(用十进制高精度数表示)\) Ⅰ.求位数 \(因为2^p最后一位必定不为0,求2^p-1的位数也就是求2^p位数\) \(2^p的位数确实很难求, ...

  9. OpenWrt R2020.03.05 去广告 抗污染 加速 UnPnP NAS

    固件版本已经更新,新版本链接:https://www.cnblogs.com/zlAurora/p/12500932.html   容我啰嗦一下,为什么会有这个固件.   从KoolShare LED ...

  10. 关于fromdata的上传文件问题

    <div <label>上传pdf</label> <input id="fileId" type="file" accep ...