如果不太了解的朋友，可详细阅读：《Event delegation in JavaScript》，这里不再累述。

首先让我们一起来回顾一些常识：

1. 通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
2. 接口事件则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。

很明显：focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡，那又如何实现事件代理呢？

可以换个角度，逆向思维，尝试事件捕获（Event Capturing，除了IE，现在流行的标准浏览器均支持）。

测试后会发现，如果你捕获 focus 或 blur 事件，目标元素的祖先元素均执行事件函数。至于为什么？或许是实现的一个 BUG。

el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);

那对于 IE ，我们如何实现呢？

非常幸运，IE 下支持 focusin 和 focusout 事件，非常类似于 focus 和 blur 事件，唯一不同的是，这两种事件支持事件冒泡（Event Bubbling）。

el.onfocusin = focusHandler;
el.onfocusout = blurHandler;

很完美的解决方案：

if (document.addEventListener) {
    el.addEventListener('focus', focusHandler, true);
    el.addEventListener('blur', blurHandler, true);
} else {
    el.onfocusin = focusHandler;
    el.onfocusout = blurHandler;
}

当你下次看到 YUI 2.8 的 event/event-debug.js 源码中下面几段代码时，一定会清晰很多：

576    // String constants used by the addFocusListener and removeFocusListener methods
577
578     FOCUSIN = "focusin",
579     FOCUSOUT = "focusout";

        ....

750     _specialTypes: {
751         focusin: (isIE ? "focusin" : "focus"),
752         focusout: (isIE ? "focusout" : "blur")
753      },

        ....

1053    addListener: function (el, sType, fn, obj, overrideContext) {
1054
1055	    var capture = ((sType == FOCUSIN || sType == FOCUSOUT) && !YAHOO.env.ua.ie) ? true : false;
1056
1057        return this._addListener(el, this._getType(sType), fn, obj, overrideContext, capture);
1058
1059    },

isFunction: function( obj ) {
    return toString.call(obj) === "[object Function]";
},

同时 jQuery 的作者也作了部分注释：

See test/unit/core.js for details concerning isFunction. Since version 1.3, DOM methods and functions like alert aren’t supported. They return false on IE (#2968).

即：此方法在 IE 下无法正确识别 DOM 方法和一些函数（例如 alert 方法等）。

为什么会这样呢？

详细看测试页面：http://www.planabc.net/demo/isfunction/

会发现在 IE 下用 typeof 检测 alert、confirm 方法以及 DOM 的方法显示 object，而其他浏览器下显示 function。

那如何完善这个问题呢？

1. typeof 检测某个方法（例如：document.getElementById） 是否是 object，如何是，则重写 isFunction 函数；
2. 怎样重写呢？正则判断传入的对象字符串后（”" + fn），是否起始位置含有 function，即：/^\s*\bfunction\b/.test(” + fn)。

OK，看下根据以上思路修改后的 isFunction 函数：

var isFunction = (function() {
    // Performance optimization: Lazy Function Definition
    return "object"  === typeof document.getElementById ?
           isFunction = function(fn){
                try {
                    return /^\s*\bfunction\b/.test("" + fn);
                } catch (x) {
                    return false
                }
           }:
           isFunction = function(fn){
               return "[object Function]" === Object.prototype.toString.call(fn);
           };
})()

参考阅读：

• 《isFunction hacked, isCallable solution》
• 《isFunction() or isObject(), that is the question ? 》
• 《Lazy Function Definition Pattern》

值得庆幸的是，我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组：

var args = Array.prototype.slice.call(arguments, 0);

对于slice 方法，ECMAScript 262 中 15.4.4.10 Array.prototype.slice (start, end) 章节有备注：

The slice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the slice function can be applied successfully to a host object is implementation-dependent.

《Pro JavaScript Design Patterns》（《JavaScript 设计模式》）的作者 Dustin Diaz 曾指出：

instead of…
var args = Array.prototype.slice.call(arguments, 0); // 怿飞注：下称方法一
do this…
var args = [].slice.call(arguments, 0); // 怿飞注：下称方法二

但二者的性能差异真的存在吗？经过个人简单测试发现：

在 arguments.length 较小的时候，方法二性能上稍有一点点优势，而在arguments.length 较大的时候，方法一却又稍有优势。

2010年1月30日更新（测试地址）：几经验证，性能差异不大，反而第一张方法性能稍优势一点，或许由于第二种方法创建新数组产生开销。

最后附上方法三，最老土的方式：

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push(arguments[i]);
}

不过对于平常来说，个人建议使用第一种方法，但任何解决方案，没有最好的，只有最合适：

var args = Array.prototype.slice.call(arguments, 0); 

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

如何将 NodeList （比如：document.getElementsByTagName('div')）转换成数组呢？

解决方案简单如下：

function nodeListToArray(nodes){
    var arr, length;

    try {
        // works in every browser except IE
        arr = [].slice.call(nodes);
        return arr;
    } catch(err){
        // slower, but works in IE
        arr = [];
        length = nodes.length;

        for(var i = 0; i < length; i++){
             arr.push(nodes[i]);
         }  

        return arr;
    }
} 

为什么 IE 中 NodeList 不可以使用 [].slice.call(nodes) 方法转换呢？

