码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-06 06:57:57      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

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

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

转载请说明原文章出处


最后

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

 

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

标签:

原文地址:http://www.cnblogs.com/alvinwei1024/p/4856623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!