zoukankan      html  css  js  c++  java
  • 【Cson原创】javascript中length属性的探索

    本文中,我将会通过类数组对象(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属性的值。

  • 相关阅读:
    初步了解软件工程的概念
    实验十四 团队项目评审&课程学习总结
    201671030125 曾佳+《英文文本统计分析》结对项目报告
    201671030125+词频统计软件项目报告
    201671030125 曾佳 + 实验三作业互评与改进报告
    初识 软件工程
    Enjoy Markdown!
    实验十四 团队项目评审&课程学习总结
    201671030127赵津莹 《英文文本统计分析》结对项目报告
    201671030127词频统计软件项目报告
  • 原文地址:https://www.cnblogs.com/Cson/p/2122288.html
Copyright © 2011-2022 走看看