JavaScript基础学习之-javascript权威指南--8.6函数闭包

一、什么是闭包?

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

其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:

function a() {
 var i = 0;
 function b() { alert(++i); }
 return b;
}
var c = a();
c();

这段代码有两个特点:

1、函数b嵌套在函数a内部;

2、函数a返回函数b。

  这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:

  当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

  让我们说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新 的值,和上次那次调用的是各自独立的。

二、闭包有什么作用?

  简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。

在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

  那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界

  如果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。
当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”,如果a是一个全局函数,则scope chain中只有window对象。
当执行函数a的时候,a会进入相应的执行环境(excution context)。
在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。
然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。
下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。
最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。

到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象

当在函数b中访问一个变量的时候,搜索顺序是:
先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依次查找,直到找到为止。
如果函数b存在prototype原型对象,则在查找完自身的活动对象后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。
如果整个作用域链上都无法找到,则返回undefined。

小结,本段中提到了两个重要的词语:函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定,而不是在执行的时候确定(参看步骤1和3)。
用一段代码来说
function f(x) {
var g = function () { return x; }
return g;
}
var h = f(1);
alert(h());
变量h指向了f中的那个匿名函数(由g返回)。
假设函数h的作用域是在执行alert(h())确定的,那么此时h的作用域链是:h的活动对象->alert的活动对象->window对象。
假设函数h的作用域是在定义时确定的,就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候,h的作用域链为:h的活动对象->f的活动对象->window对象。

如果第一种假设成立,那输出值就是undefined;如果第二种假设成立,输出值则为1。

运行结果证明了第2个假设是正确的,说明函数的作用域确实是在定义这个函数的时候就已经确定了。

四、执行环境 及 作用域

4-1
  执行环境execution context简称环境,定义了变量和函数有权访问的其他数据,并决定他们的各自行为。
  ①每个执行环境都有一个变量对象variable object,保存环境定义的所有变量和函数。该对象无法编码访问,但解析器在处理数据时会在后台使用它。
   全局变量对象是最外围的一个执行环境。在Web浏览器中被认为是window对象,故所有全局对象和函数都是window对象的属性和方法创建的。
   执行环境中的代码执行完后,该环境就被销毁,保存其中的变量和函数定义也随之销毁。

  ②代码在环境中执行时,会创建变量对象的一个作用域链scope chain,用于保证对执行环境有权访问的所有变量和函数的有序访问。
   作用域链前端,始终是当前执行的代码所在环境的变量对象。当该环境为函数时,会将活动对象作为变量对象。
   活动对象最开始只包含一个变量,即argumnt对象。
   作用域链中的下一个变量对象来自包含环境,而下一个变量对象来自下一个包含环境,直至延续到全局执行环境。

  ③标识符解析:从前段开始,沿着作用域链一级一级地搜索标识符的过程。【找不到通常会抛出异常发生】

4-2.函数创建、执行时:

function compare(val1,val2){
     if(val1<val2){
        return -1;
    }else if(val1>val2){
        return 1;
    }else{
        return 0;
    };
}
var result = compare(5 , 10);
作用域链是定义函数时创建
执行环境是调用函数时创建

  ①创建函数compare()时,会创建一个预先包含全局变量对象的作用域链,并保存在内部[[scope]]属性中。
  ②局部函数compare()的变量对象,只在函数执行的过程中存在。
   当调用函数时,会创建一个执行环境,再通过复制函数的[[scope]]属性中的对象 构建起执行环境的作用域链。
  ③第一次调用函数时,如compare(),会创建一个包含this、argument、val1 和 val2的活动对象。
  ④全局执行环境的变量对象(包括this、result、compare)在compare()执行环境的作用域链中处于第二位。
  ⑤作用域链 本质是一个指向变量对象的指针列表,只引用但不实际包含变量对象。
  ⑥无论什么时候在函数中访问一个变量,都会行作用域链中搜索具有相应名字的变量。

4-3.闭包的作用域链

  在另外一个函数内部定义的函数会将包含函数的活动对象添加到它的作用域链中。
  ①将函数对象赋值null,等于通知垃圾回收例程将其清除,随着函数作用域链被销毁,其作用域链(不除了全局作用域)也会被安全销毁。
  ②由于闭包会携带包含函数的作用域,所以会比其他函数占用更多内存。

4-4.闭包与变量

  作用域链的一个副作用:闭包只能取得包含函数中任何变量的最后一个值。

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}

  ①createFunctions()函数,将10个闭包赋值给数组result,再返回result数组。每个闭包都返回自己的索引,但实际上都返回10。
   因为每个函数(闭包)的作用域链中都保存着createFunctions()函数的活动对象,所以它们引用的是同一个变量i,当createFunctions函数执行完后i的值10,故闭包中的i也都为10。
  ②解决办法,不使用闭包,创建一个匿名函数,将i值赋值给其参数:

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(num){
            return function(){
                return num;
            };
        }(i);
    }
    return result;
}

  创建一个每次循环都会执行一次的匿名函数:将每次循环时包围函数的i值作为参数,存入匿名函数中。因为函数参数是按值传递的,而非引用,所以每个匿名函数中的num值 都为每此循环时i值的一个副本。

