ActionScript 3 日积月累之二

摒弃了attachMovie 之后的AS3，采用了类似DOM 的操作方式。addChild、removeChild 、getChildAt 等方法开始成为AS3中显示（在屏幕上渲染）、操作图形的主要方法。由于AS1、AS2完全是依赖于attchMovie 的思想，因此对于传统Flash开发人员来说，转变到新的addChild 的确需要下一番功夫。

由于新的“DisplayObject”在内存的使用上非常“敏感”。往往由于不良的编程习惯会造成不必要的内存泄漏，因此，我们不得不比AS1、 AS2时代更加深入到内存管理了。我想，每一个Flash开发人员，包括我自己，都应该花一番功夫仔细体会“内存管理”这几个字的含义。毕竟我们学习 AS3是为了开发比AS1、2时代更加先进、高效而且内存占用小的应用程序，如果还是开发一些简单的应用，也就失去我们每一个人使用AS3的意义了。

我觉得，由于GC是Flash 应用程序内存管理的核心，我应该先从AS3中的Garbage Collector（简称GC）开始说起。AS3的GC功能比AS1、2中的要强大的多。然而，强大的同时，也带来了一定程度的复杂性。但是也不至于非常复杂，我觉得比C++等传统语言要容易掌握得多。

在研究内存如何回收之前，先说一下变量的创建：

在Flash中，我们每建立一个非原生变量时（Boolean, String, Number, uint, int 这些是原生变量），这个变量名只是一个reference（指向，有时候也成为“引用”）而已，而并非这个变量本身。例如：
var a:int = 5; //a就是5
var b:int = a; //b是a，也就是5
a = 4;
trace(b); // 是5，而不是4！
//改变b的值，a不发生变化。反之亦然
var c:Object = {name:”aw”, blog:”www.awflasher.com/blog”}; //c只是指向一个内部的Object，为了描述方便，称其为“O”
var d:Object = c; //d指向c，指向了同一个Object“O”
c.name = “bw”
trace(d.name); //不是aw，而是bw了
//改变c也好，改变d也罢，其实是改变了那个“O”，因此改变c的时候，d的值也就变了。因此d.name已经被改变为了“bw”。

首先，明确一点，GC会按照一定的时间周期进行内存清理（memory sweep）。因此不要因为delete掉一个object后检查System.totalMemory 内存就没有反应而怀疑GC是否正常。那么GC为什么要按照一定的时间周期进行清理呢。这还要得从GC的具体工作原理说起。

GC的两个回收体系：
1、“Reference Counting” - 引用计数器
这个体系是自从AS1时代就有的体系，它的工作原理非常简单：系统计算每一个对象被指向，或者说引用的次数。比如
var a:Object = {name:”aw”, blog:”www.awflasher.com/blog”};

这时候，这个Object（我们仍然称为“O”），有一次引用，它的引用计数器为1（来自a）。我们再建立一个对象b，并指向到a：
var b:Object = a;

这时候“O”引用计数器变为了2（来自a、b）。
我们删除一个，比如先删除b：
delete b;
这时候引用计数器为（2-1=1）1，GC不操作
再删除另外一个a：
delete a;“O”引用计数器变为（1-1=0）0，GC出面干掉这个对象。
这套体系很轻便，CPU压力较小。但是它也有缺陷。当我们的对象内部互相引用的时候，麻烦就来了。例如：
var a:Object = {name:”aw”, description:”unknown”};

// 建立一个对象a，仍然假设内部对象为“O”，这时O的引用次数为1
var b:Object = {nameObj:a, url:”awflasher.com”};
// b引用了a，同时创建了新的内部对象“P”。这时O的引用次数为2，P为1
a.myDescription = b;
// a的myDescription属性指向到了b。这样，P的引用次数也为2了。
// 是不是有点头晕？静下来，画个图慢慢看看：）
delete a;
delete b;
两次delete操作后，O、P的引用次数都是1，它们将继续占用你的内存。“Reference Counting” 体系无能为力了。

2、“Mark Sweeping” - 标记清除法则

