相信很多都看到过 JavaScript 连续赋值面试题的解读文章,在本文中我们不去猜测,而是通过 Proxy 来揭示这一过程,你将会得到一个意想不到的结论。
首先要申明的是,这种题目不应该作为普通前端岗位的面试题目存在,也更不应该编写这样的代码。网上有很多文章都在解析这到题目,题目基本一样,我在下面贴出了最常见的一个。
var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };
console.log(a.x);
console.log(b.x);
复制代码
答案可能很难回答,但是要想知道答案却很简单,只要在控制台执行一下即可:undefined
, {n:2}
. 对于这个答案网上有很多推测,但是好像统统错误。我也曾对这个答案做过各种推断,尝试解释这个答案,尝试自圆其说。但是很快我意识到这样做是错误的,我们应该阅读ECMAScript
规范,应该阅读V8
引擎的源码。规范难读,源码难看,还能怎么做呢?好了,下面我通过Proxy
来揭露连续赋值的过程。首先我们改造一下代码,将a
改成一个代理对象,这样对a
的修改将一目了然。
// 初始化代码
var a = new Proxy(
{ n: 1 },
{
get: function(target, prop) {
console.log('get', prop, target[prop]);
return target[prop];
},
set: function(target, prop, value) {
console.log('set', prop, value);
target[prop] = value;
},
}
);
var b = a;
复制代码
现在我们执行一下代码
a.x = a.y = 1;
复制代码
控制台打印如下:
set y 1
set x 1
复制代码
由此可以验证,如我们以前所被告知的那样的,连续赋值操作是从右往左执行的。我们再来执行代码
// 为了消除前一步代码执行的影响,请在这里添加上面的初始化代码
a.x.y = a.y.x = 1;
复制代码
控制台打印如下:
get x undefined
get y undefined
Uncaught TypeError: Cannot set property 'x' of undefined
复制代码
根据以上结果我们判断,V8
引擎首先获取a.x
的值,虽然是undefined
也不直接报错,继续获取a.y
的值,同样是undefined
也不报错,然后执行赋值操作,给a.y
即undefined
添加x
属性时报错,赋值操作中断。
现在再来看本文最初的题目,就很容易理解了吧。
- 首先是左侧,表达式
a.x
是对象赋值,获取a
的值,为{ n: 1 }
(也就是b
),等待右侧表达式返回值进行赋值 - 然后是中间,表达式
a
不需要提前处理,等待右侧表达式的返回值 - 再然后是右侧新建对象
{ n: 2 }
- 再然后回到第 2 步,将右侧返回值
{ n: 2 }
赋值为变量a
- 最后是将右侧是赋值表达式
a = { n: 2 }
的值{ n: 2 }
赋值为对象{ n: 1 }
(也就是b
)的x
属性
我的讲解到此结束。各位读者,你们有不同的看法吗?