In Internet Explorer it throws an error that it can't run Array.prototype.slice.call(nodes) because a DOM NodeList is not a JavaScript object.

var toObject = function(a) {
    var o = {};
    for (var i = 0; i < a.length; i = i+1) {
     o[a[i]] = true;
    }
    return o;
};

var keys = function(o) {
    var a=[], i;
    for (i in o) {
        if (lang.hasOwnProperty(o, i)) { // YUI的方法
            a.push(i);
        }
    }
    return a;
};

var uniq = function(a) {
    return keys(toObject(a));
};

详细分析，见同事 长天 的分享 《巧妙去除数组中的重复项》。

自己使用的方式与 YUI 的方式十分相似，不过仅使用了一次循环便完成了删除数组中重复项，如下：

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];
        if (o[v] !== 1) {
            a.push(v);
            o[v] = 1;
        }
    }

    return a;
}

经过了简单的测试：自己使用的方式性能远远高于 YUI 的方式。

抛砖引玉，欢迎大家提供更好的处理方法。

2009年12月28日更新：

以上两种函数方法暂时都不能处理复杂的含有混合类型的数组（感谢 小猫 提出的疑问），如：[0,"0",1,"1",0]、["null",null]。

对于能够约定类型为数字（注：要求非0开头的数字，小数除外）或字符串的数组，我们可以用改进后的函数方法（感谢 closurecache 提供的思路）：

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        cv, // corrected value
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];

        /* closurecache 提供的函数中使用的是  cv = v + 0;，
         * 这样就无法辨别类似[1, 10, "1", "10"]的数组，
         * 因为运算后 => 1, 10, 10, 100，很明显，出现了重复的标示符。
         * 加前面就难道没问题吗？
         * 有的：数组中不能出现类似01 、001，以 0 开头的数字，
         * 但适用性比原先更广。
         */
        cv = 0 + v;

        if (!o[cv]) {
            a.push(v);
            o[cv] = true;
        }
    }

    return a;
}

如果大家想在此解题思路的基础上，更完美一点，推荐 Dexter.Yy 的方法，进行类型判断，给予唯一标示符，详见 评论 20 楼。

没有最好，只有最合适的方式，其实使用 Array.indexOf() 的思路也是不错的选择，对于已经支持的浏览器直接用原生的 Array.indexOf() 方法，对于未支持的，我们增加 Array.indexOf() 方法，如下：

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (obj, fromIndex) {
        if (fromIndex == null) {
            fromIndex = 0;
        } else if (fromIndex < 0) {
            fromIndex = Math.max(0, this.length + fromIndex);
        }

        for (var i = fromIndex; i < this.length; i++) {
            if (this[i] === obj)
                return i;
            }
        return -1;
    };
}

接下来，实现的过程就非常简单了。

对于使用 Array.indexOf() 方法实现方案的优化提示：找到相同值时，从数组中移除，以减少下次遍历的量。

试想如果我们将此功能移植到 Firefox 上一定有趣！

第一步，在状态栏中显示图标和数据。

通过 《如何创建 Firefox 的 Jetpack 扩展》 这篇文章，我们可以轻易的创建：

jetpack.statusBar.append({
    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数
    width: 55, //状态栏上的宽度为55
    onReady: function(widget) {
        $("#count", widget).css({ //给未读新邮件数添加样式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });
    }
});

第二步，获取 Gmail 的数据，更新未读新邮件数。

可以通过 Gmail 邮件的 Feed 获得（需登录）：https://mail.google.com/mail/feed/atom

Feed 源码中的 fullcount 标签是用来记录当前的未读新邮件数。

OK，首先数据源有了。接着，我们使用再熟悉不过的 Ajax 技术，获取到数据并赋给指定的元素。

function update(widget) {
    var widget = $(widget)；

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            widget.find("#count").text(newcount); //赋给指定的元素
        } else { //如果未登录，显示“Login”
            widget.find("#count").text( "Login" );
	}
    });
}

我们还可以通过进行一些优化：比如当未读新邮件数大于原来的邮件数时，增加提示信息等。
提示信息这里使用 jetpack.notifications.show(options) 方法，options 参数有三个属性：title (String)：通知的标题；icon (URL)：通知 icon 的 URL；body (String)：通知的主题内容。

优化后的代码如下：

var count = 0;

function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定义通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未读新邮件数大于原来的邮件数，则提示来自哪里
                var sender = $(xml).find("name").get(0).textContent;
                notify("New message from "+sender);
            }
            count = newcount;
            widget.find("#count").text(count); //赋给指定的元素

        } else { //如果未登录，提示登录
            widget.find("#count").text( "Login" );
            notify("Please login to Gmail");
	}
    });
}

第三步：设置定时更新数据。

我们设置每 1 分钟更新一次数据：

setInterval( function() { update(widget) }, 60*1000 );

第四步：设置点击扩展后的链接窗口。

$(widget).click(function() { //设置点击扩展后的链接窗口
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});

jetpack.tabs 为浏览器窗口的标签对象，.open(url) 为新打开浏览器窗口标签的方法，.focus()为选中此标签为当前标签的方法。

OK，Firefox 的 Jetpack 扩展——Gmail 邮件提醒，经过简单的四步轻松完成。

全部代码如下：