GC的第一种机制“Reference Counting”，在FlashPlayer8之前是GC唯一的机制。FlashPlayer6和7由于引入了复杂的OOP开发模式，尤其是7引入了类似Java、C++等强大OOP语言的语法。利用Flash设计的复杂项目越来越多。由于Flash开发人员大多不了解GC，而Java、C++的开发人员又已经习惯了强大的GC（无论是自动的还是手动的）。因此FlashPlayer6、7的内存问题开始浮现出来。

Okay，Flash Player8引入了新的“Mark Sweeping”机制。我想这也是当年Macromedia（Adobe）基于退出Player8的原因吧！（还记得当年Flash8的介绍视频么，效率提高是一个革命性的改进）

下面就来讲述“Mark Sweeping” - 标记清除法则的工作原理。
FlashPlayer会从root开始，遍历系统的每一个变量，并对有指向的对象之间，记录一次联系。在遍历结束之后，凡是与root不相联系的对象，被FlashPlayer无情地干掉。

Okay，回到刚才的例子，当我们delete a，并delete b之后，root与O、P就划清了界线。这时候，GC就可以进行一次肃清了。然而，由于这种“Mark Sweeping”要遍历所有的对象，因此非常消耗资源。这也就回到了当初的问题：“GC为什么要按照一定的时间周期进行清理“ - 因为不能给CPU造成太大的负担。

我个人猜测，GC的内部清除策略应该是在某一次事件（例如delete）发生后，在CPU比较空闲、RAM分配相对合理的情况下执行的。

Okay，不要以为有了“Mark Sweeping”就万事大吉了。由于GC不会即时进行，因此你的对象会在一段时间内“阴魂不散”！对于一个追求完美的开发人员来说，这意味着它们内部的某些机制会在被删除之后继续工作：AS语句会继续执行、声音会继续播放、事件会继续触发！

KirupaForum有网友说，“All you got to do is pray the garbage collector doesn’t break down.”，确实，如果一个应用程序要运行上一个多小时，那么慢慢流逝的内存会让你的用户对你的产品失望（例如游戏）。因此我们需要有一个良好的资源管理策略。

ActionScript 3 日积月累之一

本文是我（aw）在整理了相关文档和讨论之后，结合自己的亲自实验总结出来的一些经验和心得。我尽量描述详尽，避免模糊概念，当然也希望所有看官提出批评意见。为了表述方便，其中术语不限定语言，如我可能会一会儿用class，一会儿用类。

面向对象的难点部分就是理解变量作用域修饰符（modifier）其实也就是面向对象中我们已经熟悉的public、protected、private等等。本文还深入讨论了ActionScript3中新增的internal 等概念。下面我依次列出：

一、关于package以及internal
package，用“形而上学”的方式理解，就是物理目录下的类集合。在AS2中只需要保证文件系统的路径匹配，然后用类似“import com.awflasher.someUtils”的方法导入即可。而AS3则要求您在所有的类中声明package关键词。package的大括号对 “{}”内，我们只能定义一个类，我们可以在这个大括号外面定义一些辅助类，不过这些类只能被当前这个类（你在package大括号对内定义的类）访问。当然，一个package大括号对内只有一个类，这并不代表一个package内只有一个类。你可以在同一目录下定义多个属于该package（指代这个目录）的类。它的意义绝不是简单的“类文件集合容器”，而是一个让各种应该协同工作的类集中到一起的项目包。值得一提的是，所谓“协同工作”是指至少有一个class要引入其他一些class 来进行功能设计，而这时候采用internal修饰可以省去很多getters和setters。我自己回忆起在湖南卫视的项目中用AS2开发的 Vplayer，两个类AVCore和AVControl就有很多getter和setter，搞的特别麻烦。

internal类似public，但限定在一个 package内了。在同一个package 内的类可以访问同一个package 内其他类的internal 变量，而其他包内的类无法访问。 package 与类的继承性毫无关系，比如TextField 和Sprite、MovieClip 都继承自DisplayObject 类，但TextField属于 flash.text包，而MovieClip和Sprite 属于flahs.display 包。也就是说，包对类的限定是与继承链毫无关联的、一个新的 “维度”的限定。

附：使用一个类的时候，我们必须import这个类，或者包含这个类的package。AS2时直接写完整包路径的使用方法在AS3中不管用了，本文后面有详细介绍。

