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

说到 闭包 ，这是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. js 跳出循环

    js 循环主要有 for while 主要有三种方式 :break continue return break是跳出当前整个循环语句,循环终止会继续执行该循环之后的代码 而continue是跳过当前循 ...

  2. MySQL（二）MySQL中的存储引擎

    前言 数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以 ...

  3. Coursera课程笔记----计算导论与C语言基础----Week 11

    C程序中的字符串(Week 11) 字符数组 所有的字符串,都是以\0结尾的 只能在数组定义并初始化的时候:char c[6] = "China"; 不能用赋值语句将一个字符串常量 ...

  4. 标准IDOC同步物料

    目录 1功能说明    4 2功能实现    4 2.1创建逻辑系统并分配集团(SALE)    4 2.2维护RFC目标(SM59)    5 2.3在发送端创建模型视图(BD64)    5 2. ...

  5. python重试次数装饰器

    目录 重试次数装饰器 重试次数装饰器 前言, 最近在使用tornado框架写Restful API时遇到很多的问题. 有框架的问题, 有异步的问题. 虽然tornado 被公认为当前python语言最 ...

  6. Mysql常用sql语句（19）- in / exists 子查询

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 子查询在我们查询方法中是比较常用的,通过子查询可 ...

  7. vue实现音乐播放器实战笔记

    原文链接:https://blog.csdn.net/Forever201295/article/details/80266600 一.项目说明该播放器的是基于学习vue的实战练习,不用于其他途径.应 ...

  8. 缓冲 buffer 和缓存 cache 的区别

    缓存(cache)是在读取硬盘中的数据时,把最常用的数据保存在内存的缓存区中,再次读取该数据时,就不去硬盘中读取了,而在缓存中读取. 缓冲(buffer)是在向硬盘写入数据时,先把数据放入缓冲区,然后 ...

  9. CSS之未知高度img垂直居中

    测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...

  10. Universalimageloader 原图片大小获取

    Universalimageloader1.9.5上还没有对外提供获取图片的原大小功能,如果需要获取图片的源大小,可参考stackoverflow上的解决办法 stackoverflow地址 主要实现 ...