js引用类型的理解

<script>
    var a = {n:1};
    var b = a;
    a.x = a = {n:2};
    
    console.log(a.x,b.x);// underfined,{n:2}
</script>

上面的例子看似简单，但结果却并不好理解，很容易把人给绕晕了，a.x为什么会是underfined,b.x居然变成了对象，下面我们来分析这段代码的工作步骤，从而进一步理解js引用类型"赋值"的工作方式。

首先是 var a = {n:1}; var b = a;到这里都很容易理解，我们可以认为a指向了一个对象{n:1}(我们可以称它为对象A)，b指向了a所指的对象，也就是说a和b都指向了对象A。

然后便是最重要的代码了 a.x = a = {n:2}; 在理解这段代码之前需要先理解js运算符的优先级和运算顺序；我们知道js的赋值顺序永远是从右向左，但是由于“.”的运算符优先级最高，所以在这段代码中首先执行了a.x，这时发生了这样一件事，a指向的对象{n:1}中新增了属相x，虽然这个x是underfined。

从图中可以看出，a，b都指向对象A，这时对象A中的x属性既可以用a.x来表示也可以用b.x来表示（注意：这时a.x是指对象A中的x属性且a.x已经执行过）。

接下来按照赋值的执行顺序从右向左开始赋值，a = {n:2} ，这时a指向的对象发生了改变，a重新指向一个新对象{n:2}，这里我们称为对象B。这时a，b的指向如下：

接着执行 a.x = a ,需要注意的是这时的a.x已经执行过，表示的是对象A中的x属性（上文已经说明），在这一步中只是对a.x（即对象A的x属性）进行赋值运算；而不是在对象B中新增一个属性x并指向对象B自己。这时对象A中的x指向了对象B(因为此时a指向的是对象B即{n:2})；

这时我们可以推出a，b的值如下，这时便不难理解为什么会出现这样的打印结果。

a = {n:2};
b = {
    n:1,
    x:{n:2}
}