二、关于public
public定义的类或者属性可以在任何作用域内由任何来源访问。构造函数永远都是public的，Flex中的应用程序类（Application Class）和Flash CS3中的文档类（Document Class）必须是public的。且不能缺省public这个关键词声明。我在测试中发现，如果不声明public，Flash根本就不会获取类的定义，进而编译无法通过。

三、关于protected
protected声明类似AS2的private，它定义的属性只能在自己子类中可见，而其它场合都是不可见的。这一点与Java等传统OOP语言类似。

四、关于private
注意AS3的private和AS2的private大不相同，它定义的属性只属于自己，子类可以定义毫无牵连的同名属性。
dynamic 和原来AS2的dynamic一样，用dynamic声明的类可以动态的加入属性。这些属性也可以通过delete来删除。动态加入的属性一旦被切断所有的引用就会被垃圾回收机制自动回收。有时候用System.totalMemory检测不到内存释放是因为垃圾回收机制并不是即时运行的。

五、关于dynamic
动态（dynamic）类允许在运行时动态地添加属性，常见的动态类有MovieClip和顶级（top-level）的Array。如果您的自定义类要继承于动态类，那么请也定义为动态的，不要省略dynamic关键词。

六、关于继承（extends）和override
继承其实并不太复杂，唯一要说明的就是：子类的构造函数一定要用“super”调用一次父类的构造函数，否则报错！对于继承后的子类，如果要重新定义父类的非private方法，必须使用override关键词。在override的时候，如果我们需要调用父类的方法，可以使用super关键词（由于继承方法在逻辑上与父类往往有相似性，因此没有必要把方法逻辑完全重写）官方帮助中的这个例子非常易懂：
package {
import flash.display.MovieClip;
public class SuperExample extends MovieClip
{
public function SuperExample()
{
var myExt:Extender = new Extender()
trace(myExt.thanks()); // output: Mahalo nui loa
}
}
}

class Base {
public function thanks():String
{
return “Mahalo”;
}
}

class Extender extends Base
{
override public function thanks():String
{
return super.thanks() + ” nui loa”;
}
}

override不能用于重载变量（成员属性）。但是却可以用于重写getter 和setter 函数，例如：（官方帮助的例子）
package
{
import flash.display.MovieClip;
public class OverrideExample extends MovieClip
{
public function OverrideExample()
{
trace(currentLabel)
}
override public function get currentLabel():String
{
var str:String = “Override: “;
str += super.currentLabel;
return str;
}
}
}

这个例子中，我们直接重写了MovieClip类的currentLabel 属性。注意调用父类属性的时候，用了super.currentLabel。

关于静态方法，比较麻烦。首先，静态方法是无法被重载的。必须通过类来访问。但是您也可以自己定义与静态方法同名的方法，我把官方的例子做了一下修改就一目了然了：

package
{
import flash.display.MovieClip;
public class StaticExample extends MovieClip
{
public function StaticExample()
{
var myExt:Extender = new Extender();
}
}
}

class Base {
public static var test:String = “static”;
}

class Extender extends Base
{
private var test:String = “instance”;
public function Extender()
{
trace(Base.test); // output: static
trace(test); //added by awflasher.com, output: instance
}
}

七、关于import语法
在AS2时代，“import”语法只是为了让编程时代码简洁（省去了包名），比如我们import了mx.transitions.Tween之后，就可以直接new Tween()了。而如果不import，我们也可以直接用全类名来构造实例，例如：new mx.transitions.Tween();

然而，在AS3中，无论是否采用全名类声明，只要你用到这个类，就必须import。import 估计是传统Flash程序员所需要养成的一个最大的习惯，在刚切入AS3开发平台的时候，我常常忘记import一些常用的类，例如从IDE 指向过来的文本和渲染元件，以及flash.event.*、flash.display.StageAlign等比较泛用的类。

AS3中不像AS2那样，我们不能用_root和Stage[”displayState”]来进行hacks了。

八、关于编译时的注意事项
AS3不再像AS2那样简单地Compile-Time（编译时，即FlashCS3/FlexBuidler/其他编译器发布ActionScript 及所有资源为SWF文件的那一时刻）进行类型检测了，AS3在Run-Time（运行时，级Flashplayer 或者其他播放SWF的软件在播放SWF 的时候）也有类型检测，因此AS2的Hacks（强制访问不能访问的属性）将不再有效。

