码迷,mamicode.com
首页 > 编程语言 > 详细

深入理解javascript闭包【整理】

时间:2017-08-07 10:11:21      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:onclick   执行环境   全局对象   note   active   资源   span   color   处理器   

原文链接:http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

英文原文:http://www.jibbering.com/faq/faq_notes/closures.html

要成为高级 JavaScript 程序猿,就必须理解闭包。

本文结合 ECMA 262 规范具体解释了闭包的内部工作机制。让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的执行机制其中。真正领会到闭包的实质。

简单介绍

Closure
所谓“闭包”,指的是一个拥有很多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

“闭包”是一个表达式(通常是函数),它具有自由变量以及绑定这些变量的环境(该环境“封闭了”这个表达式)。
(闭包。就是封闭了外部函数作用域中变量的内部函数。可是。假设外部函数不返回这个内部函数。闭包的特性无法显现。假设外部函数返回这个内部函数。那么返回的内部函数就成了名副事实上的闭包。此时,闭包封闭的外部变量就是自由变量,而因为该自由变量存在。外部函数即便返回,其占用的内存也得不到释放。

——译者注,2010年4月3日)

闭包是 ECMAScript (JavaScript)最强大的特性之中的一个,但用好闭包的前提是必须理解闭包。闭包的创建相对easy。人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害。尤其是在比較常见的浏览器环境下。假设想要扬长避短地使用闭包这一特性,则必须了解它们的工作机制。而闭包工作机制的实现非常大程度上有赖于标识符(或者说对象属性)解析过程中作用域的角色。

关于闭包。最简单的描写叙述就是 ECMAScript 同意使用内部函数--即函数定义和函数表达式位于还有一个函数的函数体内。并且。这些内部函数能够訪问它们所在的外部函数中声明的全部局部变量、參数和声明的其它内部函数。

当当中一个这种内部函数在包括它们的外部函数之外被调用时,就会形成闭包。也就是说,内部函数会在外部函数返回后被运行。而当这个内部函数运行时,它仍然必需訪问其外部函数的局部变量、參数以及其它内部函数。这些局部变量、參数和函数声明(最初时)的值是外部函数返回时的值,但也会受到内部函数的影响。

遗憾的是。要适当地理解闭包就必须理解闭包背后执行的机制,以及很多相关的技术细节。尽管本文的前半部分并没有涉及 ECMA 262 规范指定的某些算法,但仍然有很多无法回避或简化的内容。

对于个别熟悉对象属性名解析的人来说。能够跳过相关的内容。可是除非你对闭包也很熟悉,否则最好是不要跳以下几节。

对象属性名解析

ECMAScript 认可两类对象:原生(Native)对象和宿主(Host)对象,当中宿主对象包括一个被称为内置对象的原生对象的子类(ECMA 262 3rd Ed Section 4.3)。原生对象属于语言,而宿主对象由环境提供。比方说可能是文档对象、DOM 等类似的对象。

原生对象具有松散和动态的命名属性(对于某些实现的内置对象子类别而言,动态性是受限的--但这不是太大的问题)。

对象的命名属性用于保存值,该值能够是指向还有一个对象(Objects)的引用(在这个意义上说,函数也是对象),也能够是一些主要的数据类型。比方:String、Number、 Boolean、Null 或 Undefined。当中比較特殊的是 Undefined 类型,由于能够给对象的属性指定一个 Undefined 类型的值。而不会删除对象的对应属性。并且,该属性仅仅是保存着 undefined 值。

以下简要介绍一下怎样设置和读取对象的属性值,并最大程度地体现对应的内部细节。

值的赋予

对象的命名属性能够通过为该命名属性赋值来创建,或又一次赋值。

即。对于:

var objectRef = new Object(); //创建一个普通的 JavaScript 对象。

能够通过以下语句来创建名为 “testNumber” 的属性:

objectRef.testNumber = 5;
/* – 或- */
objectRef["testNumber"] = 5;