var count = 0;

function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定义通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未读新邮件数大于原来的邮件数，则提示来自哪里
                var sender = $(xml).find("name").get(0).textContent;
                notify("New message from "+sender);
            }
            count = newcount;
            widget.find("#count").text(count); //赋给指定的元素

        } else { //如果未登录，提示登录
            widget.find("#count").text( "Login" );
            notify("Please login to Gmail");
	}
    });
}

jetpack.statusBar.append({
    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数
    width: 40, //状态栏上的宽度为40，预留3位数的宽度
    onReady: function(widget) {
        $("#count", widget).css({ //给未读新邮件数添加样式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });

        $(widget).click(function() { //设置点击扩展后的链接窗口
            jetpack.tabs.open("http://mail.google.com");
            jetpack.tabs[ jetpack.tabs.length-1 ].focus();
        });

        update(widget);
	setInterval( function() {update(widget) }, 60*1000 );
    }
});

测试Demo：http://www.planabc.net/lab/jetpack/gmail/

对于 Jetpack 详细的 API，可以阅读 about:jetpack 页面的 API Reference 标签部分。

案例源码来自：https://jetpack.mozillalabs.com/demos/gmail-checker.js

Adobe Air 也好，Web OS 也好， Jetpack 也好，至少让我们肯定一点，前端的价值将会在机遇中越来越大的被展现。

下面让我们一起来看看如何一步步创建你的第一个 Firefox 的 Jetpack 扩展：

第一步：安装 Jetpack 插件

Jetpack 插件地址：https://jetpack.mozillalabs.com/install.html

安装完成 Jetpack 插件后，你就可以通过在地址栏中输入 about:jetpack 来访问 Jetpack 本地界面了。

第二步：创建 planabc.js 文件。

planabc.js 的详细代码为：

jetpack.statusBar.append({
    html: '<img src="http://www.planabc.net/favicon.ico"/>',
    width: 16,
    onReady: function(widget){
        $(widget).click(function(){
            jetpack.tabs.focused.contentWindow.location = "http://www.planabc.net/";
        });
    }
});

jetpack.statusBar.append 将执行 JavaScript 对象（该JavaScript 对象有四个属性：html、url、width 和 onReady）。

• html 属性：定义初始的 HTML，将显示在状态栏。此样例中，将显示一个简单的 IMG 元素。
• url 属性：定义将在状态栏上显示的外部 HTML 内容的 URL。此样例中，未使用该属性。
• width 属性：定义内容在状态栏上的宽度（单位：像素）。此样例中，定义为 16 像素，也就是 IMG 元素本身的宽度。
• onReady 属性：定义被调用的函数（一旦状态栏被创建，此函数将会被调用）。由于 Jetpack 集成了 jQuery 框架，所以可以直接使用 jQuery 的属性和方法。在此样例中定义了这样一个函数，当点击该 Jetpack 扩展时，我们将修改 jetpack.tabs.focused.contentWindow.location 属性为 http://www.planabc.net/。jetpack.tabs.focused.contentWindow 对象相当于 window 对象，你可以访问通过 JavaScript 访问网页。

第三步：测试 planabc.js 代码。

通过在地址栏中输入 about:jetpack 访问到 Jetpack 本地界面，点击 Develop 标签，然后将 planabc.js 文件中的代码拷贝到页面上的输入框中。点击 “try out this code” 按钮，你将会看到一个新的 icon 出现在 Firefox 窗口的右下角。

Develop 非常方便在代码部署前，在 Firefox 中测试你的代码。

第四步：部署 Jetpack 扩展。

创建一个简单的页面，在页面的 HEAD 元素内添加如下的 LINK 元素：

<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>

HTML 文件源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Mozilla Jetpack 案例</title>
        <link rel="jetpack" href="planabc.js" name="怿飞的博客"/>
    </head>
    <body>
        <a href="http://www.planabc.net/2009/10/13/build_firefox_extensions_with_jetpack/">《如何创建 Firefox 的 Jetpack 扩展》 </a>
    </body>
</html>

最后，将 HTML 文件和 planabc.js 文件都上传到服务器。

第五步：安装 Jetpack 扩展。

在 Firefox 中浏览该 HTML 页面时，Jetpack 插件将会在屏幕的最上方显示一个安装条，点击 “install” 按钮。将会提示安装不受信任的特性，点击 “I know what I’m doing. Install It!” 按钮。

安装完成和第三步测试一样，将会看到一个新的 icon 出现在 Firefox 窗口的右下角。如果此时你发现状态栏有2个相同的新 icon，那意味着原先的测试代码依然还在 about:jetpack 页面的 Develop 标签页中，清空输入框的代码即可消除。

返回到 about:jetpack 页面，点击 Installed Features 标签，将在列表中显示有新安装的 Jetpack 扩展。

测试Demo：http://www.planabc.net/lab/jetpack/planabc/

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

1. 移除注释
2. 移除额外的空格
3. 细微优化
4. 标识符替换（Identifier Replacement）

YUI Compressor 包括哪些细微优化呢？

• object["property"] ，如果属性名是合法的 JavaScript 标识符（注：合法的 JavaScript 标识符——由一个字母开头，其后选择性地加上一个或者多个字母、数字或下划线）且不是保留字，将优化为： object.property
• {"property":123} ，如果属性名是合法的 JavaScript 标识符且不是保留字，将优化为 {property:123} （注：在对象字面量中，如果属性名是一个合法的 JavaScript 标识符且不是保留字，并不强制要求用引号引住属性名）。
• 'abcd\'efgh'，将优化为 "abcd'efgh"。
• "abcd" + "efgh"，如果是字符串相连接，将优化成 "abcdefgh"（注：所有在使用 YUI Compressor 的前提下，对于脚本中的字符串连接，使用连接符 “+” 的效率和可维护性最高）。

对于 JavaScript 最有效的压缩优化，当属标识符替换。

比如：

(function(){
    function add(num1, num2) {
        return num1 + num2;
    }
})();

进行属标识符替换后：

(function(){
    function A(C, B) {
        return C+ B;
    }
})();

再移除额外的空格，最终成了：

(function(){function A(C,B){return C+B;}})();

YUI Compressor 标识符替换仅替换函数名和变量名，那哪些不能被替代呢？

1. 原始值：字符串、布尔值、数字、null 和 undefined。一般来说字符串占的空间最多，而非数字字面量其次（true、false，null，underfinded）。
2. 全局变量：window、document、XMLHttpRequest等等。使用最多的就是 document、window。
3. 属性名，比如：foo.bar。占据的空间仅次于字符串，”.” 操作符无法被代替，且 a.b.c 更加费空间。
4. 关键字。经常被过度使用的关键字有：var、return。最好的优化方法：一个函数仅出现一次 var 和 return 关键字。

对于原始值、全局变量、属性名的优化处理方式大致相同：任何字面量值、全局变量或者属性名被使用超过 2 次（包括2次），都应该用局部变量存储代替。

但有部分情况下是禁止使用标识符替换的：

1. 使用 eval() 函数。解决方法：不使用或者创建一个全局函数封装 eval()。
2. 使用 with 语句。解决方法：方法同上。
3. JScript 的条件注释。唯一解决的方法：不使用。

由于 YUI Compressor 是建立在 rhino interpreter 基础上的，所以上述所有的优化都是安全的。

扩展阅读：

• 《Extreme JavaScript Compression With YUI Compressor》

document.addEventListener("DOMContentLoaded", init, false);

那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢？

Matthias Miller 最早提供了如下的解决方案：

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
        init(); // call the onload handler
    }
};
/*@end @*/