九、一个不得不说的好消息
AS3中类所有的变量（属性）和函数（方法）的作用域都是运行时跟类/实例走的。这与AS2大有不同，我们不再需要去Delegate了。只要是类自己的方法，在调用的过程中，this永远指向类自己（实例）。

简要总结：
1、如果我需要属性公开，并且可以被自己的子类继承，那么定义成public的。子类也可重写（override）之。
2、如果我需要属性隐藏，但是可以被自己的子类继承，那么定义成protected的。与public类似，子类也可重写（override）之。
3、如果我的某一个类有一个属性不想在任何位置可见，包括其子类，那么定义为private的。其子类无需重写（override），因为它根本就不存在于子类中。

JavaScript开发时的五个小技巧

只在< form>元素上使用submit事件

如果要在form中绑定事件处理程序时，应该只在< form>元素上绑定submit事件，而不是给提交按钮绑定click事件。
March：这个方式固然很好，但是，公司开发时使用了Web Flow，一个页面就一个大form，而里面可能有若干个提交按钮，所以不得不把部分事件处理程序绑定在了提交按钮的click事件上。

可点击的都应该是链接

不要给除锚元素（< a>）以外的元素绑定click事件。这一点对于键盘用户很重要，因为他们在仅通过键盘获取元素焦点时会遇到困难。

March：不过个人感觉锚元素还是应该只用作链接，而一些功能性的操作（比如Google Reader的Mark all as new），最好还是用< span>来标注，accessibility的问题可以通过快捷键等方式解决。这样做可以更好的还原HTML元素的语义。

简单的for循环优化

在你写一个for循环时，有个很简单的技巧能够提高性能。

for ( var i = 0; i < elements.length; ++i )

使用下面的语句代替上面的：

for ( var i = 0, j = elements.length; i < j; ++i )

这样可以把元素的个数（elements.length的值）储存在一个变量j中，这样就不必在每次循环时都计算一遍元素的个数。

用匿名函数来作为事件处理程序

尤其是对于短小的函数，创建一个匿名函数会比使用一个命名函数的引用更具可读性。

anchor.onclick = function() { map.goToPosition( home ); return false; }

March：在较复杂的JavaScript开发时还是使用命名函数效率更高。

使用Array.join代替字符串连接（concatenating strings）

在将很多字符串、变量等连接成一个很长的字符串时，将所有字符串和变量放入一个数组，然后用join方法将他们组成一个长字符串，这样无论从代码可读性还是从性能上都更胜于字符串连接。

var text = 'There are' + elements.length + 'members in the elements array.';
var text = ['There are', elements.length, 'members in the elements array.'].join(' ');

Javascript的匿名函数

一、什么是匿名函数？

在Javascript定义一个函数一般有如下三种方式：

函数关键字(function)语句：
function fnMethodName(x){alert(x);}
函数字面量(Function Literals)：
var fnMethodName = function(x){alert(x);}
Function()构造函数：
var fnMethodName = new Function('x','alert(x);')
上面三种方法定义了同一个方法函数fnMethodName，第1种就是最常用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。实际上，相当多的语言都有匿名函数。

二、函数字面量和Function()构造函数的区别

