本文中，我將會通過類數組對象（array like object），探索javascript中的length屬性的一些秘密。

例子1：

var obj={0:'a',1:'b'}
alert(obj.length); //undefined
var arr=['a','b']
alert(arr.length); // 2

從上面的例子看，類數組對象中的length屬性并不和它儲存的數據數量直接掛鉤，無論是索引屬性（0，1）還是length屬性都作為對象的普通屬性存在，它們之間并沒有任何關系，js引擎并不會根據儲存數據的數量來自動計算類數組對象的長度。

但是類數組對象的length所確實和存儲的數據量沒有任何關系么？例子2說明并非如此：

例子2：

function myarr(){}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//IE8以下：undefined 其他瀏覽器：3
alert(m[2]);//IE8以下：undefined 其他瀏覽器：‘xiaoc’

從例子2可以看到，除了IE8以下版本，在通過強制使用數組方法為類數組對象添加元素時，對象的length屬性也會被計算。而IE8以下版本貌似不支持強制使用數組方法為類數組對象添加元素。

例子3：

該例子在例子2的myarr構造函數中添加一個初始化操作，在類數組對象初始化時添加一個元素，怪異的事情發生了：

function myarr(){this[0]='cc';}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//ie8以下：undefined 其他：3
alert(m[2]);//ie8以下：undefined 其他：xiaoc

ie8以下版本瀏覽器繼續貌似不支持強制使用數組方法，這個再下一個例子中會作討論。而對于其他瀏覽器，length屬性輸出為3，而索引為2的元素是’xiaoc‘，顯然js引擎完全忽略了類數組對象原來所存在的索引為0的元素‘cc'！馬上我們再看下一個例子，這個例子在例子3的基礎上多加一個對length屬性的初始化：

function myarr(){this[0]='cc'; this.length=1;}//多加一個length的初始化
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出4
alert(m[2]);//輸出’lai‘

奇怪的事再次發生，這次所有瀏覽器（包括ie6 7）都正確輸出4，索引為2的元素正確輸出為’lai‘，可見IE 6 7添加了length屬性的初始化之后，可以正常使用數組方法了。

現在再試試把length屬性初始化為不合法類型：

例子4：

function myarr(){this[0]='cc'; this.length="bo";}//length設置為不能轉換為number的不合法類型
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出 3
alert(m[2]);// 輸出’xiaoc‘ function myarr(){this[0]='cc'; this.length="1";}//length設置為能轉換為數字的不合法類型
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出4
alert(m[2]);//輸出’lai‘

從上面的所有例子來看，我們可以作出一個推斷，在使用數組方法時（這里以push為例），大概是這樣的流程：

IE6 7：

可見IE6 7并非不支強制持使用數組方法添加元素，但是會先判斷length屬性是否存在，如果不存在，則返回，不做任何操作。如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則length設置為0，這就可以解析例子2,3里輸出的undefined和例子4的正確輸出。

其他瀏覽器：

其他瀏覽器會根據length屬性作不同操作，如果length屬性不存在，則設置length為0，如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則也length設置為0。

正因為length屬性對于數組方法有如此決定性的作用，因此js引擎禁止了對length屬性寫入不合法值：

var arr=['1','2','3'];
arr.length='undefined';
//報錯 invalid array length

從上面的例子中，我們可以得出一個結論：當我們使用類數組對象時，為了避各種length計算不正確引起的怪異問題，我們應該在初始化類數組對象時初始化length屬性的值，如果在初始化時添加了元素但卻沒有設置length屬性的值，在使用數組方法時，IE6 7會忽略所有操作，其他瀏覽器則會忽略初始化時添加的元素。

另外再介紹length屬性帶來的另一個問題：

請看例子5：

function myarr(){}
myarr.prototype=new Array();
var m=new myarr();
m.push('cson','lai','xiaoc');
alert(m.length);//IE6 7：0 其他：3
alert(m[2]);//所有瀏覽器：’xiaoc‘

當使用原型繼承數組時，IE 6 7下length會始終為0，無論你有多少個元素，其他瀏覽器則正常。

即使強制設置length屬性，IE6 7 下死活為0：

function myarr(){}
myarr.prototype=new Array();
var m=new myarr();
m.length=10;
alert(m.length);//IE6 7:0 其他：10

因此得出結論：IE6 7下對象原型繼承數組時length屬性會一直為0，因此如果類數組對象需要使用數組的方法，不要去繼承數組，而應該使用Array.prototype.xxx.apply(obj,[]);的方法，并且記得正確初始化length屬性的值。

轉載于:https://www.cnblogs.com/Cson/archive/2011/07/30/2122288.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【Cson原创】javascript中length属性的探索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。