而 Diego Perini 在其后提供了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案，且现在主流的 JavaScript 框架（JQuery、YUI等）基本都采用的这一解决方案。

原理基本如下：

当 ondocumentready 事件触发，文档（ document ）已经完全解析和建立。如果组件需要操作最初的文档结构，初始化代码需被安置在这之后。ondocumentready 事件告知组件，整个页面已被加载，且在 初始文档的 onload 事件触发之前立即触发。

一些方法，例如 doScroll，要求最初的文档被完全加载。如果这些方法是初始化函数的一部分，当ondocumentready 事件触发，他们将被执行。

/*
 *
 * IEContentLoaded.js
 *
 * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
 * Summary: DOMContentLoaded emulation for IE browsers
 * Updated: 05/10/2007
 * License: GPL/CC
 * Version: TBD
 *
 */

// @w    window reference
// @fn    function reference
function IEContentLoaded (w, fn) {
    var d = w.document, done = false,
    // only fire once
    init = function () {
        if (!done) {
            done = true;
            fn();
        }
    };
    // polling for no errors
    (function () {
        try {
            // throws errors until after ondocumentready
            d.documentElement.doScroll('left');
        } catch (e) {
            setTimeout(arguments.callee, 50);
            return;
        }
        // no errors, fire
        init();
    })();
    // trying to always fire before onload
    d.onreadystatechange = function() {
        if (d.readyState == 'complete') {
            d.onreadystatechange = null;
            init();
        }
    };
}

JQuery 1.3.2 中源码实现如下：

// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
    if ( jQuery.isReady ) return;

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch( error ) {
        setTimeout( arguments.callee, 0 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
})();

YUI 2.7.0 中源码实现如下：

if (EU.isIE) {

    // Process onAvailable/onContentReady items when the
    // DOM is ready.
    YAHOO.util.Event.onDOMReady(
            YAHOO.util.Event._tryPreloadAttach,
            YAHOO.util.Event, true);

    var n = document.createElement('p');  

    EU._dri = setInterval(function() {
        try {
            // throws an error if doc is not ready
            n.doScroll('left');
            clearInterval(EU._dri);
            EU._dri = null;
            EU._ready();
            n = null;
        } catch (ex) {
        }
    }, EU.POLL_INTERVAL); 

}

另外对于版本小于 Safari 3+ 的 Safari 浏览器，John Resig 也提供了一个解决方案：

if (/WebKit/i.test(navigator.userAgent)) { // sniff
    var _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            clearInterval(_timer);
            init(); // call the onload handler
        }
    }, 10);
}

怿飞提示：

