Javascript连等赋值问题

发表于： 2017年10月18日 2017年12月7日
分类：开发

起源于一段代码

var a = {n:1};

var b = a; // 持有a，以回查

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

console.log(a.x);// --> undefined

console.log(b.x);// --> {n:2}

为什么会出现这种结果，相关的讨论也不少，众说纷纭，不排除很多为了答案而答案的解析。

仔细整理分析之后，要理解这个情况需要明确两个知识点。

第一点：语句是从左到右依次解析的，对于运算符之间的每一个元素都是最高优先执行的，之后考虑运算符的优先级进行执行。

第二点：基本变量值和引用变量值的赋值是不一样的：

引用类型值的赋值拷贝，复制的是地址，基本类型变量赋值拷贝，复制的是值。简化逻辑如下图示：

刨根问底

关于第一个知识点需要重点说明下：

先举个例子，直接上代码了：（）

var a = 1;

function fn1() {

a = 2;

return 3;

}

function fn2() {

a = 3;

return 3;

}

console.log( fn1() + a); // 输出 5 =3+2

// 重置一下a值, 不放心的话可以把上面a、fn1、fn2的代码再粘一遍

a = 1;

console.log( a + fn1() ); // 输出 4 =1+3

a = 1;

console.log( a + fn1() + a**fn2() ); // 输出 12 =1+3+2^3=1+3+8

a = 1;

console.log( a + fn1() + a + fn2()**a ); // 输出 33 =1+3+2+3^3=1+3+2+27

对比分析以上代码的输出，不难得出，运算符的优先级是建立在从左到右依次确认参与运算元素的基础之上的。把代码中的最后一个运算拿出来解释一下：

a值在经过fn1()之后a=2在没有运算到fn1()之前还是保持了a=1的原值，fn2()**2幂运算是从右到左的计算，但是依旧不影响从左到右一次确认参与运算元素的操作，先执行fn2()和a值再进行幂运算最后再加起来，可以再试下a + fn1() + a + fn2()*fn1()*a的值，输出值应该是24，因为fn1()把a值又改称2了。