4-3.this对象

  this对象是在运行时基于函数的执行环境绑定的。
    在全局函数中,this等于window;当函数被某对象调用时,this为该对象。
    匿名函数的执行环境有全局性,其this对象通常指window。通过call()或spply()改变函数执行环境时,this指向其对象。
  ①每个函数在被调用时,都会自动取得两个特殊变量:this和argument。内部函数在搜索这两个变量时,只会搜索到期活动对象为止,永远不可能访问外部函数的这两个变量。
   不过将外部作用域的this对象保存在一个闭包能访问的变量里,就可让闭包访问该对象。

闭包 访问外部函数的this对象

var name = "The Window";

var object = {
    name : "My Object",

    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
};

alert(object.getNameFunc()());  //"MyObject"

包围函数的argument对象 也可通过此方法被闭包访问。

时间: 2024-10-11 06:04:30

JavaScript基础学习之-javascript权威指南--8.6函数闭包的相关文章

JavaScript基础学习之-JavaScript权威指南--8.7函数属性方法构造函数

函数属性.方法和构造函数 一.函数属性 函数是js中特殊的对象,可以拥有属性. funcation.length属性:代表形参的长度,只读属性,不允许更改 arguments.length代表的是实参长度 prototype属性:每个函数都有一个prototype属性,当把函数当做构造函数时,新创建的对象会从原型对象上继承属性. 二.函数方法 与其他语言不同,ECMAScript函数不介意传递进来多少个参数,也不在乎是什么类型.因为实参在内部是用一个类数组来表示的,函数接收到的始终是个类数组.

JavaScript基础学习之-JavaScript权威指南--3.1数字

数字 JavaScript不区分整数和浮点数,所有数字都是浮点数. 数字前加负号就得到相反数. 3.1.1整形直接量 十六进制:0X或是0x 不做标记:十进制 八进制:0 备注:某写JavaScript支持八进制. 3.1.2浮点型直接量 1.2E-3  =  1.2 * 10 的负3次 3.1.3算术运算 溢出:运算结果超出了数字能表示的结果,有上溢和下溢. 下溢:运算结果无限接近0. 0做除数:结果是无穷大或是负无穷大. 0/0 NaN 无穷大/无穷大 NaN 负数开方 NaN 不是数字或是

JavaScript基础学习之-JavaScript权威指南-3.4null和undefined

null和undefined比较 null是JavaScript关键字,表示非对象. undefined表示没有值,说明这个值不存在或是没有初始化. 相同点 不同点 自有类型唯一值 null是对象,undefined是保留字 没有属性和方法 null在参与数学运算中转化成0,undefined在数学运算中无法转化或是转化成NaN ==认为相等,===认为不等 null !==undefined //true 都是假值,在布尔值变量表示值相同 null是空对象,undefined是window的属

JavaScript基础学习之-JavaScript权威指南-3.6包装对象

JavaScript对象是一种复合值,是已知属性或是命名值的集合. 我们看到字符串也同样有属性和方法. var s = "Test"; var len=s.length; 我们知道在JavaScript中像上面这样声明的字符串不是对象,但既然这里的s不是对象,为什么会有length的属性呢? 原因是在JavaScript中只要引用了字符串(数字.布尔值也是一样的)的属性,JS就会将字符串通过调用new String(s)的方式转换成对象,这个对象继承了字符串的方法,并被用来处理属性的引

JavaScript基础学习之-JavaScript权威指南-3.5全局对象

全局对象 全局对象的属性可以直接用. JavaScript解释器启动或是任何web浏览器加载新页面的时候,都会创建新的全局对象,并给它一组定义的初始属性: 构造函数 描述 Date 日期对象 RegExp 正则表达式对象 String 字符串对象 Object object对象 Array 数组对象 全局对象 描述 Math 数学类计算 JSON json 全局函数 描述 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码的 URI 组件.

JavaScript基础学习之-JavaScript权威指南--3.8.3对象转换成原始值

对象转换成原始值 对象到布尔:比较简单所有对象到布尔都是true,包括包装类new Boolean(false)是一个对象而不是原始值,它将转换为true 对象到数字,对象到字符串比较复杂一些.注意这里讨论的是本地对象,不包含宿主对象(例如浏览器定义的对象) 所有对象继承了两个转换方法. 第一种toString() 它的作用是返回一个反映这个对象的字符串.默认的toString()方法并不会返回一个有趣的值. 很多类定义了特定版本的toString()方法: 数组的toString()方法将每个

JavaScript基础学习之-JavaScript权威指南--8.1-8.4函数

第八章函数 函数是JavaScript中很重要的一个章节,懂得这个章节就可以轻松阅读别人的代码,会熟悉一些不常用的代码写法. 按照难易程度控制文章的长度. 前言: 函数是一段只定义一次,可能被执行或调用任意次的JavaScript代码. 若一个函数挂载在一个对象上,作为对象的属性,称为对象的方法.当通过这个对象来调用函数时,该对象就是此次调用的上下文,函数会隐式自动获得上下文对象. JavaScript中函数即对象,程序可以任意操控. JavaScript的函数可以嵌套在其他函数中定义,这样嵌套

JavaScript基础学习之-JavaScript权威指南--3.2文本

文本 字符串是16位值组成的不可变的有序序列. 字符串的长度是16位值的个数. 3.2.1字符串直接量 字符串直接量:单引号或是双引号里的内容. ECMA3中字符串必须写在一行中. ECMA5中可以用"\"拆分很多行.

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q