1. 如果脚本是动态注入到页面上，则原生的 DOMContentReady 事件是不会被触发（即：IE 除外）。
2. IE 下对于在 iframe 里的使用 addDOMLoadEvent 事件，需做处理和慎用（这一点 YUI 做得不如 JQuery 细致）。

   // form JQuery 1.3.2
   // ensure firing before onload, maybe late but safe also for iframes
   document.attachEvent("onreadystatechange", function(){
       if ( document.readyState === "complete" ) {
           document.detachEvent( "onreadystatechange", arguments.callee );
           jQuery.ready();
       }
   });

扩展阅读：

• 《addDOMLoadEvent》
• 《window.onload (again)》
• 《IEContentLoaded》

function getEvent(event) {
    return event || window.event  // IE:window.event
}

如果没有参数，也可写成（非IE ：事件对象会自动传递给对应的事件处理函数，且为第一个参数）：

function getEvent() {
    return arguments[0] || window.event // IE:window.event
}

这样的写法在除 Firefox（测试版本：3.0.12，下同） 外的浏览器上运行都不会有问题，但 Firefox 为什么例外呢？让我们这样一种情形：

<button id="btn" onclick="foo()">按钮</button>

<script>
function foo(){
   var e =  getEvent();
   alert(e);
}
</script>

运行结果在 Firefox 中是 undefined，为什么呢？

在 Firefox 中调用其实是这样的，先调用执行的是：

function onclick(event) {
    foo();
}

然后调用执行的是：

function foo(){
   var e =  getEvent();
   alert(e);
}

会发现在 Firefox 下 onclick="foo()" 中的 foo() 无法自动传入事件对象参数，而默认传递给了系统生成的 onclick 函数，那本例我们可以通过 getEvent.caller.caller.arguments[0] 获得事件对象。

因此，我们的 getEvent 可以优化成（参照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法）：

function getEvent(event) {
    var ev = event || window.event;

    if (!ev) {
        var c = this.getEvent.caller;
        while (c) {
            ev = c.arguments[0];
            if (ev && (Event == ev.constructor || MouseEvent  == ev.constructor)) { //怿飞注：YUI 源码 BUG，ev.constructor 也可能是 MouseEvent，不一定是 Event
                break;
            }
            c = c.caller;
        }
    }

    return ev;
}

当然还有一个很简单的解决方法，就是手动将参数传递给 onclick="foo()"：

<button id="btn" onclick="foo(event)">按钮</button>

登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^

玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

PS：有兴趣的还可以在 Google Reader 上尝试下此“秘技”，一般人我还不告诉他，嘿嘿。

• IE：执行超过500W条JScript引擎语句出现提示。
• Firefox：执行超过10秒出现提示。
• Safari：执行超过5秒出现提示。
• Opera：无论执行多久都不会出现提示，最有耐性。
• Chrome：执行超过约8秒（估计值）出现提示。

注：当弹出类似alert的模式对话框的时候，是不计时。

扩展阅读：

• 《What determines that a script is long-running?》

var associative_array = new Array();
associative_array["one"] = "1";
associative_array["two"] = "2";
associative_array["three"] = "3";
if(associative_array.length > 0) {
    // to do
}

会发现 associative_array.length 始终等于 0，当时有点迷惑，后来才知道这就像大家认为 IE 中支持 CSS 属性 display:inline-block 一样，纯属巧合和误解。

实际上（引自《JavaScript “Associative Arrays” Considered Harmful》）：

JavaScript arrays (which are meant to be numeric) are often used to hold key/value pairs. This is bad practice. Object should be used instead.

//大意：数组只支持数字的，键值对应使用于对象上。

• There is no way to specify string keys in an array constructor. //在数组构造函数中无法定义字符串键值
• There is no way to specify string keys in an array literal. //在数组字面量中无法定义字符串键值
• Array.length does not count them as items. // Array.length 不会计算字符串键值

进一步窥探数组：

1、数组可以根据所赋的值自动调整大小

var ar = [];
ar[2] = 1;
alert(ar.length)

发现这个数组的长度为 3，就像一个经过初始化的数组一样。所有没有赋值的数组对象，都将被定义为 undefined 。

扩展阅读：

• 《Javascript Array Fun》

2、可使用 “The Miller Device” 方法来判断是否是数组

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]';
}

“The Miller Device” 的妙用不仅仅在于判断数组：

var is = {
    types : ["Array","RegExp","Date","Number","String","Object"]
};

for(var i=0,c;c=is.types[i++];){
    is[c] = (function(type){
        return function(obj){
            return Object.prototype.toString.call(obj) == “[object "+type+"]“;
        }
    })(c);
}

扩展阅读：

• 《The Miller Device》
• 《isArray: Why is it so bloody hard to get right?》

<div id="test">
    <a href="#"> test </a>
</div>
<div id="result"></div>

<script type="text/javascript">
(function(){
    var test = document.getElementById('test');
    alert(test.innerHTML);

    var result =  document.getElementById('result');
    result.innerHTML = test.innerHTML;
    alert(result.innerHTML)
})();
</script>

结果会发现，在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。

其实先人们早遇到这些问题（感谢 玉伯 提供的资料）：

• 《getAttribute(“HREF”) is always absolute》
• 《getAttribute href bug》

在上面的文章中已提及了处理方案，就是在 IE 下使用 getAttribute( ‘href’ , 2 ) 方法。 Microsoft 给此方法扩展了第二个参数，可设置为 0、1、2，如果设置为 2 ，则返回属性原始值。

