通过 Proxy 揭秘 JavaScript 的连续赋值

相信很多都看到过 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属性时报错，赋值操作中断。

现在再来看本文最初的题目，就很容易理解了吧。

1. 首先是左侧，表达式a.x是对象赋值，获取a的值，为{ n: 1 }（也就是b），等待右侧表达式返回值进行赋值
2. 然后是中间，表达式a不需要提前处理，等待右侧表达式的返回值
3. 再然后是右侧新建对象{ n: 2 }
4. 再然后回到第 2 步，将右侧返回值{ n: 2 }赋值为变量a
5. 最后是将右侧是赋值表达式a = { n: 2 }的值{ n: 2 }赋值为对象{ n: 1 }（也就是b）的x属性

我的讲解到此结束。各位读者，你们有不同的看法吗？