前端进阶|第十二天 连续赋值到底赋给了谁?

先看代码:

var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);//undefined
console.log(b);

输出结果为
console.log(a.x);//undefined
console.log(b);//Object {n: 1 x: {n: 2}}

看的我有点懵,不是刚给a.x赋值了么,怎么转眼就undefined了呢?

看到网友结构过程是这样的。
1.给a赋值,a作为一个对象指向{n:1}.

var a = {n: 1};

2.b和a共同指向{n:1}

var b = a;

3.关键在第三行的拆解

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

等价于

a.x = (a = {n: 2});

传统编程语言认为a.x的结果就是括号运算的结果,但js却偏不。
1)首先计算a.x,因为之前我们并没有给a声明成员x,所以a.x运算的结果就是,给a和b指向的{n:1}声明一个成员,即{n:1,x:undefined}(因为还没赋值,所以值是undefined.
2)接着计算a={n:2},这个操作,会使得a开始指向{n:2},而不再是{n:1,x:undefined}。也就是说a移情别恋了,现在指向{n:1,x:undefined}只剩下了b。
那么最终对{n:1,x:undefined}里面的x赋值,只对b有效。所以最终打印a.x针对的是{n:2}这个对象,当然是undefined。而b里面的x赋值顺利完成为{n:2},即b最终值为{n:1,x:{n:2}}.

上一篇:前端进阶|第十四天 文本溢出除了截断还有CSS3


下一篇:开发者必读的10本免费电子书