虽然函数字面量是一个匿名函数，但语法允许为其指定任意一个函数名，当写递归函数时可以调用它自己，使用Function()构造函数则不行。
var f = function fact(x) { if (x < = 1) return 1; else return x*fact(x-1); };
Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。
Function()构造函数每次执行时都解析函数主体，并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反，函数字面量却不是每次遇到都重新编译的。
用Function()构造函数创建一个函数时并不遵循典型的作用域，它一直把它当作是顶级函数来执行。
var y = "global"; function constructFunction() { var y = "local"; return new Function("return y"); // 无法获取局部变量 } alert(constructFunction()()); // 输出 “global”
和函数关键字定义相比Function()构造器有自己的特点且要难以使用的多，所以这项技术通常很少使用。而函数字面量表达式和函数关键字定义非常接近。考虑前面的区别，虽然有消息说字面量的匿名函数在OS X 10.4.3下的某些webkit的引擎下有bug，但我们平常所说的匿名函数均指采用函数字面量形式的匿名函数。

三、匿名函数的代码模式

昨天 hedger wang 在他的blog介绍了 几种匿名函数的代码模式：

错误模式：其无法工作，浏览器会报语法错。

function(){ alert(1); }();

函数字面量：首先声明一个函数对象，然后执行它。
(function(){ alert(1); } ) ( );
优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。
( function(){ alert(2); } ( ) );
Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。
void function(){ alert(3); }()
这三种方式是等同的，hedger wang因为个人原因比较喜欢第3种，而在实际应用中我看到的和使用的都是第1种。

关于Javascript的内存泄漏问题

常规循环引用内存泄漏和Closure内存泄漏

要了解javascript的内存泄漏问题，首先要了解的就是javascript的GC原理。

我记得原来在犀牛书《JavaScript: The Definitive Guide》中看到过，IE使用的GC算法是计数器，因此只碰到循环 引用就会造成memory leakage。后来一直觉得和观察到的现象很不一致，直到看到Eric的文章，才明白犀牛书的说法没有说得很明确，估计该书成文后IE升级过算法吧。在IE 6中，对于javascript object内部，jscript使用的是mark-and-sweep算法，而对于javascript object与外部object(包括native object和vbscript object等等)的引用时，IE 6使用的才是计数器的算法。

Eric Lippert在http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx一文中提到IE 6中JScript的GC算法使用的是nongeneration mark-and-sweep。对于javascript对算法的实现缺陷，文章如是说：

"The benefits of this approach are numerous, but the principle benefit is that circular references are not leaked unless the circular reference involves an object not owned by JScript. "

也就是说，IE 6对于纯粹的Script Objects间的Circular References是可以正确处理的，可惜它处理不了的是JScript与Native Object(例如Dom、ActiveX Object)之间的Circular References。

所以，当我们出现Native对象(例如Dom、ActiveX Object)与Javascript对象间的循环引用时，内存泄露的问题就出现了。当然，这个bug在IE 7中已经被修复了［http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html］。

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp 中有个示意图和简单的例子体现了这个问题：

< html>
< head>
< script language = " JScript ">
var myGlobalObject;
function SetupLeak() // 产生循环引用，因此会造成内存泄露
{
// First set up the script scope to element reference
myGlobalObject = document.getElementById("LeakedDiv");
// Next set up the element to script scope reference
document.getElementById(" LeakedDiv ").expandoProperty = myGlobalObject;
}
function BreakLeak() // 解开循环引用，解决内存泄露问题
{
document.getElementById( " LeakedDiv " ).expandoProperty = null ;
}
< /script>
< /head>
< body onload = "SetupLeak()" onunload = "BreakLeak()">
< div id = "LeakedDiv" >< /div>
< /body>
< /html>

上面这个例子，看似很简单就能够解决内存泄露的问题。可惜的是，当我们的代码中的结构复杂了以后，造成循环引用的原因开始变得多样，我们就没法那么容易观察到了，这时候，我们必须对代码进行仔细的检查。

尤其是当碰到Closure，当我们往Native对象(例如Dom对象、ActiveX Object)上绑定事件响应代码时，一个不小心，我们就会制造出Closure Memory Leak。其关键原因，其实和前者是一样的，也是一个跨javascript object和native object的循环引用。只是代码更为隐蔽，这个隐蔽性，是由于javascript的语言特性造成的。但在使用类似内嵌函数的时候，内嵌的函数有拥有一个reference指向外部函数的scope，包括外部函数的参数，因此也就很容易造成一个很隐蔽的循环引用，例如：

DOM_Node.onevent ->function_object.[ [ scope ] ] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。

［http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp］有个例子极深刻地显示了该隐蔽性：

< html>
< head>
< script language = "JScript">
function AttachEvents(element)
{
// This structure causes element to ref ClickEventHandler
// element有个引用指向函数ClickEventHandler()
element.attachEvent("onclick", ClickEventHandler);
function ClickEventHandler(){
// This closure refs element
// 该函数有个引用指向AttachEvents(element)调用Scope，也就是执行了参数element。
}
}
function SetupLeak()
{
// The leak happens all at once
AttachEvents(document.getElementById("LeakedDiv"));
}
< /script>
< /head>
< body onload = "SetupLeak()" onunload = "BreakLeak()">
< div id = "LeakedDiv">< /div>
< /body>
< /html>

还有这个例子在IE 6中同样原因会引起泄露

function leakmaybe() {
var elm = document.createElement("DIV");
elm.onclick = function(){
return 2 + 2 ;
}
}
for( var i = 0 ;i < 10000;i ++){
leakmaybe();
}

关于Closure的知识，大家可以看看 这篇文章 ，习惯中文也可以看看zkjbeyond的blog，他对Closure 这篇文章进行了 简要的翻译 。之所以会有这一系列的问题，关键就在于javascript是种函数式脚本解析语言，因此javascript中“函数中的变量的作用域是定义作用域，而不是动态作用域”，这点在犀牛书《JavaScript: The Definitive Guide》中的“Funtion”一章中有所讨论。

http://support.microsoft.com/default.aspx?scid=KB;EN-US;830555中也对这个问题举了很详细的例子。

一些简单的解决方案

目前大多数ajax前端的javascript framework都利用对事件的管理，解决了该问题。

如果你需要自己解决这个问题，可以参考以下的一些方法：

http://outofhanwell.com/ieleak/index.php?title=Main_Page:有个不错的检测工具

http://youngpup.net/2005/0221010713 中提到：可以利用递归Dom树，解除event绑定，从而解除循环引用：

if (window.attachEvent){
var clearElementProps = ['data','onmouseover','onmouseout','onmousedown','onmouseup',
'ondblclick','onclick','onselectstart','oncontextmenu'];

window.attachEvent("onunload", function(){
var el;
for(var d = document.all.length;d--;){
el = document.all[d];
for(var c = clearElementProps.length;c--;){
el[clearElementProps[c]] = null;
}
}
}
);
}

而http://novemberborn.net/javascript/event-cache一文中则通过增加EventCache，从而给出一个相对结构化的解决方案

/*
EventCache Version 1.0
Copyright 2005 Mark Wubben
Provides a way for automagically removing events from nodes and thus preventing memory leakage.
See < http://novemberborn.net/javascript/event-cache> for more information.

This software is licensed under the CC-GNU LGPL < http://creativecommons.org/licenses/LGPL/2.1/>
*/
/*
Implement array.push for browsers which don't support it natively.
Please remove this if it's already in other code
*/
if (Array.prototype.push == null ){
Array.prototype.push = function (){
for (var i = 0;i< arguments.length;i ++){
this[this.length] = arguments[i];
};
return this.length;
};
};
/*
Event Cache uses an anonymous function to create a hidden scope chain.
This is to prevent scoping issues.
*/
var EventCache = function (){
var listEvents=[];
return{
listEvents : listEvents,

add: function(node, sEventName, fHandler, bCapture){
listEvents.push(arguments);
},

flush: function (){
var i,item;
for (i = listEvents.length-1;i>=0;i=i-1 ){
item=listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1],item[2],item[3]);
};

/* From this point on we need the event names to be prefixed with 'on" */
if(item[1].substring(0, 2)!="on" ){
item[1]="on"+item[1];
};

if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};

item[0][item[1]]=null;
};
}
};
}();

