关闭

图解JS闭包

79人阅读 评论(0) 收藏 举报
分类:

说到 闭包 ,这是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>
复制代码

  运行结果:

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

javascript 闭包的好处及坏处

闭包javascript 是最强大的特征之一,它允许函数访问局部作用域之外的函数。
  • vuturn
  • vuturn
  • 2015-01-23 14:15
  • 10662

JavaScript闭包详解

1.闭包概念及闭包作用域链  闭包是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见的方式,就是在函数内部创建另外一个函数。    function closure(arg){       ...
  • vuturn
  • vuturn
  • 2015-03-23 10:55
  • 2249

JS之经典for循环闭包问题解决方法

JS之经典for循环闭包问题解决方法 像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4、5,但实际结果却是这样的 我们无论点哪个按钮,最后弹出来的都是6。...
  • YuLi_Zoe
  • YuLi_Zoe
  • 2015-01-30 13:09
  • 6727

JavaScript之闭包、定时器

谈谈闭包 对于JavaScript而言,虽然没有块作用域的概念,但是有函数作用域的概念,若是想从全局环境下去访问一个函数内的局部变量,是办不到的;但是根据JavaScript中的链式作用域的概念...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-18 22:56
  • 679

理解 Javascript 的闭包 (例子举得很好)

转自:http://www.oschina.net/question/28_41112?fromerr=UAPtt2Ce 前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对...
  • chelen_jak
  • chelen_jak
  • 2016-01-23 10:41
  • 3438

js-闭包 代码多示例

/*var name = "The Window";       var object = {     name : "My Object",     getNameFunc : functio...
  • u010242159
  • u010242159
  • 2016-09-07 18:40
  • 350

JS闭包与变量

JS闭包 作用域链 变量 匿名函数
  • liuyan19891230
  • liuyan19891230
  • 2015-11-12 13:16
  • 4121

闭包经典面试题

闭包应该是前段面试中经常碰到的面试题,很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念; 首先看面试题: for (var i = 1; i   setTimeout...
  • donggx
  • donggx
  • 2017-04-14 14:13
  • 5207

js闭包中this的指向问题及三种解决方法

下面是一个问题,对象方法中定义的子函数,子函数执行时this指向哪里? 三个问题:     (1)以下代码中打印的this是个什么对象?     (2)这段代码能否实现使myNumber.val...
  • qq_21794603
  • qq_21794603
  • 2017-05-11 22:37
  • 884

JS中闭包的优缺点

先上段代码: //函数a function a() { var i=0; //函数b function b() ...
  • weblini
  • weblini
  • 2016-03-28 10:32
  • 3209
    个人资料
    • 访问:14188次
    • 积分:519
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:56篇
    • 译文:7篇
    • 评论:1条
    文章分类
    最新评论