论文部分内容阅读
摘要：该文主要对Web前端开发中经常使用的浏览器端脚本语言JavaScript进行分析，讨论了其中闭包技术的使用，并结合IE浏览器中内存占用情况分析了不当使用闭包技术造成的内存泄漏情况及避免方法。
关键词：JavaScript；闭包；IE浏览器；内存泄漏
中图分类号：TP393文献标识码：A文章编号：1009-3044(2008)35-2134-03
Closure in JavaScript & Analyze of Memory Leak in IE
ZHANG Yun-fan
(Tongji University, Shanghai 201804, China)
Abstract: This essay mainly researched the Web browser script JavaScript which is widely used in Web development and analyzed the usage of Closure technique. It also researched memory leak and its settlement in Internet Explorer according to memory occupancy rate caused by improper usage of Closure.
Key words: javascript; closure; internet explorer; memory leak
1 JavaScript及DOM文档模型概述
1.1 JavaScript概述
JavaScript是NetSpace公司引入Java概念所创造的一门语言。最初创建时是为了动态的修改页面标记，但随着文档对象模型（Document object Model，DOM)的出现，以及国际互联网联盟（W3C）完成对DOM的标准化，欧洲计算机制造协会（ECMA）也将JavaScript纳入ECMAScript规约。
JavaScript是一种解释型语言，它以程序段的形式包含在html代码中，当用户发送请求时，服务器不会对JavaScript进行编译而是直接将其发送到客户端，由浏览器解释，因此JavaScript面临着面对不同浏览器的兼容性问题。
JavaScript是一种基于对象的语言而不是面向对象的，由于它支持一定的面向对象技术，所以很多组织和个人利用此开发出了很多框架和工具，使得JavaScript更加具有面向对象的能力。其中闭包就是在实现这些功能时必须要用到的重要特性。
1.2 文档对象模型（DOM）概述
1.2.1 DOM模型
文档对象模型（Document object Model，DOM)是提供对文档内容、结构、风格进行访问和更新的应用程序接口（API），它是由W3C制定的标准，是一个能让程序和脚本动态访问和更新文档的语言平台。DOM可以分为3个部分:核心、XML和HTML。DOM和 JavaScript没有直接关系，其他语言也可以使用DOM。但是由于DOM的出现，JavaScript成为了一种非常强有力的页面工具。HTML DOM将整个html文档表述成页面里的一个树型结构,其根节点是Document对象，每个元素和属性都是树上的一个节点。比如如下一段简单的html代码，将其表示成HTML DOM的树型结构就如图1所示。
＜html＞
＜head＞
＜title＞你好＜/title＞
＜/head＞
＜body＞
＜h1＞标题＜/h1＞
＜p＞段落＜/p＞
＜/body＞
＜/html＞
1.2.2 使用JavaScript操作HTML DOM
JavaScript可以遍历DOM文档树上的任何节点，动态添加或者删除节点，也可以对节点的属性进行修改或对该节点存值进行修改。JavaScript的操作会立即作用的DOM树上。DOM的部分常见对象如下：
1) Document对象：
Document 对象代表整个 HTML 文档，可用来访问页面中的所有元素。Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。
2) Event对象：
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。
3) Windows对象
Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 ＜body＞ 或 ＜frameset＞ 每次出现时被自动创建。
2 JavaScript中的闭包
2.1 闭包的概念
2.1.1 ECMAJavaScript的垃圾收集
ECMAJavaScript 要求使用自动垃圾收集机制。但是规范没用规定如何实现，所以不同的浏览器实现方式不一样。一般的思想就是模仿JAVA语言，即如果对象不再“可引用（由于不存在对它的引用，使执行代码无法再访问到它）”时，该对象就成为垃圾收集的目标。因而，在将来的某个时刻会将这个对象销毁并将它所占用的一切资源释放，以便操作系统重新利用。同时，若只有两个相互引用的对象，他们不会被第三者引用的话，这两个对象也会被回收。反言之，如果某对象被其他对象引用，引用者又被引用，只要该引用链不形成循环，那么只要最初的引用调用者的生命周期不结束，那么整条链上的变量的生命周期都不会结束。
正常情况下，一个函数的生命周期结束时就会满足垃圾收集条件。此时，作用域中的对象，都不再“可引用”，因此将成为垃圾收集的目标。 然而由于不同浏览器的实现不同，在IE浏览器中对垃圾收集出现了一些问题，如果使用闭包不当，在一些特殊情况下，将会引起内存的泄漏。
2.1.2 闭包的构造
所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
这段话是官方的定义，但是却比较艰涩。下面通过一个简单的例子可以说明如何构建一个闭包：
＜script type="text/javascript"＞
function test(num) {
var sum =100;
/* function Alert(){alert(sum);} */
var Alert = function() { sum = sum + num; alert(sum); }
return Alert;
}
var fun =test(6);
fun();
＜/script＞
这个程序的运行结果是106。
可以看到在函数test里创建了一个内部的匿名函数函数，并用一个变量Alert指向了该匿名函数。该匿名函数也可按注释中的构建，效果是同样的。这样可以看的比较清晰，一个闭包的构成是通过在对一个函数调用的执行环境中返回一个函数对象构成的。比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。或者，直接将这样一个（内部）函数对象的引用指定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。结合垃圾收集机制来看，一个闭包就是当一个函数返回时，一个没有释放资源的栈区，更加通俗的讲就是方法内部变量的生命周期超过了方法本身的生命周期。
关键词：JavaScript；闭包；IE浏览器；内存泄漏
中图分类号：TP393文献标识码：A文章编号：1009-3044(2008)35-2134-03
Closure in JavaScript & Analyze of Memory Leak in IE
ZHANG Yun-fan
(Tongji University, Shanghai 201804, China)
Abstract: This essay mainly researched the Web browser script JavaScript which is widely used in Web development and analyzed the usage of Closure technique. It also researched memory leak and its settlement in Internet Explorer according to memory occupancy rate caused by improper usage of Closure.
Key words: javascript; closure; internet explorer; memory leak
1 JavaScript及DOM文档模型概述
1.1 JavaScript概述
JavaScript是NetSpace公司引入Java概念所创造的一门语言。最初创建时是为了动态的修改页面标记，但随着文档对象模型（Document object Model，DOM)的出现，以及国际互联网联盟（W3C）完成对DOM的标准化，欧洲计算机制造协会（ECMA）也将JavaScript纳入ECMAScript规约。
JavaScript是一种解释型语言，它以程序段的形式包含在html代码中，当用户发送请求时，服务器不会对JavaScript进行编译而是直接将其发送到客户端，由浏览器解释，因此JavaScript面临着面对不同浏览器的兼容性问题。
JavaScript是一种基于对象的语言而不是面向对象的，由于它支持一定的面向对象技术，所以很多组织和个人利用此开发出了很多框架和工具，使得JavaScript更加具有面向对象的能力。其中闭包就是在实现这些功能时必须要用到的重要特性。
1.2 文档对象模型（DOM）概述
1.2.1 DOM模型
文档对象模型（Document object Model，DOM)是提供对文档内容、结构、风格进行访问和更新的应用程序接口（API），它是由W3C制定的标准，是一个能让程序和脚本动态访问和更新文档的语言平台。DOM可以分为3个部分:核心、XML和HTML。DOM和 JavaScript没有直接关系，其他语言也可以使用DOM。但是由于DOM的出现，JavaScript成为了一种非常强有力的页面工具。HTML DOM将整个html文档表述成页面里的一个树型结构,其根节点是Document对象，每个元素和属性都是树上的一个节点。比如如下一段简单的html代码，将其表示成HTML DOM的树型结构就如图1所示。
＜html＞
＜head＞
＜title＞你好＜/title＞
＜/head＞
＜body＞
＜h1＞标题＜/h1＞
＜p＞段落＜/p＞
＜/body＞
＜/html＞
1.2.2 使用JavaScript操作HTML DOM
JavaScript可以遍历DOM文档树上的任何节点，动态添加或者删除节点，也可以对节点的属性进行修改或对该节点存值进行修改。JavaScript的操作会立即作用的DOM树上。DOM的部分常见对象如下：
1) Document对象：
Document 对象代表整个 HTML 文档，可用来访问页面中的所有元素。Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。
2) Event对象：
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。
3) Windows对象
Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 ＜body＞ 或 ＜frameset＞ 每次出现时被自动创建。
2 JavaScript中的闭包
2.1 闭包的概念
2.1.1 ECMAJavaScript的垃圾收集
ECMAJavaScript 要求使用自动垃圾收集机制。但是规范没用规定如何实现，所以不同的浏览器实现方式不一样。一般的思想就是模仿JAVA语言，即如果对象不再“可引用（由于不存在对它的引用，使执行代码无法再访问到它）”时，该对象就成为垃圾收集的目标。因而，在将来的某个时刻会将这个对象销毁并将它所占用的一切资源释放，以便操作系统重新利用。同时，若只有两个相互引用的对象，他们不会被第三者引用的话，这两个对象也会被回收。反言之，如果某对象被其他对象引用，引用者又被引用，只要该引用链不形成循环，那么只要最初的引用调用者的生命周期不结束，那么整条链上的变量的生命周期都不会结束。
正常情况下，一个函数的生命周期结束时就会满足垃圾收集条件。此时，作用域中的对象，都不再“可引用”，因此将成为垃圾收集的目标。 然而由于不同浏览器的实现不同，在IE浏览器中对垃圾收集出现了一些问题，如果使用闭包不当，在一些特殊情况下，将会引起内存的泄漏。
2.1.2 闭包的构造
所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
这段话是官方的定义，但是却比较艰涩。下面通过一个简单的例子可以说明如何构建一个闭包：
＜script type="text/javascript"＞
function test(num) {
var sum =100;
/* function Alert(){alert(sum);} */
var Alert = function() { sum = sum + num; alert(sum); }
return Alert;
}
var fun =test(6);
fun();
＜/script＞
这个程序的运行结果是106。
可以看到在函数test里创建了一个内部的匿名函数函数，并用一个变量Alert指向了该匿名函数。该匿名函数也可按注释中的构建，效果是同样的。这样可以看的比较清晰，一个闭包的构成是通过在对一个函数调用的执行环境中返回一个函数对象构成的。比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。或者，直接将这样一个（内部）函数对象的引用指定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。结合垃圾收集机制来看，一个闭包就是当一个函数返回时，一个没有释放资源的栈区，更加通俗的讲就是方法内部变量的生命周期超过了方法本身的生命周期。