图解闭包

说到 闭包 ,这是js不得不提的一个特性,很少有语言有这样的特性,Ruby也是其中一只。

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

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

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

  运行结果:

时间: 2024-11-05 17:03:26

图解闭包的相关文章

2014年11月 上 前端资源分享

资源来自:https://github.com/hacke2/hacke2.github.io/issues/10 js http://blog.jobbole.com/29454/ 常用javascript设计模式 http://coderlmn.github.io/code-standards/#userconsent# 前端代码规范 及 最佳实践 http://www.w3cfuns.com/thread-5591957-1-1.html 人人网javascript面试题 http://b

前端资源分享

http://blog.jobbole.com/29454/常用javascript设计模式 http://coderlmn.github.io/code-standards/#userconsent#前端代码规范 及 最佳实践 http://www.w3cfuns.com/thread-5591957-1-1.html人人网javascript面试题 http://blog.51yuekan.com/2014/10/08/2014-08-02-javascript-module-define/

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

图解javascript this指向什么?

原文:http://www.cnblogs.com/isaboy/p/javascript_this.html JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaSc

前端基础进阶(一):内存空间详细图解

变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存空间并不是一个经常被提及的概念,很容易被大家忽视.特别是很多不是计算机专业的朋友在进入到前端之后,会对内存空间的认知比较模糊,甚至有些人干脆就是一无所知. 当然也包括我自己.在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要.可是后我当我回过头来重新整理JS基础时,发现由于对它们

20170713_js闭包/匿名函数/作用域

js:闭包 var getNum; function getCounter() { var n = 1; var inner = function () {return n++; } console.log(n); return inner; } //第一步 getNum = getCounter(); //第二步 console.log(getNum());//1 //第三步 console.log(getNum());//2 //也许是这样?可能的情况1: //第一步 getNum指向了ge

一步步学习javascript基础篇(6):函数表达式之【闭包】

回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; }  //函数声明语法定义 2. var sum = function(num1, num2){ return num1 + num2; }; //函数表达式定义 3. var sum = new Function("num1", "num2", "return num1 + num2"); //Function

图解 javascript this 指向

JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(

JavaScript——闭包(转自别人)

说到 闭包 ,这是js不得不提的一个特性,很多传统语言都不具备这样的特性,比如JAVA C等等. 之前看书的时候,总是理解不好什么是闭包!下面就通过手绘一张原理图,来理解一下: 首先基本上所有的编程语言都有类似的特性,局部方法可以访问外部父类方法的属性,也就是说,子类或子方法可以访问父类的资源. <!-- 在正常的脚本中,某个方法可以获取到外部的变量,或者全局变量 --> var num = 11; function func1(){ console.log(num); } func1();