在赋值之前,对象中没有“testNumber” 属性,但在赋值后。则创建一个属性。

之后的不论什么赋值语句都不须要再创建这个属性,而仅仅会又一次设置它的值:

objectRef.testNumber = 8;
/* – or:- */
objectRef["testNumber"] = 8;

稍后我们会介绍。Javascript 对象都有原型(prototypes)属性,而这些原型本身也是对象,因而也能够带有命名的属性。可是,原型对象命名属性的作用并不体如今赋值阶段。

相同,在将值赋给其命名属性时,假设对象没有该属性则会创建该命名属性,否则会重设该属性的值。

值的读取

当读取对象的属性值时。原型对象的作用便体现出来。

假设对象的原型中包括属性訪问器(property accessor)所使用的属性名。那么该属性的值就会返回:

/* 为命名属性赋值。假设在赋值前对象没有对应的属性。那么赋值后就会得到一个:*/
objectRef.testNumber = 8;

/* 从属性中读取值 */
var val = objectRef.testNumber;

/* 如今。 – val – 中保存着刚赋给对象命名属性的值 8*/

并且,因为全部对象都有原型。而原型本身也是对象,所以原型也可能有原型,这样就构成了所谓的原型链。原型链终止于链中原型为 null 的对象。Object 构造函数的默认原型就有一个 null 原型,因此:

var objectRef = new Object(); //创建一个普通的 JavaScript 对象。

创建了一个原型为 Object.prototype 的对象,而该原型自身则拥有一个值为 null 的原型。

也就是说, objectRef 的原型链中仅仅包括一个对象-- Object.prototype。但对于以下的代码而言:

/* 创建 – MyObject1 – 类型对象的函数*/
function MyObject1(formalParameter){
/* 给创建的对象加入一个名为 – testNumber – 的属性
并将传递给构造函数的第一个參数指定为该属性的值:*/
this.testNumber = formalParameter;
}
/* 创建 – MyObject2 – 类型对象的函数*/
function MyObject2(formalParameter){
/* 给创建的对象加入一个名为 – testString – 的属性
并将传递给构造函数的第一个參数指定为该属性的值:*/
this.testString = formalParameter;
}

/* 接下来的操作用 MyObject1 类的实例替换了全部与 MyObject2 类的实例相关联的原型。并且,为 MyObject1 构造函数传递了參数 – 8 – ,因而其 – testNumber – 属性被赋予该值:*/
MyObject2.prototype = new MyObject1( 8 );

/* 最后,将一个字符串作为构造函数的第一个參数,创建一个 – MyObject2 – 的实例,并将指向该对象的引用赋给变量 – objectRef – :*/
var objectRef = new MyObject2( “String_Value” );

被变量 objectRef 所引用的 MyObject2 的实例拥有一个原型链。

该链中的第一个对象是在创建后被指定给 MyObject2 构造函数的prototype 属性的 MyObject1 的一个实例。

MyObject1 的实例也有一个原型。即与 Object.prototype 所引用的对象相应的默认的 Object 对象的原型。最后, Object.prototype 有一个值为 null 的原型。因此这条原型链到此结束。

当某个属性訪问器尝试读取由 objectRef 所引用的对象的属性值时,整个原型链都会被搜索。在以下这样的简单的情况下:

var val = objectRef.testString;

由于 objectRef 所引用的 MyObject2 的实例有一个名为“testString”的属性。因此被设置为“String_Value”的该属性的值被赋给了变量 val

可是:

var val = objectRef.testNumber;

则不能从 MyObject2 实例自身中读取到对应的命名属性值。由于该实例没有这个属性。然而,变量 val 的值仍然被设置为 8,而不是未定义--这是由于在该实例中查找对应的命名属性失败后,解释程序会继续检查其原型对象。而该实例的原型对象是 MyObject1 的实例。这个实例有一个名为“testNumber”的属性并且值为 8,所以这个属性訪问器最后会取得值 8。并且。尽管 MyObject1 和 MyObject2 都未定义toString 方法。可是当属性訪问器通过 objectRef 读取 toString 属性的值时:

