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

最近在看到以前前辈留下的文章，对于连续赋值( 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呢?

如果你答错了，那么请你往下看。

很清楚的一点是：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;

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

转载请说明原文章出处

写代码时要搞清楚变量间的引用关系，一般情况下不要写这种容易误导自己和他人的代码。我想这种情况一般只会出现在面试题里，用来考核对基础知识的掌握度。