使用方法也很简单：



< script type="text/javascript">
function addEvent(oEventTarget,sEventType,fDest){
if(oEventTarget.attachEvent){
oEventTarget.attachEvent("on" + sEventType, fDest);
}
elseif(oEventTarget.addEventListener){
oEventTarget.addEventListener(sEventType, fDest, true);
}
elseif(typeof oEventTarget[sEventType]=="function"){
var fOld = oEventTarget[sEventType];
oEventTarget[sEventType] = function(e){
fOld(e);
fDest(e);
};
}
else {
oEventTarget[sEventType] = fDest;
};

/* Implementing EventCache for all event systems */
EventCache.add(oEventTarget, sEventType, fDest, true);};
function createLeak(){
var body = document.body;
function someHandler(){
return body;
};
addEvent(body, "click", someHandler);
};

window.onload = function(){
var i = 500;
while(i > 0){
createLeak();
i = i - 1;
}
};

window.onunload = EventCache.flush;
< /script>

http://talideon.com/weblog/2005/03/js-memory-leaks.cfm 一文中的方法类似：

/*
* EventManager.js
* by Keith Gaughan
*
* This allows event handlers to be registered unobtrusively, and cleans
* them up on unload to prevent memory leaks.
*
* Copyright (c) Keith Gaughan, 2005.
*
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Common Public License v1.0
* (CPL) which accompanies this distribution, and is available at
* http://www.opensource.org/licenses/cpl.php
*
* This software is covered by a modified version of the Common Public License
* (CPL), where Keith Gaughan is the Agreement Steward, and the licensing
* agreement is covered by the laws of the Republic of Ireland.
*/
// For implementations that don't include the push() methods for arrays.
if(!Array.prototype.push){
Array.prototype.push=function(elem){
this[this.length]=elem;
}
}
var EventManager={
_registry: null,
Initialise: function(){
if(this._registry==null){
this._registry=[];
// Register the cleanup handler on page unload.
EventManager.Add(window,"unload" ,this.CleanUp);
}
},
/*
* Registers an event and handler with the manager.
*
* @param obj Object handler will be attached to.
* @param type Name of event handler responds to.
* @param fn Handler function.
* @param useCapture Use event capture. False by default.
* If you don't understand this, ignore it.
*
* @return True if handler registered, else false.
*/
Add: function(obj, type, fn, useCapture){
this.Initialise();
// If a string was passed in, it's an id.
if(typeof obj=="string"){
obj = document.getElementById(obj);
}
if(obj==null || fn==null){
return false ;
}
// Mozilla/W3C listeners?
if(obj.addEventListener){
obj.addEventListener(type, fn, useCapture);
this._registry.push({obj: obj, type: type, fn: fn, useCapture: useCapture});
return true ;
}
// IE-style listeners?
if(obj.attachEvent && obj.attachEvent("on" + type,fn)){
this._registry.push({obj: obj, type: type, fn: fn, useCapture: false });
return true ;
}
return false ;
},
/* *
* Cleans up all the registered event handlers.
*/
CleanUp: function(){
for(var i=0;i< EventManager._registry.length;i++){
with(EventManager._registry[i]) {
// Mozilla/W3C listeners?
if(obj.removeEventListener) {
obj.removeEventListener(type, fn, useCapture);
}
else if(obj.detachEvent){// IE-style listeners?
obj.detachEvent("on"+type,fn);
}
}
}
// Kill off the registry itself to get rid of the last remaining
// references.
EventManager._registry = null ;
}
};

