引言
今天因为一道面试题引发了自己对于js赋值的探究,通过这道面试题自己也发现了对于js基础掌握的不扎实,还是得深挖细枝末节的知识点才行。
题目是这样的:
var a={n:1};
var b=a;
a.x=a={n:2};
console.log(a.x);
console.log(b.x)
连续赋值
关于连续赋值,举如下的例子:
var a=b=5;
js中的赋值是从右往左赋值的,对于上述的赋值顺序为,先执行b=5,然后将b=5的返回值5,并不是将b赋值给a。
所以对于上面的题目
a.x=a={n:2}可以看作是a.x=(a={n:2});,但是需要注意,运算符"."的优先级是比赋值运算符高的,因此会先声明出.x,上述题目的具体过程如下图所示:
经过上面的分析,a最终的结果为
{n:2},b最终的结果为{n:1,x:{n:2}},因为此时的a没有x这个属性,所以最终的输出结果为:
console.log(a.x);//undefined
console.log(b.x);//{n:2}
因为最终b.x是指向a的,所以修改b.x.n的值a.n也会更改,修改a.n,b.x.n的值同样会被修改:
加练一题
下面的结果会是多少呢?
var a={n:1};
var b=a;
b.e = a.g = {n:2};
console.log(a);
console.log(b);
上述题目的具体分析如下图所示:
最终a和b的结果为:
console.log(a);//{n:1,g:{n:2},e:{n:2}}
console.log(b);//{n:1,g:{n:2},e:{n:2}}
同时因为a.g、a.e、b.g、b.e都指向了{n:2},因此修改a.g.n的值,其余三个都会变,其它三个也是一样。
注意
这里说的是修改a.g.n,如果修改a.g(或者a.e),那么同样的对应只是b.g(或者b.e)变化,因为修改的是属性的指向关系,具体如下图所示: