Array.prototype.concat不是通用方法反駁[譯]_javascript技巧

ECMAScript 5.1規範§15.4.4.4 中說到:

複製代碼 代碼如下:

concat函數是有意設計成通用的;它並不要求它的this值必須得是個Array對象.因此,它可以被轉移到其它類型的對像上作為方法來調用.

本文中的程式碼都使用了[]來作為Array.prototype的快捷方式.這已經是很常用的技巧了,雖然可讀性差點:你透過一個物件實例存取到了Array.prototype上的方法.但是,這樣的訪問方式在現代的JavaScript引擎中非常之快,以至於我懷疑,說不定在這種調用方式下,這些JavaScript引擎可能已經不再創建數組實例了.本文中所有的例子都在Firefox和V8中嘗試運行過.

讓我們看一下concat到底是不是個通用方法:如果它是一個通用方法,則不管this的值是一個真實數組還是個類別數組物件(擁有length屬性,能透過索引存取每個元素),方法的回傳結果都應該是一樣的.我們首先嘗試在陣列上呼叫concat方法:

複製程式碼 程式碼如下:

> ["hello"].concat(["world"])
["hello" , "world"]

> [].concat.call(["hello"], ["world"]) // 和上面的一樣
["hello", "world"]

然後,我們使用一個類別數組物件來進行上面的連接操作.結果應該是一樣的.

複製程式碼 程式碼如下:

> [].concat.call({ 0: "hello", length: 1 }, ["world"])
[ { '0': 'hello', length: 1 }, 'world' ]

特殊變數arguments也是一個類別陣列物件.結果仍然不是我們所期望的:

複製程式碼 程式碼如下:

> function f() { return [].concat.call(arguments , ["world"]) }
> f("hello")
[ { '0': 'hello' }, 'world' ]

真正的一般方法應該是這樣的Array.prototype.push:

複製程式碼 程式碼如下:

程式碼如下:


> var arrayLike = { 0: "hello", length: 1 };
> [].push.call(arrayLike, "world")

2
> arrayLike
{ '0': 'hello', '1': 'world', length: 2 } 譯者註:瀏覽器只是按照標準來實現,所以並不存在bug的問題.