闭包是Javascript的一个难点,但也是一个很重要的知识点。

1、首先我们要知道变量作用域链

变量的作用域分两种:全局变量和局部变量。没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部变量,注意在函数内部定义变量时一定要使用var关键字,不带var关键字的变量为全局变量。

javascript中每一段代码都有与之关联的作用域链,这个作用域链是一个对象列表或者链表,定义了这段代码“作用域”中的变量。顶层代码的作用域由全局变量组成;不包含嵌套的函数的作用域链有两个对象:一个是定义的函数参数和局部变量的对象,一个是全局变量对象;而嵌套函数的作用域链有三个对象:函数参数和局部变量--外部函数的参数和局部变量--全局变量。函数可以访问作用域链上的对象,因此函数可以访问全局变量,而反过来却不可以,即在函数外部不能访问函数内的局部变量。

  1. var a=1;
  2. function wai(){
  3. alert(a);
  4. var m=10;
  5. n=20;
  6. }
  7.  
  8. wai(); //=> 1; 函数内部可以访问全局变量
  9. alert(m); //=> error; 外部访问函数局部变量报错
  10. alert(n); //=> 20; 函数内部定义的变量未使用var关键字,所以是全局变量,外部可以访问

2、如何在外部读取局部变量

有时候,我们需要在外部访问函数内板的局部变量,这个时候我们就需要使用变通的方法来实现。我们利用javascript变量作用域的特点,在函数内部定义子函数,子函数就可以访问父函数里的变量了

  1. function wai(){
  2. var m=10;
  3. function nei(){
  4. alert(m);
  5. }
  6. return nei;
  7. }
  8.  
  9. var f = wai();
    nei(); //=> error; nei()函数是一个局部变量,在外部不能访问
  10. f(); //=> 10;

3、闭包

上一段代码的nei()函数就是一个闭包,从上面可知,闭包就是可以读取函数内部局部变量的函数,是定义到函数内部的函数,本质上可以认为是函数内部和函数外部连接到一起的桥梁。

闭包的作用有两个:

一是前面提到的可以读取函数内部的变量

二是可以让这些局部变量保存在内存中,实现变量数据共享

  1. function wai(){
  2. var m=99;
  3. function nei(){
  4. alert(m);
  5. m++;
  6. }
  7. return nei;
  8. }
  9.  
  10. var f= wai();
  11. f(); //=> 99;
  12. f(); //=> 100;
  13. f(); //=> 101;

上述实例当wai()函数运行时,变量m就保存到内存中,执行f()就可以读取m的值,但直接alert(m)不可以!

我们还可以向闭包函数传参数,如下面示例所示,定义一个匿名函数并返回了一个闭包函数,该函数将传入的参数与匿名函数中的局部变量i相加,并使i自增;

  1. var wai=(function(){
  2. var i=0;
  3. return function(num){
  4. num+=i;
  5. alert(num);
  6. i++;
  7. }
  8. })();
  9. wai(1);//
  10. wai(2);//
  11. wai(3);//

为了更深入理解闭包,我们看下面一个示例:

现在我想定义一个函数,该函数返回一个数组,且数组每个元素都是一个函数,每个函数会弹出对应的索引值

我们可能会这样写

  1. function box(){
  2. var arr=[];
  3. for(i=0;i<5;i++){
  4. arr[i]=function(){return i;}
  5. }
  6. return arr;
  7. }
  8. var a=box();
  9. alert(a); //=>包含五个函数体的数组
  10. alert(a[0]()); //=> 5;
  11. alert(a[1]()); //=> 5;

上面的代码发现弹出的都是5,而不是我们预想的0,1,2,3,4,这是因为i也是存在于内存中的局部变量,当我们运行a[0]()时,i的值已经是5,i的值在整个box()函数运行过程中是不断自增的。

解决方法:闭包的实现

  1. function box(){
  2. var arr=[];
  3. for(var i=0;i<5;i++){
  4.  
  5. arr[i]=(function(num){
  6. return function(){return num;}
  7. })(i);
  8.  
  9. }
  10. return arr;
  11. }
  12.  
  13. var arr=box();
  14.  
  15. for(var i=0;i<5;i++){
  16.  
  17. alert(arr[i]());//0,1,2,3,4
  18. }

4、使用闭包的注意事项

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

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

5、下面是几个关于闭包的思考题

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

Js代码

  1. var name = "The Window";
  2. var object = {
  3. name : "My Object",
  4. getNameFunc : function(){
  5. return function(){
  6. return this.name; //=>嵌套函数的this为全局变量或undefined,不会继承父函数的this
  7. };
  8. }
  9. };
  10. alert(object.getNameFunc()()); //The Window

以上之所以输出的为“The window”是因为在嵌套函数中this不会继承父函数this,其值为全局变量或undefined(ECMAScript5下),因此返回的为全局对象的name变量。要想让其返回object的name属性,代码如下:

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

以上代码将父函数object的this赋给cur变量,其嵌套函数就可以通过cur变量访问其属性了

--------------------------------------------------------------------------------------------------------
JavaScript闭包例子

  1. function outerFun()
  2. {
  3. var a=0;
  4. function innerFun()
  5. {
  6. a++;
  7. alert(a);
  8. }
  9. }
  10. innerFun(); //=>error

