歡迎光臨
每天分享高質量文章

Javascript – Arraylike的7種實現

jQuery的崛起讓ArrayLike(類陣列)在javascript中大放異彩,它的出現為一組資料的行為(函式)擴展提供了基礎。

類陣列和陣列相似,具有陣列的某些行為,但是它相比陣列可以更加自由的擴展,它的存在讓一組資料的表現不再受限於陣列,也無需去污染陣列本身的原型——它來自javascript物件的挖掘和擴展,而並非javascript本身就存在的。簡單的說,它來自陣列,比陣列更加適合擴展。

這篇文章主要分為以下知識

  • 鋒芒畢露的ArrayLike
  • ArrayLike的實現
  • 其他

鋒芒畢露的ArrayLike

如果你已經瞭解了ArrayLike,這一節可以略過。

ArrayLike(類陣列/偽陣列)即擁有陣列的一部分行為,在DOM中早已表現出來,而jQuery的崛起讓ArrayLike在javascript中大放異彩。正如它的翻譯一樣:它類似於陣列。

ArrayLike物件的精妙在於它和javascript原生的Array類似,但是它是自由構建的,它來自開發者對javascript物件的擴展,也就是說:對於它的原型(prototype)我們可以自由定義,而不會污染到javascript原生的Array。

過去針對一組資料的擴展是下麵這個樣子的:

//污染Array實現擴展

Array.prototype.demo = function () {

//check

};

var test = [];

test.demo();

上面代碼你們懂的,污染了Array,在協同式開發中這簡直就是作孽啊——ArrayLike應此誕生。

ArrayLike讓你對一組資料的擴展不再受限於Array本身,同時也不會影響到Array,說白了就是:一組資料,肯定是有陣列來存,但是如果要對這組資料進行擴展,會影響到陣列原型,ArrayLike的出現則提供了一個中間資料橋梁,ArrayLike有陣列的特性, 但是對ArrayLike的擴展並不會影響到原生的陣列。舉個慄子:

爸爸媽媽對你期望很高,你要好好學習,但是舍友基佬教會了你打dota,整天拉你打dota讓你沒時間看書學習,結果呢,就是打得一手好dota學習掉下去了——但是如果,你開了分身斧,讓你的分身去打dota,你自己仍然好好學習,dota學習兩不誤,而且你的分身不僅僅可以打dota,也可以去打wow,把妹,做你做不到的事情,是不是覺得這樣不就碉堡了麽!!!

沒錯,ArrayLike就是要乾這麼碉堡的事情。

常見的ArrayLike有下麵這幾個,詳見:其他。

  • Arguments
  • NodeList
  • StyleSheetList
  • HTMLCollection
  • HTMLFormControlsCollection (繼承HTMLCollection)
  • HTMLOptionsCollection(繼承HTMLCollection)
  • HTMLAllCollection
  • DOMTokenList

ArrayLike的實現

第一種 – 通過閉包實現:

通過閉包實現,內部採用一個Array作為基礎,API是針對陣列進行操作,在API的實現上較差。並且不支持直接通過索引(array[0])來訪問元素,通過閉包實現上會丟失instanceof的判定,優點是夠輕。

