jQuery鏈式操做實現原理 (Array-Like Object)

1.經過數組方式支持連寫

     JavaScript 中能夠設計一種用起來像 Array 的對象，今天小測試了一下：

var a = ['ab', 'ac', 'add'];
a.replace = function ( c, v ) {
    for (var i = 0; i < this.length; i++) {
		this[i] = this[i].replace(c, v);
	}
	return this;
}

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

      最原始的是直接往一個 Array 對象裏面添加方法，支持鏈式操做，可是Object.prototype.toString.call(b)爲一個[object Array]對象，說明b是一個數組對象，而且這個對象包含了Array原生的如slice和join等方法，污染了咱們想要的對象。

      在firebug中b對象的打印以下：

2.經過Array-Like Object方式支持鏈式操做

      在jQuery中呢，與網上應用的差很少，重寫對象中的splice方法，讓瀏覽器誤認爲其爲一個數組，在Object.prototype.toString.call(d)中打出的爲[object Object]的信息，jQuery正是使用了這種方法才使得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打印結果爲：

在控制檯中輸入d.slice，打印爲undefined，說明對象d沒有被數組方法污染。

經過這種方式理解jQuery的鏈式操做，於我的感受，更加淺顯易懂。

參考： http://stackoverflow.com/questions/6599071/array-like-objects-in-javascript