脚本修正为：

(function(){
    var test = document.getElementById('test');
    alert(test.innerHTML);

    var result =  document.getElementById('result');
    result.innerHTML = test.innerHTML;

    if(/*@cc_on!@*/0 ) { //if ie
        var links1 = test.getElementsByTagName('a');
        var links2 = result.getElementsByTagName('a');
        for(var i = 0, len = links1.length; i < len; ++i ) {
            links2[i].href = links1[i].getAttribute('href', 2);
        }
    }

    alert(result.innerHTML);

})();

在寻找此问题的过程中还搜索到 Hedger Wang 发现的一个有趣的 BUG 问题：在 IE 中当重新设置新的 href 属性值时，如果链接文字含有 “http://” 或 “@” ，则其 innerHTML 将显示不正确，显示成设置的 href 属性。

解决方法（sHref 为要设置的 href 新值）：

sHref = 'http://www.hedgerwow.com';
var isMSIE = /*@cc_on!@*/false;
if( isMSIE ){
    sHref = ' ' + sHref; //add extra space before the new href
};

详细：《Internet Explorer might reset Anchor’s innerHTML incorrectly when a new “href” is assigned》。

我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况（一般为 loading 、loaded、interactive、complete），当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。

对于 readyState 状态需要一个补充说明：

1. 在 interactive 状态下，用户可以参与互动。
2. Opera 其实也支持 js.onreadystatechange，但他的状态和 IE 的有很大差别。

具体实现代码如下：

function include_js(file) {
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    _doc.appendChild(js);

    if (!/*@cc_on!@*/0) { //if not IE
        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
        js.onload = function () {
            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
        }
    } else {
        //IE6、IE7 support js.onreadystatechange
        js.onreadystatechange = function () {
            if (js.readyState == 'loaded' || js.readyState == 'complete') {
                alert('IE6、IE7 support js.onreadystatechange');
            }
        }
    }

    return false;
}

//execution function
include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

扩展阅读：

• 《JS includes – the saga continues…》
• 《Asynchrony: Loved Your Performance》
• 《Yahoo! UI Library: Get Utility》

window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

window.name 传输技术的基本原理和步骤为：

name 在浏览器环境中是一个全局/window对象的属性，且当在 frame 中加载新页面时，name 的属性值依旧保持不变。通过在 iframe 中加载一个资源，该目标页面将设置 frame 的 name 属性。此 name 属性值可被获取到，以访问 Web 服务发送的信息。但 name 属性仅对相同域名的 frame 可访问。这意味着为了访问 name 属性，当远程 Web 服务页面被加载后，必须导航 frame 回到原始域。同源策略依旧防止其他 frame 访问 name 属性。一旦 name 属性获得，销毁 frame 。

在最顶层，name 属性是不安全的，对于所有后续页面，设置在 name 属性中的任何信息都是可获得的。然而 windowName 模块总是在一个 iframe 中加载资源，并且一旦获取到数据，或者当你在最顶层浏览了一个新页面，这个 iframe 将被销毁，所以其他页面永远访问不到 window.name 属性。

基本实现代码，基于 YUI，源自克军写的样例：

(function(){
    var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event;

    dataRequest = {
        _doc: document,
        cfg: {
            proxyUrl: 'proxy.html'
        }
    };

    dataRequest.send = function(sUrl, fnCallBack){
        if(!sUrl || typeof sUrl !== 'string'){
            return;
        }

        sUrl += (sUrl.indexOf('?') > 0 ? '&' : '?') + 'windowname=true';

        var frame = this._doc.createElement('iframe'), state = 0, self = this;
        this._doc.body.appendChild(frame);
        frame.style.display = 'none';

        var clear = function(){
            try{
                frame.contentWindow.document.write('');
                frame.contentWindow.close();
                self._doc.body.removeChild(frame);
            }catch(e){}
        };

        var getData = function(){
            try{
                var da = frame.contentWindow.name;
            }catch(e){}
            clear();
            if(fnCallBack && typeof fnCallBack === 'function'){
                fnCallBack(da);
            }
        };

        YUE.on(frame, 'load', function(){
            if(state === 1){
                getData();
            } else if(state === 0){
                state = 1;
                frame.contentWindow.location = self.cfg.proxyUrl;
            }
        });

        frame.src = sUrl;
    };
})();

Web 服务器如何提供 window.name 数据

为了让 Web 服务器实现 window.name，服务器应该只寻找请求中是否包含 windowname 参数。如果包含了 windowname 参数，服务器应该返回一个设置了 window.name 字符串值的 HTML 文档，回应此请求并传送到客户端。例如：
http://www.planabc.net/getdata.html?windowname=true

如果服务器想用 Hello 响应客服端，它应该返回一个 HTML 页面：

<html>
    <script type="text/javascript">
        window.name="Hello";
    </script>
</html>

同样也可以转换为 JSON 数据：

<html>
    <script type="text/javascript">
        window.name='{"foo":"bar"}';
    </script>
</html>

如果你手动创建资源，书写大量的多行的 JSON 对象为一个引用的字符串应该是比较困难的并且易于出错的。可以使用这样的 HTML 样例简单的创建 JSON 数据，将会转换为一个 JSON 字符串而无需手动转义 JSON 为字符串：

<html>
    <script type="\'text/javascript\'">
        window.name = document.getElementsByTagName("script")[0].innerHTML.match(/temp\s*=([\w\W]*)/)[1];
        temp= {
            foo:"bar", // put json data here
            baz:"foo"
        }
    </script>
</html>

同样的，如果你想传递 HTML/XML 数据，这里有一个样例实现，而无需手动将这些数据转换成字符串：

<html>
    <body>
        <p id="content">
            some <strong>html/xml-style</strong>data
        </p>
    </body>
    <script type="text/javascript">
        window.name = document.getElementById("content").innerHTML;
    </script>
</html>

window.name 传输技术相比其他的跨域传输的一些优势：

1. 它是安全的。也就是说，它和其他的基于安全传输的 frame 一样安全，例如 Fragment Identifier messaging （FIM）和 Subspace。(I)Frames 也有他们自己的安全问题，由于 frame 可以改变其他 frame 的 location，但是这个是非常不同的安全溢出，通常不太严重。
2. 它比 FIM 更快，因为它不用处理小数据包大小的 Fragment Identifier ，并且它不会有更多的 IE 上的“机关枪”声音效果。它也比 Subspace 快，Subspace 需要加载两个 Iframe 和两个本地的 HTML 文件来处理一个请求。window.name 仅需要一个 Iframe 和一个本地文件。
3. 它比 FIM 和 Subspace 更简单和安全。FIM 稍微复杂，而 Subspace 非常复杂。Subspace 也有一些额外的限制和安装要求，如预先声明所有的目标主机和拥有针对若干不同特殊主机的 DNS 入口。window.name 非常简单和容易使用。
4. 它不需要任何插件（比如 Flash）或者替代技术（例如 Java）。

一、DOM:Storage: sessionStorage

浏览器支持：Firefox 2.0+

基本语法：

• // 设置 key 值
  sessionStorage.key = value;
• // 获取 key 值
  value = sessionStorage.key;

备注：

1. 作为每个 window 对象的属性存在的全局对象，即：可以通过 sessionStorage 或者 window.sessionStorage 来访问它们。
2. sessionStorage 含有一个在页面会话有效期内（只要页面没有关闭，一个页面会话就始终保持着，且当页面被重新载入或恢复时“复活”，而打开一个新的标签页或新窗口都会初始化新的会话）可用的存储区域。
3. sessionStorage 持有那些应该保存的临时数据，一旦浏览器突然被刷新时，可恢复。
4. sessionStorage 暂时还没有实现在浏览器崩溃后存储和恢复数据的功能（ bug 339445 ）。

更多信息：sessionStorage specification

样例：自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。

// 获得我们要跟踪的那个文本字段
var field = document.getElementById("field");

// 看看我们是否有一个autosave的值
// (这将只会在页面被突然刷新时发生)
if ( sessionStorage.autosave ) {
    // 恢复文本字段中的内容
    field.value = sessionStorage.autosave;
}

// 每秒钟检查一次文本字段的内容
setInterval(function(){
    // 并把结果保存到会话存储对象中
    sessionStorage.autosave = field.value;
}, 1000);

二、DOM:Storage: globalStorage（重点）

浏览器支持：Firefox 2.0+

基本语法：

• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
• globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
• globalStorage[''] —— 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。

方法属性：

• setItem(key, value) —— 设置或重置 key 值。
• getItem(key) —— 获取 key 值。
• removeItem(key) —— 删除 key 值。

或者：

• // 设置 key 值
  window.globalStorage["planabc.net"].key = value;
• // 获取 key 值
  value = window.globalStorage["planabc.net"].key;

备注：

1. 作为每个 window 对象的属性存在的全局对象，即：可以通过 globalStorage 或者 window.globalStorage 来访问它们。
2. Storage 空间：整个域名的默认 Storage 大小为 5MB （不过 Storage 区域的大小用户可以自定义），globalStorage['net'] 为 2MB，globalStorage['planabc.net'] 为 3MB，如果超过限制，则会报错。
3. Firefox 支持 Storage 事件：document.addEventListener(“storage”, eventHandler, false);。
4. Firefox 目前还没有实现 globalStorage[tld] 和 globalStorage[''] （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的。
5. Firefox 2 允许访问比当前文档域名层次高的存储的对象，由于安全的因素 Firefox 3 中不再允许。

更多信息：globalStorage specification

样例：（DOM Storage Test）

// 跟踪一个用户在你的域名下所访问的所有页面的次数
globalStorage['mozilla.org'].visits =
    parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

参考阅读：

• 《DOM:Storage》
• 《DOM Storage》
• 《DOM Storage Answers》
• 《Structured client-side storage》

现在最流行的本地存储莫过于 cookie 的应用，但浏览器对 cookie 有很多限制，最大的限制在于其对cookie 总大小，仅为 4K 左右（包括名（name）、值（value）和等号）。

对于复杂一点的应用和需求，仅有的 4K 大小还是有点相形见绌，其实很多浏览器（IE、Firefox、Safari）本身也提供了自己的本地存储的功能，或许在特定的环境下能满足我们。

一、userData behavior

浏览器支持：IE5.0 或以上

基本语法：