上面的代码是错误的.innerFun()的作用域在outerFun()内部,所在outerFun()外部调用它是错误的.

改成如下,也就是闭包:

Js代码

  1. function outerFun()
  2. {
  3. var a=0;
  4. function innerFun()
  5. {
  6. a++;
  7. alert(a);
  8. }
  9. return innerFun; //注意这里
  10. }
  11. var obj=outerFun();
  12. obj(); //结果为1
  13. obj(); //结果为2
  14. var obj2=outerFun();
  15. obj2(); //结果为1
  16. obj2(); //结果为2

什么是闭包:

当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.

--------------------------------------------------------------------------------------------------------

再来看一个例子

Js代码

  1. function outerFun()
  2. {
  3. var a =0;
  4. alert(a);
  5. }
  6. var a=4;
  7. outerFun(); //=> 0
  8. alert(a); //=> 4

结果是 0,4 . 因为在函数内部使用了var关键字 维护a的作用域在outFun()内部.

再看下面的代码:

Js代码

  1. function outerFun()
  2. {
  3. //没有var
  4. a =0;
  5. alert(a);
  6. }
  7. var a=4;
  8. outerFun(); //=> 0
  9. alert(a); //=> 0

结果为 0,0 真是奇怪,为什么呢?

作用域链是描述一种路径的术语,沿着该路径可以确定变量的值 .当执行a=0时,因为没有使用var关键字,因此赋值操作会沿着作用域链到var a=4; 并改变其值.

javascript闭包的理解的更多相关文章

  1. 我对 javascript 闭包的理解

    学js的学到闭包,但是理解不深. 后来看了一下这篇文章: 地址:http://leepiao.blog.163.com/blog/static/4850313020112835355917/ 内容如下 ...

  2. 对JavaScript闭包的理解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 在开始了解闭包前我们必须要先理解JavaScript的变量作用域. 一.变量的作用域无非就是两 ...

  3. javascript 闭包的理解(一)

    过很多谈如何理解闭包的方法,但大多数文章,都是照抄或者解释<Javascript高级程序设计(第三版)>对于闭包的讲解,甚至例程都不约而同的引用高程三181页‘闭包与变量’一节的那个“返回 ...

  4. 关于Javascript 闭包的理解

    一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...

  5. 关于Javascript闭包的理解

    以下内容属个人理解,如有看不明白或漏洞之处,纯属水平不佳,还望见谅. 关于闭包,高程里的定义是:指有权访问另一个函数作用域中的变量的函数.创建闭包最常见的方法就是在一个函数的内部再创建一个函数. 这里 ...

  6. javascript闭包的理解和实例

    所谓闭包,值得是词法表示包括不必要计算的变量的函数,也就是说,该函数可以使用函数外定义的变量. 顺便提示一下: 词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通 ...

  7. Javascript闭包简单理解

    提到闭包,想必大家都早有耳闻,下面说下我的简单理解.平时写代码.第三方框架和组件都或多或少用到了闭包.所以,了解闭包是非常必要的.呵呵... 一.什么是闭包简而言之,就是能够读取其他函数内部变量的函数 ...

  8. javascript 闭包的理解(二)

    // 定义一个User构造函数 function User(properties){ //遍历对象属性,确保它作用域正确 for(var i in properties){ (function(whi ...

  9. javascript 闭包的理解

    1 需要明白概念: 执行环境 变量对象,活动对象 作用域,作用域链 闭包 垃圾处理机制 闭包陷阱

随机推荐

  1. Java笔记(三十)……正则表达式

    概述 符合一定规则的表达式 专门用于操作字符串 特点: 用于一些特定的符号来表示一些代码操作,这样就可以简化书写 所以学习正则表达式,就是在学习一些特殊符号的使用 好处: 可以简化对字符串的复杂操作 ...

  2. 如何使用Visual Studio 2013 创建Azure云应用

    创建 Azure 云服务 Azure 云服务包括执行应用程序所需操作的角色.当你将云服务发布到 Azure 时,每个角色将在云中的虚拟机上运行.有关如何开发 Azure 云服务的详细信息. 创建 Az ...

  3. Storm系列(十五)架构分析之Executor-Spout

    Spout实现mk-threads接口用于创建与Executor对应的消息循环主函数. defmulti mk-threads executor-selector Mk-threads函数的主消息循环 ...

  4. 安装Ambari

    1.yum install pdsh    这玩意一般系统都没带 2.检查下umask码,022是需要的 3.获取ambari的官方repo文件,并安装repo文件 wget http://publi ...

  5. HW2.12

    控制台: import java.util.Scanner; public class Solution { public static void main(String[] args) { Scan ...

  6. UVa10534 - Wavio Sequence(LIS)

    题目大意 给定一个长度为n的整数序列,求个最长子序列(不一定连续),使得该序列的长度为奇数2k+1,前k+1个数严格递增,后k+1个数严格递减.注意,严格递增意味着该序列中的两个相邻数不能相同.n&l ...

  7. 委托demo

    delegate bool Filter(string s); class test { static void Main() { Filter f=new Filter(A); Display(ne ...

  8. Qt5.0.2无法发布问题

    先从bin目录里面找到所缺失的dll,如果出现 可以找到libEGL.dll然后复制过来就可以了.

  9. CSS入门基础

    认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...

  10. Win+R指令(1)

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr. ...