爲何這樣也能運行? [ ].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]。

---

每週推送原創高質量文章，歡迎關注個人公衆號

微信公衆號