1var a = {n:1};
2var b =a;
3a.x = a = {n:2};
4console.log(a.x);//undefined
5console.log(b.x);// [object,objcct]
上面这个例子看似简单,但运行后的结果却很绕人,a.x的结果让人甚为疑惑。
现在我们可以来分析下这段代码具体是如何运行的。为了方便理解,我这里会以图文的形式来说明
var a = {n:1};
var b = a;
接着是这句比较复杂的连续赋值操作的代码
#a.x = a = {n:2};
很多人可能以为这个连续赋值操作等价于
a = {n:2};
a.x= a;
其实不然。 js代码从左到右的执行顺序没有问题。只是赋值表达式是 “=”右边赋值给左边
首先执行针对a.x的赋值操作,而a.x的右边也是一个赋值表达式 a = {n :2}。 而赋值表达式是有返回值的(表达式左边对应的值)
所以我们可以这样理解 a.x = [expression] ,而这个[expression] 为 a = {n:2}
因为对象a上不存在‘x’属性,所以对a.x赋值的时候会这个对象扩展一个‘x’属性 (属性扩展或取值操作在编译器内部有着相对复杂的操作,这里暂时不做深入)
然后执行a= {n:2},这里相当于新创建了一个对象,然后把a重新指向这个对象,在内存中的操作如下图所示
执行完a.x右边的表达式后,结果也出现了, x属性指向的是{n:2}这个对象
所以这里我们就明白为何b.x为对象,a.x为undefined。
以上为个人理解,如有不正确的地方欢迎指正。
我们也可以把最后一句连续赋值代码改为
a = a.x = {n:2};
第一次接触这么深得接触js ,这次就到这里: