jQuery链式操作实现原理 (Array-Like Object)

jQuery链式代码风格：jQuery(“#one_div”).html(“something”).on(“click”, function(){}).find(“p”); 的实现原理解析。

[size=large][b]1.通过数组方式支持连写[/b][/size]
JavaScript 可以设计用起来像 Array 的对象：
[code]
var arr = ['ab', 'ac', 'add'];
arr.replace = function ( c, v ) {
for (var i = 0; i < this.length; i++) {
this[i] = this[i].replace(c, v);
}
return this;
}

arr.add = function(v) {
for ( var i = 0; i < this.length; i++ ) {
this[i] = this[i] + v;
}
return this;
}
var b = arr.replace('a', 't-').add('-add');
[/code]

往 Array 对象里面添加方法，每个方法返回当前对象，使链式操作完成。使用 Object.prototype.toString.call(b) 结果为 [object Array] 对象，说明b是一个数组对象，b对象包含了 Array 原生 slice 和 join 等方法，污染了最终对象。
在firebug中b对象的打印如下：

[img]http://dl.iteye.com/upload/attachment/0068/8280/8da97c77-7e99-306e-a247-bef5b6d2f844.png[/img]

[size=large][b]2.通过Array-Like Object方式支持链式操作[/b][/size]
在jQuery中，重写对象的 splice 方法，让浏览器误认 jQuery 对象为一个数组，但Object.prototype.toString.call(d)中打出的为[object Object]的信息，使jQuery('div')得到的对象为一个非Array对象

// 最终答案
var c = {};
c[0] = 'ab';
c[1] = 'ac';
c[2] = 'add';
// 模拟数组必需指定length属性，元素增加或者修改时需要同时改变
c.length = 3;
// 此处是重点，使用了数组的splice方法后，才能将该对象模拟成数组
c.splice = [].splice;
c.replace = function ( c, v ) {
    for (var i = 0; i < this.length; i++) {
        this[i] = this[i].replace(c, v);
    }
    return this;
}

c.add = function(v) {
    for ( var i = 0; i < this.length; i++ ) {
        this[i] = this[i] + v;
    }
    return this;
}
// 链式操作实现
var d = c.replace('a', 't-').add('-add');

在firebug打印结果为：

[img]http://dl.iteye.com/upload/attachment/0068/8284/a82bda8a-5261-3d2b-90ca-7bd7d79088c8.png[/img]

在控制台中输入d.slice，打印为undefined，说明对象d没有被数组方法污染。
参考：http://stackoverflow.com/questions/6599071/array-like-objects-in-javascript