var val = objectRef.toString;

变量 val 也会被赋予一个函数的引用。这个函数就是在 Object.prototype 的 toString 属性中所保存的函数。

之所以会返回这个函数,是由于发生了搜索 objectRef 原型链的过程。当在作为对象的 objectRef 中发现没有“toString”属性存在时,会搜索其原型对象,而当原型对象中不存在该属性时。则会继续搜索原型的原型。而原型链中终于的原型是 Object.prototype,这个对象确实有一个 toString 方法,因此该方法的引用被返回。

最后:

var val = objectRef.madeUpProperty;

返回 undefined,由于在搜索原型链的过程中。直至 Object.prototype 的原型--null,都没有找到不论什么对象有名为“madeUpPeoperty”的属性,因此终于返回 undefined

不论是在对象或对象的原型中。读取命名属性值的时候仅仅返回首先找到的属性值。而当为对象的命名属性赋值时。假设对象自身不存在该属性则创建对应的属性。

这意味着,假设运行像 objectRef.testNumber = 3 这样一条赋值语句,那么这个 MyObject2 的实例自身也会创建一个名为“testNumber”的属性,而之后不论什么读取该命名属性的尝试都将获得同样的新值。这时候,属性訪问器不会再进一步搜索原型链,但 MyObject1 实例值为 8的“testNumber”属性并没有被改动。给 objectRef 对象的赋值仅仅是遮挡了其原型链中对应的属性。

注意:ECMAScript 为 Object 类型定义了一个内部 [[prototype]] 属性。这个属性不能通过脚本直接訪问,但在属性訪问器解析过程中,则须要用到这个内部 [[prototype]] 属性所引用的对象链--即原型链。能够通过一个公共的 prototype 属性,来对与内部的[[prototype]] 属性相应的原型对象进行赋值或定义。这两者之间的关系在 ECMA 262(3rd edition)中有具体描写叙述,但超出了本文要讨论的范畴。

标识符解析、运行环境和作用域链

运行环境

运行环境是 ECMAScript 规范(ECMA 262 第 3 版)用于定义 ECMAScript 实现必要行为的一个抽象的概念。对怎样实现运行环境,规范没有作规定。但因为运行环境中包括引用规范所定义结构的相关属性,因此运行环境中应该保有(甚至实现)带有属性的对象--即使属性不是公共属性。

全部 JavaScript 代码都是在一个运行环境中被运行的。全局代码(作为内置的JS 文件运行的代码。或者 HTML 页面载入的代码)是在我称之为“全局运行环境”的运行环境中运行的。而对函数的每次调用(
有可能是作为构造函数)相同有关联的运行环境。

通过 eval 函数运行的代码也有截然不同的运行环境,但由于 JavaScript 程序猿在正常情况下一般不会使用 eval,所以这里不作讨论。有关运行环境的具体说明请參阅 ECMA 262(3rd edition)第 10.2 节。

当调用一个 JavaScript 函数时,该函数就会进入对应的运行环境。

假设又调用了另外一个函数(或者递归地调用同一个函数)。则又会创建一个新的运行环境,而且在函数调用期间运行过程都处于该环境中。

当调用的函数返回后。运行过程会返回原始运行环境。

因而,运行中的 JavaScript 代码就构成了一个运行环境栈。

在创建运行环境的过程中,会依照定义的先后顺序完毕一系列操作。

首先,在一个函数的运行环境中,会创建一个“活动”对象。活动对象是规范中规定的第二种机制。之所以称之为对象,是由于它拥有可訪问的命名属性,可是它又不像正常对象那样具有原型(至少没有提前定义的原型),并且不能通过 JavaScript 代码直接引用活动对象。

为函数调用创建运行环境的下一步是创建一个 arguments 对象,这是一个类似数组的对象。它以整数索引的数组成员一一相应地保存着调用函数时所传递的參数。这个对象也有 length 和 callee 属性(这两个属性与我们讨论的内容无关。详见规范)。然后,会为活动对象创建一个名为“arguments”的属性。该属性引用前面创建的 arguments对象。

接着,为运行环境分配作用域。作用域由对象列表(链)组成。

每一个函数对象都有一个内部的 [[scope]] 属性(该属性我们稍后会具体介绍),这个属性也由对象列表(链)组成。

指定给一个函数调用运行环境的作用域,由该函数对象的 [[scope]] 属性所引用的对象列表(链)组成,同一时候,活动对象被加入到该对象列表的顶部(链的前端)。

之后会发生由 ECMA 262 中所谓“可变”对象完毕的“变量实例化”的过程。仅仅只是此时使用活动对象作为可变对象(这里非常重要,请注意:它们是同一个对象)。此时会将函数的形式參数创建为可变对象的命名属性,假设调用函数时传递的參数与形式參数一致。则将对应參数的值赋给这些命名属性(否则。会给命名属性赋 undefined 值)。对于定义的内部函数,会以其声明时所用名称为可变对象创建同名属性。而对应的内部函数则被创建为函数对象并指定给该属性。变量实例化的最后一步是将在函数内部声明的全部局部变量创建为可变对象的命名属性。

依据声明的局部变量创建的可变对象的属性在变量实例化过程中会被赋予 undefined 值。

在运行函数体内的代码、并计算对应的赋值表达式之前不会对局部变量运行真正的实例化。

其实。拥有 arguments 属性的活动对象和拥有与函数局部变量相应的命名属性的可变对象是同一个对象。

因此,能够将标识符arguments 作为函数的局部变量来看待。

最后。要为使用 this keyword而赋值。

假设所赋的值引用一个对象,那么前缀以 this keyword的属性訪问器就是引用该对象的属性。

假设所赋(内部)值是 null,那么 this keyword则引用全局对象。

创建全局运行环境的过程会稍有不同,由于它没有參数,所以不须要通过定义的活动对象来引用这些參数。但全局运行环境也须要一个作用域,而它的作用域链实际上仅仅由一个对象--全局对象--组成。全局运行环境也会有变量实例化的过程。它的内部函数就是涉及大部分 JavaScript 代码的、常规的顶级函数声明。

并且,在变量实例化过程中全局对象就是可变对象,这就是为什么全局性声明的函数是全局对象属性的原因。全局性声明的变量相同如此。

全局运行环境也会使用 this 对象来引用全局对象。

作用域链与 [[scope]]

调用函数时创建的运行环境会包括一个作用域链,这个作用域链是通过将该运行环境的活动(可变)对象加入到保存于所调用函数对象的[[scope]] 属性中的作用域链前端而构成的。所以。理解函数对象内部的 [[scope]] 属性的定义过程至关重要。

在 ECMAScript 中。函数也是对象。函数对象在变量实例化过程中会依据函数声明来创建,或者是在计算函数表达式或调用 Function 构造函数时创建。

通过调用 Function 构造函数创建的函数对象。其内部的 [[scope]] 属性引用的作用域链中始终仅仅包括全局对象。

通过函数声明或函数表达式创建的函数对象,其内部的 [[scope]] 属性引用的则是创建它们的运行环境的作用域链。

在最简单的情况下,比方声明例如以下全局函数:-

function exampleFunction(formalParameter){
… // 函数体内的代码
}

- 当为创建全局运行环境而进行变量实例化时。会依据上面的函数声明创建对应的函数对象。由于全局运行环境的作用域链中仅仅包括全局对象,所以它就给自己创建的、并以名为“exampleFunction”的属性引用的这个函数对象的内部 [[scope]] 属性,赋予了仅仅包括全局对象的作用域链。

当在全局环境中计算函数表达式时,也会发生类似的指定作用域链的过程:-

var exampleFuncRef = function(){
… // 函数体代码
}

在这样的情况下。不同的是在全局运行环境的变量实例化过程中。会先为全局对象创建一个命名属性。而在计算赋值语句之前,临时不会创建函数对象。也不会将该函数对象的引用指定给全局对象的命名属性。

可是。终于还是会在全局运行环境中创建这个函数对象(当计算函数表达式时。译者注),而为这个创建的函数对象的 [[scope]] 属性指定的作用域链中仍然仅仅包括全局对象。内部的函数声明或表达式会导致在包括它们的外部函数的运行环境中创建对应的函数对象。因此这些函数对象的作用域链会略微复杂一些。在以下的代码中,先定义了一个带有内部函数声明的外部函数。然后调用外部函数:

 /* 创建全局变量 - y - 它引用一个对象:- */
var y = {x:5}; // 带有一个属性 - x - 的对象直接量
function exampleFuncWith(){
  var z;
  /* 将全局对象 - y - 引用的对象加入到作用域链的前端:- */
  with(y){
  /* 对函数表达式求值,以创建函数对象并将该函数对象的引用指定给局部变量 - z - :- */
  z = function(){
  ... // 内部函数表达式中的代码;
  }
}
...
}
/* 运行 - exampleFuncWith - 函数:- */

exampleFuncWith();在调用 exampleFuncWith 函数创建的运行环境中包括一个由其活动对象后跟全局对象构成的作用域链。

而在运行 with语句时,又会把全局变量 y 引用的对象加入到这个作用域链的前端。

在对当中的函数表达式求值的过程中,所创建函数对象的 [[scope]]属性与创建它的运行环境的作用域保持一致--即,该属性会引用一个由对象 y 后跟调用外部函数时所创建运行环境的活动对象,后跟全局对象的作用域链。

当与 with 语句相关的语句块运行结束时。运行环境的作用域得以恢复(y 会被移除)。可是已经创建的函数对象(z。译者注)的[[scope]] 属性所引用的作用域链中位于最前面的仍然是对象 y

例 3:包装相关的功能

闭包能够用于创建额外的作用域,通过该作用域能够将相关的和具有依赖性的代码组织起来。以便将意外交互的风险降到最低。如果有一个用于构建字符串的函数,为了避免反复性的连接操作(和创建众多的中间字符串),我们的愿望是使用一个数组按顺序来存储字符串的各个部分,然后再使用 Array.prototype.join 方法(以空字符串作为其參数)输出结果。这个数组将作为输出的缓冲器,可是将数组作为函数的局部变量又会导致在每次调用函数时都又一次创建一个新数组,这在每次调用函数时仅仅又一次指定数组中的可变内容的情况下并非必要的。

一种解决方式是将这个数组声明为全局变量,这样就能够重用这个数组,而不必每次都建立新数组。

但这个方法的结果是,除了引用函数的全局变量会使用这个缓冲数组外,还会多出一个全局属性引用数组自身。如此不仅使代码变得不easy管理。并且,假设要在其它地方使用这个数组时,开发人员必需要再次定义函数和数组。

这样一来,也使得代码不easy与其它代码整合,由于此时不仅要保证所使用的函数名在全局命名空间中是唯一的,并且还要保证函数所依赖的数组在全局命名空间中也必须是唯一的。

而通过闭包可以使作为缓冲器的数组与依赖它的函数关联起来(优雅地打包),同一时候也可以维持在全局命名空间外指定的缓冲数组的属性名,免除了名称冲突和意外交互的危急。

当中的关键技巧在于通过运行一个单行(in-line)函数表达式创建一个额外的运行环境,而将该函数表达式返回的内部函数作为在外部代码中使用的函数。此时,缓冲数组被定义为函数表达式的一个局部变量。

这个函数表达式仅仅需运行一次,而数组也仅仅需创建一次,就能够供依赖它的函数反复使用。

以下的代码定义了一个函数,这个函数用于返回一个 HTML 字符串,当中大部分内容都是常量。但这些常量字符序列中须要穿插一些可变的信息。而可变的信息由调用函数时传递的參数提供。

通过运行单行函数表达式返回一个内部函数,并将返回的函数赋给一个全局变量,因此这个函数也能够称为全局函数。

而缓冲数组被定义为外部函数表达式的一个局部变量。它不会暴露在全局命名空间中。并且不管什么时候调用依赖它的函数都不须要又一次创建这个数组。

/* 声明一个全局变量 - getImgInPositionedDivHtml -
并将一次调用一个外部函数表达式返回的内部函数赋给它。      

   这个内部函数会返回一个用于表示绝对定位的 DIV 元素
   包围着一个 IMG 元素 的 HTML 字符串,这样一来,
   全部可变的属性值都由调用该函数时的參数提供:
*/
var getImgInPositionedDivHtml = (function(){
    /* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。
     这个数组仅仅会被创建一次,生成的数组实例对内部函数而言永远是可用的
     因此,可供每次调用这个内部函数时使用。      

    当中的空字符串用作数据占位符,对应的数据
    将由内部函数插入到这个数组中:
    */
    var buffAr = [
        ‘<div id="‘,
        ‘‘,   //index 1, DIV ID 属性
        ‘" style="position:absolute;top:‘,
        ‘‘,   //index 3, DIV 顶部位置
        ‘px;left:‘,
        ‘‘,   //index 5, DIV 左端位置
        ‘px;width:‘,
        ‘‘,   //index 7, DIV 宽度
        ‘px;height:‘,
        ‘‘,   //index 9, DIV 高度
        ‘px;overflow:hidden;\"><img src=\"‘,
        ‘‘,   //index 11, IMG URL
        ‘\" width=\"‘,
        ‘‘,   //index 13, IMG 宽度
        ‘\" height=\"‘,
        ‘‘,   //index 15, IMG 高度
        ‘\" alt=\"‘,
        ‘‘,   //index 17, IMG alt 文本内容
        ‘\"></div>‘
    ];
    /* 返回作为对函数表达式求值后结果的内部函数对象。
     这个内部函数就是每次调用运行的函数
	- getImgInPositionedDivHtml( ... ) -
    */
    return (function(url, id, width, height, top, left, altText){
        /* 将不同的參数插入到缓冲数组对应的位置:*/
        buffAr[1] = id;
        buffAr[3] = top;
        buffAr[5] = left;
        buffAr[13] = (buffAr[7] = width);
        buffAr[15] = (buffAr[9] = height);
        buffAr[11] = url;
        buffAr[17] = altText;
        /* 返回通过使用空字符串(相当于将数组元素连接起来)
	连接数组每一个元素后形成的字符串:
        */
        return buffAr.join(‘‘);
    }); //:内部函数表达式结束。
})();
/*^^- :单行外部函数表达式。*/

假设一个函数依赖于还有一(或多)个其它函数,而其它函数又没有必要被其它代码直接调用。那么能够运用同样的技术来包装这些函数,而通过一个公开暴露的函数来调用它们。

这样。就将一个复杂的多函数处理过程封装成了一个具有移植性的代码单元。

其它样例

有关闭包的一个可能是最广为人知的应用是 Douglas Crockford’s technique for the emulation of private instance variables in ECMAScript objects

这样的应用方式能够扩展到各种嵌套包括的可訪问性(或可见性)的作用域结构,包括 the emulation of private static members for ECMAScript objects

闭包可能的用途是无限的。可能理解其工作原理才是把握怎样使用它的最好指南。

意外的闭包

在创建可訪问的内部函数的函数体之外解析该内部函数就会构成闭包。这表明闭包非常easy创建,但这样一来可能会导致一种结果。即没有认识到闭包是一种语言特性的 JavaScript 作者,会依照内部函数能完毕多种任务的想法来使用内部函数。

但他们对使用内部函数的结果并不明了,并且根本意识不到创建了闭包。或者那样做意味着什么。

正例如以下一节谈到 IE 中内存泄漏问题时所提及的,意外创建的闭包可能导致严重的负面效应,并且也会影响到代码的性能。问题不在于闭包本身,假设可以真正做到慎重地使用它们,反而会有助于创建高效的代码。换句话说。使用内部函数会影响到效率。

