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

说到 闭包 ，这是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. Centos7增加磁盘空间并挂载目录(VMware)

    1.前言 今天本机vmware在使用docker安装oracle11g时提示nospace空间不足,所以用这篇文章简介下虚拟机如何扩展硬盘并挂载 2.添加新硬盘 依次点击"虚拟机" ...

  2. IIS 搭网站(一)

    搭建类型win+IIs+asp+access(一) 第一步首先保证虚拟机的系统软盘是连接状态,如下图状态即可 第二步: 第三步: 第四步: 第五步: 第六步:这个时候就会自动搜索软盘里面的数据自动安装 ...

  3. 应用开发实践之关系型数据库(以MySql为例)小结

    本文主要是对目前工作中使用到的DB相关知识点的总结,应用开发了解到以下深度基本足以应对日常需求,再深入下去更偏向于DB本身的理论.调优和运维实践. 不在本文重点关注讨论的内容(可能会提到一些): 具体 ...

  4. jquery 根据后端传过来的value值，让小原点根据不同值区间去左右定位

    /** * 小圆点滑动 * @param {目标dom} barEle * @param {最小值} min * @param {最大值} max * @param {dom总长度} domLang ...

  5. 僵尸进程(zombie process)

    首先了解一下linux中进程的5大状态: R Running or runnable (on run queue)S Interruptible sleep (waiting for an event ...

  6. 2-MyBatisPlus教程（HelloWorld）

    1,准备数据 DROP TABLE IF EXISTS user; CREATE TABLE user ( id ) NOT NULL COMMENT '主键ID', name ) NULL DEFA ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  8. Dubbo（七）：redis注册中心的应用

    上篇我们讲了Dubbo中有一个非常本质和重要的功能,那就是服务的自动注册与发现,而这个功能是通过注册中心来实现的.上篇中使用zookeeper实现了注册中心的功能,同时了提了dubbo中有其他许多的注 ...

  9. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

  10. 李婷华 201771010113 《面向对象程序设计（java）》第一周学习总结

    第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 薄荷蓝莓 程序设计评测:https://pintia.cn/ 1957877441@q ...