西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → javascript中l(wèi)ength屬性的秘密分析

javascript中l(wèi)ength屬性的秘密分析

前往專題相關(guān)軟件相關(guān)文章發(fā)表評論 來源:西西整理時間:2011/7/30 23:50:10字體大。A-A+

作者:西西點(diǎn)擊:334次評論:0次標(biāo)簽: javascript

  • 類型:電子教程大。3.3M語言:中文 評分:3.6
  • 標(biāo)簽:
立即下載

本文中,我將會通過類數(shù)組對象(array like object),探索javascript中的length屬性的一些秘密。

例子1:

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

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

但是類數(shù)組對象的length所確實和存儲的數(shù)據(jù)量沒有任何關(guān)系么?例子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以下版本,在通過強(qiáng)制使用數(shù)組方法為類數(shù)組對象添加元素時,對象的length屬性也會被計算。而IE8以下版本貌似不支持強(qiáng)制使用數(shù)組方法為類數(shù)組對象添加元素。

例子3:

該例子在例子2的myarr構(gòu)造函數(shù)中添加一個初始化操作,在類數(shù)組對象初始化時添加一個元素,怪異的事情發(fā)生了:

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以下版本瀏覽器繼續(xù)貌似不支持強(qiáng)制使用數(shù)組方法,這個再下一個例子中會作討論。而對于其他瀏覽器,length屬性輸出為3,而索引為2的元素是’xiaoc‘,顯然js引擎完全忽略了類數(shù)組對象原來所存在的索引為0的元素‘cc'!馬上我們再看下一個例子,這個例子在例子3的基礎(chǔ)上多加一個對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‘

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

現(xiàn)在再試試把length屬性初始化為不合法類型:

例子4:

function myarr(){this[0]='cc'; this.length="bo";}//length設(shè)置為不能轉(zhuǎn)換為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設(shè)置為能轉(zhuǎn)換為數(shù)字的不合法類型
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出4
alert(m[2]);//輸出’lai‘

從上面的所有例子來看,我們可以作出一個推斷,在使用數(shù)組方法時(這里以push為例),大概是這樣的流程:

IE6 7:

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

其他瀏覽器:

其他瀏覽器會根據(jù)length屬性作不同操作,如果length屬性不存在,則設(shè)置length為0,如果length屬性為不合法值,則嘗試轉(zhuǎn)換為number類型,如果轉(zhuǎn)換失敗則也length設(shè)置為0。

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

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

從上面的例子中,我們可以得出一個結(jié)論:當(dāng)我們使用類數(shù)組對象時,為了避各種length計算不正確引起的怪異問題,我們應(yīng)該在初始化類數(shù)組對象時初始化length屬性的值如果在初始化時添加了元素但卻沒有設(shè)置length屬性的值,在使用數(shù)組方法時,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‘

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

即使強(qiáng)制設(shè)置length屬性,IE6 7 下死活為0:

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

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

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)