• XML：<Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
• HTML：
  <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>
  object.style.behavior = “url(‘#default#userData’)”
• Script： object.addBehavior (“#default#userData”)

属性：

• expires —— 设置或者获取 userData behavior 保存数据的失效日期。
• XMLDocument —— 获取 XML 的引用。

方法：

• getAttribute() —— 获取指定的属性值。
• load(object) —— 从 userData 存储区载入存储的对象数据。
• removeAttribute() —— 移除对象的指定属性。
• save(object) —— 将对象数据存储到一个 userData 存储区。
• setAttribute() —— 设置指定的属性值。

备注：

1、从安全方面考虑，一个 userData 存储区只能用于同一目录和对同一协议进行存储。

2、如果使用 userData behavior 不正确可能会对你的应用造成危害，userData 存储区中的数据没有加密因而不安全的。任何可以访问 UserData 保存磁盘的应用都可以访问该数据，所以，推荐不要保存敏感的数据，比如信用卡号，详细：《Security Considerations: DHTML and Default Behaviors》

3、userData behavior 会跨 session 存储信息到存储区，这提供了动态的数据结构和比 cookie（一般 4KB） 更大的容量。userData 存储区的容量依赖于 domain 的安全域。下表显示的是 userData 存储最大容量，对单独文档和整个域名的所有文档都适用，但基于安全域。

4、如果设置 userData behavior 到 html、head、title 或者 style 对象上，当 save 和 load 方法被调用时会出错。如果必须设置到 style 中，可以设置内联或者文档头，例如：

<style>
    .storeuserData {behavior:url(#default#userData);}
</style>

5、对于 userData behavior 来说 ID 是可选的，但是如果有，则会改善执行性能。

6、userData 可以将数据以 XML 格式保存在客户端计算机上，一般保存在 C（WIN 系统盘）:\Documents and Settings\XXX\UserData\ 文件夹下。

7、userData 数据一直存在，除非人为删除或者用脚本设置该数据的失效日期（expires）。

大部分翻译自：《userData Behavior》

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Firefox下innerHTML的一个BUG</title>
<style type="text/css">
    a { display: block; border: 1px solid red;}
    div { display: inline; border: 1px solid red;}
</style>
</head>
<body>
<a href="javascript:change();">change<div id="count">20</div>aaa</a>
<script type="text/javascript">
function change() {
    var count = document.getElementById('count');
    var c = count.innerHTML;
    var page = parseInt(c)+1;
    count.innerHTML = page;
    alert(page);
}
</script>
</body>
</html>

当你在 Firefox2.0+ 或 Firefox3.0+ 中点击链接后，会发现 innerHTML 插入的内容为<a>21</a>，而其他浏览器测试（IE6、IE7、Safari3.0+、Opera9.0+）都正常，插入内容均为文字 21。

估计是 Firefox 的一个 BUG，查找了官方网站的 BUG库，果真找到别人提交的该类问题——《Setting innerHTML on a block element inside an inline element creates extra copies of the inline element》（Bug 381808）。

我们可以参阅下8楼的 Boris Zbarsky 给出的个人解释：

There are two separate concepts of block vs inline. One in CSS and one in
HTML. They don't match.

In any case, the point is that in HTML <b> is not allowed to contain <div> (so
the <b> needs to get closed), but the text needs to be bold for compat so we do
residual style handling. HTML5 is going to define a different method of doing
this anyway, so at that point we'll need to revisit this bug.

虽然这是一个 BUG，但 BUG 的造成也却是人为的不良习惯造成的，在 WEB 标准中严格来说内联元素是不允许包含块级元素的（扩展阅读：《Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)》）。

其中举了个例子：

function createButton() {
    var obj = document.createElement("button");
    obj.innerHTML = "click me";
    obj.onclick = function() {
        //handle onclick
    }

    obj.onmouseover = function() {
        //handle onmouseover
    }
    return obj;//return a object which has memory leak problem in IE6
}

var dButton = document.getElementById("d1").appendChild(createButton());
//skipped....

对于 IE6 中，引起内存泄露的原因，可看《Understanding and Solving Internet Explorer Leak Patterns》一文。

上面的例子，应该属于上文中的 “Closures”原因。

再看下用 try … finally 的解决方法：

/**
     * Use the try ... finally statement to resolve the memory leak issue
*/
 function createButton() {
    var obj = document.createElement("button");
    obj.innerHTML = "click me";
    obj.onclick = function() {
        //handle onclick
    }
    obj.onmouseover = function() {
        //handle onmouseover
    }

    //this helps to fix the memory leak issue
    try {
        return obj;
    } finally {
        obj = null;
    }
}

var dButton = document.getElementById("d1").appendChild(createButton());
//skipped....

可能大家有疑问： finally 是如何解析的呢？

答案是：先执行 try 语句再执行 finally 语句。

例如：

function foo() {
    var x = 0;
    try {
        return print("call return " + (++x));
    } finally {
        print("call finally " + (++x));
    }
}

print('before');
print(foo());
print('after');

返回的结果为：
print » before
print » call return 1
print » call finally 2
print » true
print » after

更多详细的演示：《Finally, the alternative fix for IE6’s memory leak is available》

相关的一些讨论：《Is “finally” the answer to all IE6 memory leak issues?》