值得深思的连续赋值--赋值运算符运算顺序

最近在看到之前前辈留下的文章，对于连续赋值( var a={n:1}; a.x=a={n:2}) )这个知识点，一开始也搞不清楚，可是最终仍是说服了本身，谈谈本身的心得。如下代码能回答正确的能够忽略本文。

1 var a={n:1};
2 var b=a;
3 a.x = a = {n: 2};
4 console.log(a.x); //?
5 console.log(b.x);//?

正确答案是：

a.x= undefined;
b.x= {n: 2};

疑惑：为何a.x与b.x不相等呢？为何a.x会等于undefined呢?

若是你答错了，那么请你往下看。

 

---

javascript中的引用赋值

很清楚的一点是：js中对象的赋值实际上是引用的赋值，只是将b对象的引用指针指向了a对象的引用。

1 var a={n: 1};
2 var b= a;
3 console.log(b.n); // 1
4 a.n=2;
5 console.log(b.n); // 2

上面的代码对于一个程序员来讲应该都没有理解上的问题。

---

赋值运算符的右结合

也就是说赋值运算符是从右向左运算的，这个倒不难理解，例如 var a = 1 + 2; 先计算了等号右边1+2，将右边的结果3赋值给了a；固然你也许会说这是运算符的优先级；其实这里本文想要表达的是赋值运算是将“＝”右边赋值给左边。下面这个例子应该会更加帮助你理解。

1 var a, b;
2 a=b=1+2;

其中按照赋值运算符的右结合的特质：

a = b = 1 + 2 等价于 a = (b= 1+2 )

其中 b 等于 1+2的返回值 3 ；

a 等于 b=3 的返回值 3；

---

赋值运算符运算顺序：从左到右

 虽然上面讲到赋值运算符是从右向左运算的，可是其运算顺序是从左往右的。也就是说本文一开始提出的问题 a.x = a = {n:2} 是从左向右运算的（赋值是从右向左）；也就是说程序的计算顺序是：

1 a.x
2 a
3 {n:2}

程序执行到 a.x = a = {n:2} 先执行a.x 并等待赋值符号“＝”后面的运算返回值；而后执行a并等待赋值符号“＝”后面的运算返回值。

---

答案是这样来的

若是看到这有点绕进去了，分析一下本文一开始提出来的例子应该会帮助你更好地了解： 

1 var a={n:1};
2 var b=a;
3 a.x = a = {n: 2};

1. 变量a指向了一个对象{n:1};

2. 变量b指向了a的引用(其实就是{n:1});

3. 计算a.x并等待赋值符号“＝”后面的运算返回值(此时，a指向的是{n:1});

4. 计算a并等待赋值符号“＝”后面的运算返回值，注意这里将a的引用指向了{n:2};

到这里你是否看出了，第3步a.x的a是{n:1};第4步的a已经被改为了{n:2};

所以当console.log(a.x)的时候就确定是undifined了;而console.log(b.x)为{n:2};

 

若是到这里还不明白，不妨再增长两个变量 obj1, obj2; 令obj1={n:1}; obj2={n:2}

1 var obj1={n:1};
2 var obj2={n:2};
3 var a=obj1;
4 var b=a;
5 a.x=a=obj2;
6 console.log(a.x); //undefined
7 console.log(b.x); //{n:2}
8 console.log(obj1); //{n:1, x:{n:2}}
9 console.log(obj2); //{n:2}

其实 a.x=a=obj2 等价于 

a=obj2;

obj1.x=obj2;

---

做者：AlvinWei  文章出处：韦躐晟的博客 http://www.cnblogs.com/alvinwei1024/p/4856623.html

本文版权归做者和博客园共有，欢迎转载

转载请说明原文章出处

---

最后

写代码时要搞清楚变量间的引用关系，通常状况下不要写这种容易误导本身和他人的代码。我想这种状况通常只会出如今面试题里，用来考核对基础知识的掌握度。