最近发现很多同学的博客里都会解释js连续赋值问题,各种概念辈出,特别是对于不理解的同学来说,更加一头雾水,我这里做个简单解释,也许不懂的一看就明白了。
先抛出一个问题:
var a = {c:1} //第一步
var b = a; //第二步
a.x = b.y = b = {c:2} //第三步
console.log(a) // {c:1,x:{c:2},y:{c:2}}
console.log(b) // {c:2}
第一步,第二步相信大家都很好理解,但是第三步是什么鬼,现实中基本上很难遇到,而且也不推荐这么写,好好的赋值不行么,干嘛要搞事情?对,话虽这么说,但是这毕竟是考验大家对赋值的理解嘛。在拆解以上问题的时候,大伙儿要先明白两个概念
1、引用数据细节
给一个变量赋值的时候,若“=”右侧是基本数据类型(Boolean String Number Null Undefined),就是真的“赋值”了;若“=”右侧是复合型数据(Array Object),则是数据的引用,也就是“指向”不一样而已
2、赋值数据可拆分成两步
例如:var d = 1 其实相当于 var d;d = 1;
理解以上两个概念后,我们以图示演示第一步、第二步执行完毕的结果
执行到第二步是以上结果,相信不难理解。
然后我们再将第三步拆解为步骤甲、乙、丙
甲步骤:
a.x = undefined
b.y = undefined
图示
乙步骤:
这个时候b的指向发生了变化
b = {c:2}
图示:
丙步骤:
最后将b指向的内容分别赋值给a.x a.y。这个时候问题的难点就来了。不是b.y么,为毛变成a.y了? 逗我玩呢是不?我们往上看,步骤乙,这个时候a和b都是指向同一个内存地址,谁的x谁的y没有区别,大家是好兄弟,共用的。
a.x = {c:2}
a.y = {c:2}
图示:
是不是很简单?如果你还是不理解,那么哥只能给你一个建议:吃饭睡觉上厕所,夜里别想妹子,只要脑袋是清醒的,就思考这个问题。不用两天,你肯定可以搞懂。
PS:还搞不懂咋整?还搞不懂你打我(打不到)