JavaScript中如何理解如何理解Array.apply(null, {length:5})

我会带着你远行 2022-05-30 00:16 150阅读 0赞

先来看一个问题：

如何理解Array.apply(null, \{length:5\})的\{length:5\}?

我测试过  
Array.apply(null, \{length:5\}) //返回\[undefined, undefined, undefined, undefined, undefined\]

Array.apply(null, \[\{length:5\}\])和Array(\{length:5\})返回的结果是一样的,为  
\[\[object Object\] \{  
length: 5  
\}\]

第二、三还能理解！第一种怎么理解？

实际 这个 和 Array 没有任何关系，只是碰巧 使用 Array 时遇到了。

我觉得这个问题应该从 Function.call和 Function.apply 来入手。  
这两个 函数的方法 功能都是一样的，都是为了改变 this 的指向。  
唯一的区别就是参数不一样，apply的第二个参数必须传入数组。

首先需要有个 函数，定义个 iAmArray；

var iAmArray = function(){
        return arguments;
    };

这里不用管this，下面是正常调用它的三种方式：

//方便你复制到 Console 中测试，在此再写一遍
    var iAmArray = function(){
        return arguments;
    };
    
    //普通写法
    iAmArray(1,2,3);
    /*
        [1, 2, 3]
    */
    
    //call写法
    iAmArray.call(null,1,2,3);
    /*
        [1, 2, 3]
    */
    
    //apply写法
    iAmArray.apply(null,[1,2,3]);
    /*
        [1, 2, 3]
    */

apply方式调用时，估计是一个小bug，只要是 Object，还有length，它就当作数组处理了，实际和 Array 没有任何关系，任何函数都会这样。

//方便你复制到 Console 中测试，在此再写一遍
    var iAmArray = function(){
        return arguments;
    };
    
    var iHaveLength = function(length){
        this.length = length || 5;
        this[2] = "第三个元素";
    };
    
    /*
       只要是 Object，还有length，他就当作数组处理了。
    */
    iAmArray.apply(null, new iHaveLength());
    /*
        [undefined, undefined, "第三个元素", undefined, undefined]
    */
    iAmArray.apply(null, new iHaveLength(3));
    /*
        [undefined, undefined, "第三个元素"]
    */

最后总结

然后其实第二个参数只要是个类数组对象就可以了，比如 \{length: 5\} 就可以看作一个类数组对象，长度是 5，每个元素，比如 v\[0\] 是 undefined。

所以，Array.apply(null, \{ length: 5\}) 相当于  
Array(undefined, undefined, undefined, undefined, undefined)

感谢您阅读，更多阅读或帮助请点击 *[上海前端培训][Link 1]*获取。

[Link 1]: http://www.shsxt.com/it/html5