!function () {

//通過閉包實現

var List = function () {

var list = [],

self = {

constructor: List,

//如果希望更像原生一點,將length定義為屬性,那麼length則需要自己維護

length: function () { return list.length; },

add: function (item) {

list.push(item);

},

eq: function (index) {

return list[index];

}

};

return self;

};

//測試

console.group(‘第一種 – 通過閉包實現’);

var demo = new List();

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:red;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

//無法通過索引demo[0]這種方式訪問

console.log(‘成員:[ ‘ + demo.eq(0) + ‘ , ‘ + demo.eq(1) + ‘ ]’);

console.log(‘length:’ + demo.length());

//註意看demo物件

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第二種 – 通過繼承實現:

主要亮點(應用)在保留Array的API,在Array上二次封裝,可以通過索引來訪問。

!function () {

//通過繼承陣列實現,陣列原生方法會被繼承過來

var List = function () { };

List.prototype = [];

List.prototype.constructor = List;

List.prototype.add = function (item) {

this.push(item);

};

//測試

console.group(‘第二種 – 通過繼承實現’);

var demo = new List();

//源於繼承

demo.push(‘Array – push()’);

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:blue;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

//註意看demo物件

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第三種 – 通過自我維護實現:

在增刪改上需要自我維護length,相比下來很是折騰和繁瑣,只是提供一種代碼思路,並不提倡,可以通過索引訪問,

!function () {

//通過自動維護length實現

var List = function () {

this.length = 0;

};

List.prototype.add = function (item) {

//讓物件模擬Array的行為

this[this.length++] = item;

};

console.group(‘第三種 – 通過自我維護實現’);

var demo = new List();

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:blue’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

//註意看demo物件

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第四種 – 針對第一種優化:

在add中通過Array原生的APIArray.prototype.push來實現,原理是只要呼叫過Array原生的增刪改API操作函式(僅第一次即可),則可以通過索引來訪問元素,但是instanceof的判定仍未修複。

!function () {

//第四種Array-Like

var List = function () {

var self = {

constructor: List,

length: 0,

add: function (item) {

//本質在這裡,交給Array的自動維護

[].push.call(this, item);

}

};

return self;

};

console.group(‘第四種 – 針對第一種優化’);

var demo = new List();

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:red;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第五種 – 修複instenceof判定:

這種修複有點勉強,因為在ie下並沒有__proto__,所以這裡所謂的修複只不過是針對現代瀏覽器而已,只是提供一種思路,關於instenceof請參考請參考:其他。

!function () {

//第五種,我們看見上面那種instanceOf並不能傳回正確的結果,於是我們修正它

var List = function () {

/*

instanceof 檢測一個物件A是不是另一個物件B的實體的原理是:

查看物件B的prototype指向的物件是否在物件A的[[prototype]]鏈上。

如果在,則傳回true,如果不在則傳回false。

不過有一個特殊的情況,當物件B的prototype為null將會報錯(類似於空指標異常)。

reference:http://kb.cnblogs.com/page/77478/

*/

self = {

constructor: List,

length: 0,

//強制取用__proto__,IE並不支持

__proto__: List.prototype,

add: function (item) {

push.call(this, item);

}

},

//cache

push = Array.prototype.push;

return self;

};

console.group(‘第五種 – 修複instenceOf判定’);

var demo = new List();

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:blue;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第六種 – jQuery的實現:

jQuery建構式繁瑣的實現不僅僅只是為了去new化,同時也修複了針對jQuery物件的判定,巧妙的將原型重新指向,讓instenceof可以在原型鏈中查找到jQuery建構式,使得instenceOf判定有效,讓jQuery直逼真正的javascript物件。

!function () {

//jQuery Array-Like實現

var jQuery = function () {

return new jQuery.fn.init();

}, push = Array.prototype.push;

jQuery.fn = jQuery.prototype = {

constructor: jQuery,

length: 0,

add: function (item) {

//使用Array.prototype.push添加元素,會自動維護length

push.call(this, item);

}

};

jQuery.fn.init = function () {

return this;

};

//漂亮的重置prototype

jQuery.fn.init.prototype = jQuery.fn;

console.group(‘第六種 – jQuery的實現’);

var demo = new jQuery();

demo.add(‘List – add()’);

console.log(‘demo instanceof jQuery : %c’ + (demo instanceof jQuery), ‘color:blue’);

console.log(‘demo.constructor === jQuery : %c’ + (demo.constructor === jQuery), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第七種 – 最簡單的實現:

並沒有採用閉包,而是通過定義原型實現,實現方法類似第四種,但是原型指向正確,instenceof判定有效。

//最簡單的類陣列實現

!function () {

var List = function () { }, push = Array.prototype.push;

List.prototype = {

constructor: List,

length: 0,

add: function (item) {

push.call(this, item);

}

};

console.group(‘第七種 – 最簡單的實現’);

var demo = new List();//只是需要new

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:blue;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

console.log(demo);

console.groupEnd();

}();

運行結果和demo物件結構:

第八種 – jQuery拆解版:

為了更好的理解jQuery的建構式實現,所以給出了這種,jQuery.fn.init就是本例中的ArrayLike物件,jQuery只是把init掛載到jQuery.prototype上了而已。

(function () {

var List = function () {

return new ArrayLike();

}, ArrayLike = function () {//這個array-like就是jQuery拆解版的實現

};

List.prototype = {

constructor: List,

length: 0,

add: function (item) {

Array.prototype.push.call(this, item);

}

};

//就是jQuery的jQuery.fn.init.prototype = jQuery.fn;

ArrayLike.prototype = List.prototype;

//測試

console.group(‘第八種 – jQuery拆解版’);

var demo = List(); //這樣就不用new了

demo.add(‘List – add()’);

console.log(‘demo instanceof List : %c’ + (demo instanceof List), ‘color:blue;’);

console.log(‘demo.constructor === List :%c’ + (demo.constructor === List), ‘color:blue’);

console.log(‘[ ‘ + demo[0] + ‘ , ‘ + demo[1] + ‘ ]’);

console.log(‘length:’ + demo.length);

console.log(demo);

console.groupEnd();

})();

運行結果和demo物件結構:

其實應該叫做類陣列物件的7次實現…有點標題黨的意思…..不要打臉…

其他

  • 完整原始碼:https://github.com/linkFly6/linkfly.so/blob/master/LinkFLy/LinkFly/ArrayLike.js
  • 參考文章:JavaScript類陣列物件參考
  • 參考文章:理解instanceof實現原理

來自:linkFly

鏈接:http://www.cnblogs.com/silin6/p/4309925.html



赞(0)

分享創造快樂