专栏首页大道七哥学习Javascript闭包(Closure)

学习Javascript闭包(Closure)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

1 var n=999;
2 
3   function f1(){
4     alert(n);
5   }
6 
7   f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

1 function f1(){
2     var n=999;
3   }
4 
5   alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

 function f1(){
    n=999;
  }

  f1();

  alert(n); // 999

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

1 function f1(){
2 
3     var n=999;
4 
5     function f2(){
6       alert(n); // 999
7     }
8 
9   }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

 1  function f1(){
 2 
 3     var n=999;
 4 
 5     function f2(){
 6       alert(n); 
 7     }
 8 
 9     return f2;
10 
11   }
12 
13   var result=f1();
14 
15   result(); // 999

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。

 1 function f1(){
 2 
 3     var n=999;
 4 
 5     nAdd=function(){n+=1}
 6 
 7     function f2(){
 8       alert(n);
 9     }
10 
11     return f2;
12 
13   }
14 
15   var result=f1();
16 
17   result(); // 999
18 
19   nAdd();
20 
21   result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一

 1 var name = "The Window";
 2 
 3   var object = {
 4     name : "My Object",
 5 
 6     getNameFunc : function(){
 7       return function(){
 8         return this.name;
 9       };
10 
11     }
12 
13   };
14 
15   alert(object.getNameFunc()());

代码片段二

 1 var name = "The Window";
 2 
 3   var object = {
 4     name : "My Object",
 5 
 6     getNameFunc : function(){
 7       var that = this;
 8       return function(){
 9         return that.name;
10       };
11 
12     }
13 
14   };
15 
16   alert(object.getNameFunc()());

-END-

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Facebook远程调用框架thrift入门示例

    和谷歌的gRPC类似,Facebook的thrift也是个优秀的远程调用框架,来入个门。

    acupt
  • 探索JAVA并发 - 悲观锁和乐观锁

    悲观锁认为一定会有人和它同时访问目标资源,因此必须先将其锁定,常见的synchronized和ReentrantLock等独占锁就是悲观锁思想的实现。

    acupt
  • Request

    请求头中有一个叫referer的它的值表示上一个页面的URL,当从一个页面跳转到当前页面,那么当前页面的请求头的referer的值就表示从哪个页面过来的

    木瓜煲鸡脚
  • NIO你真正了解多少?

    类通过实现 Java.io.Serializable 接口以启用其序列化功能。未实现此接口的类将无法使其任何状态序列化或反序列化。

    李红
  • NodeJS和ReactJS,VUEJS的关系

    网上找的科普贴,整理了一下发给大家,出处见底部链接。有许多类比的例子不太准确,大家参考下就行。

    浩Coding
  • Java虚拟机之内存区域,今天这篇文章来深入理解一下把

    Java 虚拟机在执行 Java 程序的时候会把它所管理的内存分为多个不同的区域,每个区域都有不同的作用,以及由各自的生命周期,有些随着虚拟机进行的 启动而存在...

    Java周某人
  • 源码分析 - JVM关闭钩子的注册和调用

    JAVA程序运行在虚拟机上(JVM),JAVA程序执行完成,JVM也随之关闭。关闭的方式有多种,根据其行为的文明程度可大概分为两种:

    acupt
  • 最全面的多线程面试题,你能回答几个?

    进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,是操作系统进行资源分配和调度的一个独立单位;

    李红
  • 探索JAVA并发 - 线程池详解

    线程池,即管理着若干线程的资源池(字面意思)。相比于为每个任务分配一个线程,在线程池中执行任务优势更多:

    acupt
  • 一线大厂面试官最喜欢问的15道Java多线程面试题

    在任何Java面试当中多线程和并发方面的问题都是必不可少的一部分。如果你想获得更多职位,那么你应该准备很多关于多线程的问题。

    程序员追风

扫码关注云+社区

领取腾讯云代金券