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

说到 闭包 ，这是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. Taurus.MVC 2.3.2 ：WebAPI 文档集成测试功能及附加<%# JS执行功能语法 %>

    前言: 前些天有网友提到了那个界面丑陋的SwaggerUI,让我想起了多年前实现的WebAPI文档未完成的功能点,于是,动手了,便有了本文的内容. 开源地址:https://github.com/cy ...

  2. E. Yet Another Task with Queens（分类思想）

    \(\color{Red}{描述}\) \(在n*n的棋盘上有m个K皇后,每个皇后可能被来自8个方向的其他皇后攻击\) \(每个皇后只可能被(0-8)只皇后攻击,分别求出被(0-8)只皇后攻击的皇后数 ...

  3. E. Kamil and Making a Stream 区间gcd

    E. Kamil and Making a Stream 这个题目要用到一个结论,就是区间一个区间长度为n的不同的gcd不会超过logn 个, 其实就是知道这个题目可以暴力就好了. 然后就是对于每一个 ...

  4. HTTP头部信息和错误代码详解-《HTTP权威指南》

    最近在调试 前后端分离的请求测试,遇到了一个405错误, 无法接受,于是开始了人肉搜索405. 最后 还是HTTP头部信息里的Accept:application/json 这个Accept 导致的, ...

  5. Spring Cloud feign GET请求无法用实体传参的解决方法

    代码如下: @FeignClient(name = "eureka-client", fallbackFactory = FallBack.class, decode404 = t ...

  6. 01_互联网基本原理和HTML入门

    从"上网"说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的细节,可能令你没有安全感(很多的知识盲点).没有关系,老师进行的是 ...

  7. JVM垃圾回收器（三）

    垃圾回收知识点 引用计数 给对象添加一个引用计数器,每当一个地方引用这个对象,这个计算器就加1.如果引用失效,那计算器就减1.如果计算器数量为0,那这个对象就是失效的. 但是如果2个对象虽然不用了,但 ...

  8. ssh暴力破解解决方案(Centos7更改端口)

    服务器默认ssh远程连接端口为22端口,通常通过22远程连接的话,容易有ssh暴力破解的风险,给我们造成一定的损失.下面是更换ssh端口过程: 1.添加ssh端口 vim /etc/ssh/sshd_ ...

  9. Linux内核驱动学习（六）GPIO之概览

    文章目录 前言 功能 如何使用 设备树 API 总结 前言 GPIO(General Purpose Input/Output)通用输入/输出接口,是十分灵活软件可编程的接口,功能强大,十分常用,SO ...

  10. JavaWeb实战：报价计算系统（layui+tomcat+cookie实现）

    JavaWeb实战:报价计算系统(layui+tomcat+cookie实现) 系统概述: 该系统是文物物流公司的一个小功能模块,用于帮助用户计算运费.点击查看实际效果 系统文档: 添加展品: 在表单 ...