爲什麼這樣也能運行? [ ].concat[1,2,3]

This is just for fun.

本文的宗旨是:This is just for fun。這段代碼沒有任何實用的價值,但是通過這段代碼,你可以瞭解 javascript 被忽略的知識點和語法。

1. 問題

下面的代碼的執行結果是什麼?

[].concat[1,2,3]

2. 答案

先給出答案:undefined

大部分人可能會認爲這段程序應該拋出語法異常:

Uncaught SyntaxError: ....

3. 分析

這段程序和下面的代碼很像:

[].concat([1,2,3])

concat() 方法將傳入的數組或非數組值與原數組合並,組成一個新的數組並返回。但是上面的代碼沒有使用小括號,所以他們兩個並不是相同的。那麼我們來拆開分析一下 [].concat[1,2,3] 是怎麼執行的:

首先計算 [].concat,這個的結果是 Array.prototype.concat

第二步執行一個逗號操作符。逗號操作符對它的每個操作對象求值(從左至右),然後返回最後一個操作對象的值。

> 1,2,3
3

第三步執行一個數組訪問運算屬性訪問運算。因爲 [].concat 是一個函數,函數也是對象,所以這是一個屬性訪問運算。同理,知道了 [] 是數組訪問運算或屬性訪問運算,你可以很快說出下面代碼的結果:

[[]][0]
[[[1]]][0][0][0]
[[[1]]][[0][0]][0][0]

看似很複雜,你只需要按操作符的優先級和結合性一步一步分解,就可以求出最後的結果。

那麼我們回到之前的問題,[].concat[1,2,3] 其實等價於:

Array.prototype.concat[3]

那麼結果自然就是 undefined

4. 番外篇

因爲 javascript 的原型是可以修改的,因此我們可以定義:

Array.prototype.concat[3] = [1,2,3];

這時我們再調用 [].concat[1,2,3] 就會得到結果 [1,2,3]


每週推送原創高質量文章,歡迎關注我的公衆號

公衆號
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章