使用内部函数最常见的一种情况就是将其作为 DOM 元素的事件处理器。

比如,以下的代码用于向一个链接元素加入 onclick 事件处理器:

/* 定义一个全局变量,通过以下的函数将它的值
   作为查询字符串的一部分加入到链接的 - href - 中:
*/
var quantaty = 5;
/* 当给这个函数传递一个链接(作为函数中的參数 - linkRef -)时。
   会将一个 onclick 事件处理器指定给该链接,该事件处理器
   将全局变量 - quantaty - 的值作为字符串加入到链接的 - href -
   属性中。然后返回 true 使该链接在单击后定位到由  - href -
   属性包括的查询字符串指定的资源:
*/
function addGlobalQueryOnClick(linkRef){
    /* 假设能够将參数 - linkRef - 通过类型转换为 ture
      (说明它引用了一个对象):
    */
    if(linkRef){
        /* 对一个函数表达式求值,并将对该函数对象的引用
           指定给这个链接元素的 onclick 事件处理器:
        */
        linkRef.onclick = function(){
            /* 这个内部函数表达式将查询字符串
               加入到附加事件处理器的元素的 - href - 属性中:
            */
            this.href += (‘?quantaty=‘+escape(quantaty));
            return true;
        };
    }
}

不管什么时候调用 addGlobalQueryOnClick 函数。都会创建一个新的内部函数(通过赋值构成了闭包)。

从效率的角度上看,假设仅仅是调用一两次 addGlobalQueryOnClick 函数并没有什么大的妨碍。但假设频繁使用该函数,就会导致创建很多截然不同的函数对象(每对内部函数表达式求一次值。就会产生一个新的函数对象)。

上面样例中的代码没有关注内部函数在创建它的函数外部能够訪问(或者说构成了闭包)这一事实。实际上。相同的效果能够通过还有一种方式来完毕。即单独地定义一个用于事件处理器的函数。然后将该函数的引用指定给元素的事件处理属性。这样,仅仅需创建一个函数对象。而全部使用相同事件处理器的元素都能够共享对这个函数的引用:

/* 定义一个全局变量,通过以下的函数将它的值
   作为查询字符串的一部分加入到链接的 - href - 中:
*/
var quantaty = 5;
/* 当把一个链接(作为函数中的參数 - linkRef -)传递给这个函数时。
   会给这个链接加入一个 onclick 事件处理器,该事件处理器会
   将全局变量  - quantaty - 的值作为查询字符串的一部分加入到
   链接的 - href -  中,然后返回 true,以便单击链接时定位到由
   作为 - href - 属性值的查询字符串所指定的资源:
*/
function addGlobalQueryOnClick(linkRef){
    /* 假设 - linkRef - 參数可以通过类型转换为 true
    (说明它引用了一个对象):
    */
    if(linkRef){
        /* 将一个对全局函数的引用指定给这个链接
           的事件处理属性。使函数成为链接元素的事件处理器:
        */
        linkRef.onclick = forAddQueryOnClick;
    }
}
/* 声明一个全局函数,作为链接元素的事件处理器,
   这个函数将一个全局变量的值作为要加入事件处理器的
   链接元素的  - href - 值的一部分:
*/
function forAddQueryOnClick(){
    this.href += (‘?quantaty=‘+escape(quantaty));
    return true;
}

在上面样例的第一个版本号中。内部函数并没有作为闭包发挥应有的作用。在那种情况下,反而是不使用闭包更有效率,由于不用反复创建很多本质上同样的函数对象。

类似地考量相同适用于对象的构造函数。与以下代码中的构造函数框架类似的代码并不罕见:

function ExampleConst(param){
    /* 通过对函数表达式求值创建对象的方法,
      并将求值所得的函数对象的引用赋给要创建对象的属性:
    */
    this.method1 = function(){
        ... // 方法体。
    };
    this.method2 = function(){
        ... // 方法体。

}; this.method3 = function(){ ... // 方法体。

}; /* 把构造函数的參数赋给对象的一个属性:*/ this.publicProp = param; }

