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

先來看一個問題：

如何理解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)

感謝您閱讀上海前端培訓文章，更多閱讀或幫助請點擊獲取。歡迎評論，謝謝關註！