为什么这样也能运行? [ ].concat[1,2,3]

1,690 阅读2分钟

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]


每周推送原创高质量文章,欢迎关注我的公众号

微信公众号