每当通过 new ExampleConst(n) 使用这个构造函数创建一个对象时,都会创建一组新的、作为对象方法的函数对象。因此。创建的对象实例越多,对应的函数对象也就越多。

Douglas Crockford 提出的模仿 JavaScript 对象私有成员的技术。就利用了将对内部函数的引用指定给在构造函数中构造对象的公共属性而形成的闭包。

假设对象的方法没有利用在构造函数中形成的闭包,那么在实例化每一个对象时创建的多个函数对象。会使实例化过程变慢。并且将有很多其它的资源被占用。以满足创建很多其它函数对象的须要。

这那种情况下,仅仅创建一次函数对象,并把它们指定给构造函数 prototype 的对应属性显然更有效率。

这样一来。它们就能被构造函数创建的全部对象共享了:

function ExampleConst(param){
    /* 将构造函数的參数赋给对象的一个属性:*/
    this.publicProp = param;
}
/* 通过对函数表达式求值。并将结果函数对象的引用
      指定给构造函数原型的对应属性来创建对象的方法:
*/
ExampleConst.prototype.method1 = function(){
    ... // 方法体。
};
ExampleConst.prototype.method2 = function(){
    ... // 方法体。

}; ExampleConst.prototype.method3 = function(){ ... // 方法体。 };

Internet Explorer 的内存泄漏问题

Internet Explorer Web 浏览器(在 IE 4 到 IE 6 中核实)的垃圾收集系统中存在一个问题,即假设 ECMAScript 和某些宿主对象构成了 “循环引用”。那么这些对象将不会被当作垃圾收集。此时所谓的宿主对象指的是不论什么 DOM 节点(包括 document 对象及其后代元素)和 ActiveX 对象。假设在一个循环引用中包括了一或多个这种对象,那么这些对象直到浏览器关闭都不会被释放。而它们所占用的内存相同在浏览器关闭之前都不会交回系统重用。

当两个或多个对象以首尾相连的方式相互引用时,就构成了循环引用。

比方对象 1 的一个属性引用了对象 2 ,对象 2 的一个属性引用了对象 3,而对象 3 的一个属性又引用了对象 1。对于纯粹的 ECMAScript 对象而言,仅仅要没有其它对象引用对象 1、2、3。也就是说它们仅仅是相互之间的引用,那么仍然会被垃圾收集系统识别并处理。可是。在 Internet Explorer 中。假设循环引用中的不论什么对象是 DOM 节点或者 ActiveX 对象,垃圾收集系统则不会发现它们之间的循环关系与系统中的其它对象是隔离的并释放它们。终于它们将被保留在内存中,直到浏览器关闭。

闭包很easy构成循环引用。

假设一个构成闭包的函数对象被指定给,比方一个 DOM 节点的事件处理器,而对该节点的引用又被指定给函数对象作用域中的一个活动(或可变)对象,那么就存在一个循环引用。DOM_Node.onevent ->function_object.[[scope]] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。形成这样一个循环引用是轻而易举的。并且略微浏览一下包括类似循环引用代码的站点(一般会出如今站点的每一个页面中),就会消耗大量(甚至所有)系统内存。

多加注意能够避免形成循环引用,而在无法避免时,也能够使用补偿的方法。比方使用 IE 的 onunload 事件来来清空(null)事件处理函数的引用。时刻意识到这个问题并理解闭包的工作机制是在 IE 中避免此类问题的关键。

【注】本文内容讲的非常深入,贴出来,一是自己学习以备后查,二是分享给大家,回想一下基础的知识。

顺便多想一下。用了这么长时间的javascript,你真的了解吗?

深入理解javascript闭包【整理】

标签:onclick   执行环境   全局对象   note   active   资源   span   color   处理器   

原文地址:http://www.cnblogs.com/yxysuanfa/p/7297451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!