为什么这样也能运行? [ ].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]。

---

扫码二维码关注我的公众号