使用起来也很简单：

< html>
< head>
< script type=text/javascript src=EventManager.js>< /script>
< script type=text/javascript>
function onLoad(){
EventManager.Add(document.getElementById(testCase),click,hit);
return true;
}
function hit(evt) {
alert(click);
}
< /script>
< /head>
< body >
< h1>Click me!< /h1>
< /div>
< /body>
< /html>

google map api同样提供了一个类似的函数用在页面的unload事件中，解决Closure带来的内存泄露问题。

当然，如果你不嫌麻烦，你也可以为每个和native object有关的就阿vascript object编写一个destoryMemory函数，用来手动调用，从而手动解除Dom对象的事件绑定。

还有一种就是不要那么OO,抛弃Dom的一些特性，用innerHTML代替appendChild，避开循环引用。详细见http://birdshome.cnblogs.com/archive/2005/02/16/104967.html中的讨论贴。

Cross-Page Leaks

Cross-Page Leaks和下一节提到的Pseudo-Leaks在我看来，就是IE的bug，虽然MS死皮赖脸不承认

大家可以看看这段例子代码:

< html>
< head>
< script language="JScript">
// 这个函数会引发Cross-Page Leaks
function LeakMemory()
{
var hostElement=document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for (i=0 ;i< 5000;i++){
var parentDiv = document.createElement("< div >");
var childDiv = document.createElement("< div >");
// This will leak a temporary object
parentDiv.appendChild(childDiv);
hostElement.appendChild(parentDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null ;
childDiv = null ;
}
hostElement = null ;
}
// 而这个函数不会引发Cross-Page Leaks
function CleanMemory()
{
var hostElement = document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for (i=0;i< 5000;i++)
{
var parentDiv = document.createElement("< div >");
var childDiv = document.createElement("< div >");
// Changing the order is important, this won't leak
hostElement.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null ;
childDiv = null ;
}
hostElement = null ;
}
< /script>
< /head>
< body>
< button > Memory Leaking Insert < /button>
< button > Clean Insert < /button>
< div id="hostElement">< / div >
< /body>
< /html>

LeakMemory和CleanMemory这两段函数的唯一区别就在于他们的代码的循序，从代码上看，两段代码的逻辑都没有错。



但LeakMemory却会造成泄露。原因是LeakMemory()会先建立起parentDiv和childDiv之间的连接，这时候，为了让 childDiv能够获知parentDiv的信息，因此IE需要先建立一个临时的scope对象。而后parentDiv建立了和 hostElement对象的联系，parentDiv和childDiv直接使用页面document的scope。可惜的是，IE不会释放刚才那个临时的scope对象的内存空间，直到我们跳转页面，这块空间才能被释放。而CleanMemory函数不同，他先把parentDiv和 hostElement建立联系，而后再把childDiv和parentDiv建立联系，这个过程不需要单独建立临时的scope，只要直接使用页面 document的scope就可以了， 所以也就不会造成内存泄露了

详细原因，大家可以看看http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp这篇文章。

IE 6中垃圾回收算法，就是从那些直接"in scope"的对象开始进行mark清除的：

Every variable which is "in scope" is called a "scavenger". A scavenger may refer to a number, an object, a string, whatever. We maintain a list of scavengers – variables are moved on to the scav list when they come into scope and off the scav list when they go out of scope.

Pseudo-Leaks

这个被称为“秀逗泄露”真是恰当啊^-^

看看这个例子:

< html>
< head>
< script language="JScript">
function LeakMemory()
{
// Do it a lot, look at Task Manager for memory response
for (i=0;i< 5000;i++)
{
hostElement.text = "function foo(){}" ; // 看内存会不断增加
}
}
< /script>
< /head>
< body>
< button > Memory Leaking Insert < /button>
< script id="hostElement">function foo(){}< /script>
< /body>
< /html>

MS是这么解释的，这不是内存泄漏。如果您创建了许多无法获得也无法释放的对象，那才是内存泄漏。在这里，您将创建许多元素，Internet Explorer 需要保存它们以正确呈现页面。Internet Explorer 并不知道您以后不会运行操纵您刚刚创建的所有这些对象的脚本。当页面消失时（当您浏览完，离开浏览器时）会释放内存。它不会泄漏。当销毁页面时，会中断循环引用。

唉~~~

详细原因，大家可以看看http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp这篇文章。

其它一些琐碎的注意点：

变量定义一定要用var，否则隐式声明出来的变量都是全局变量，不是局部变量；
全局变量没用时记得要置null；
注意正确使用delete，删除没用的一些函数属性；
注意正确使用try...cache，确保去处无效引用的代码能被正确执行；
open出来的窗口即使close了，它的window对象还是存在的，要记得删除引用；
frame和iframe的情况和窗口的情况类似。
考资料参：

http://jibbering.com/faq/faq_notes/closures.html
http://javascript.weblogsinc.com/2005/03/07/javascript-memory-leaks/
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp
http://72.14.203.104/search?q=cache:V9Bt4_HBzQ8J:jgwebber.blogspot.com/2005/01/dhtml-leaks-like-sieve.html+DHTML+Leaks+Like+a+Sieve+&hl=zh-CN&ct=clnk&cd=9 (这是DHTML Leaks Like a Sieve)一文在google上的cache，原文已经连不上了）
http://spaces.msn.com/siteexperts/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry
http://support.microsoft.com/default.aspx?scid=KB;EN-US;830555
http://www.ajaxtopics.com/leakpatterns.html
http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx
http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html
http://youngpup.net/2005/0221010713
http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx =
http://support.microsoft.com/kb/266071/EN-US ==>IE 5.0至5.5一些版本中的GC bug
http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html ==>ie 7的改进
http://erik.eae.net/archives/2006/04/26/23.23.02/ ==>ie 7的改进
http://www.feedbackarchive.com/spamvampire/today.html ==> Try this script for memory leaks - it leaked 50 megabytes in 15 minutes with firefox on linux:
http://birdshome.cnblogs.com/archive/2005/02/15/104599.html
http://www.quirksmode.org/dom/innerhtml.html
http://www.crockford.com/javascript/memory/leak.html
《JavaScript: The Definitive Guide》4th Edition
http://outofhanwell.com/ieleak/index.php?title=Main_Page