一道面试题所引发的运算符的优先级的思考

刚才无意间看到了一道面试题

var a = {n: 1}
var b = a;
a.x = a = {n: 2}

console.log(a.x);
console.log(b.x)

这道题考察了两个知识点

• 内存空间
  
• 运算符的优先级
  

关于内存空间我掌握的还可以，具体可以看 前端基础进阶（一）：内存空间详细图解

而对于运算符的优先级，是我忽略了，之前梳理知识点的时候是按照 读书笔记《JavaScript高级程序设计》(第3版) 这本书来来梳理的,这本书好像也遗漏了这个知识点（或者是我粗心了）

总之不管怎样，今天也得好好整理这一部分的知识

优先级

运算符的优先级决定了表达式中运算执行的先后顺序，优先级高的运算符最先被执行。

下面是一个简单的例子：

3 + 4 * 5 // 计算结果为23

很简单的式子，这说明乘法运算符（*）比起加法运算符（+）有着更高的优先级，所以它会被最先执行。

毫无疑问这没什么难度

那如果是优先级一样的运算符呢

结合性

结合性决定了拥有相同优先级的运算符的执行顺序。考虑下面这个表达式：

a 运算符 b 运算符 c

左结合（从左到右计算）相当于把左边的子表达式加上小括号

 (a 运算符 b) 运算符 c

类似的，右关联（从右到左计算）相当于

a 运算符 (b 运算符 c)

赋值运算符是右结合的，所以你可以这么写：

a = b = 5;

结果 a 和 b 的值都会成为5。这是因为赋值运算符的返回结果就是赋值运算符右边的那个值，具体过程是 =>

b 被赋值为5，然后 a 也被赋值为 b=5 的返回值，也就是5。

原来是这样啊

有没有一个汇总表呢

汇总表

发个链接吧,可到此处去查阅

首尾呼应

最后再来说说开篇提到的面试题

var a = {n: 1}
var b = a;
a.x = a = {n: 2}

console.log(a.x);
console.log(b.x)

• 变量 a 指向对象 {n: 1}
  
• 变量 b 也指向到对象 {n: 1}，他俩现在指向同一个对象

• 到重点了， a.x 中的 . 的优先级高于 =

• 所以第一步执行 a.x，现在的变量 a 指向的对象添加了一个 x 属性，变成了 {n: 1, x: undefined}，b 当然不变依然指向这个对象

• 接下来继续分析 a.x = a = {n: 2}

• 考虑到赋值号的结合性是右结合，所以以上式子等价于 a.x = (a = {n: 2})
  
• 那就是先进行 a = {n: 2} 咯，这语句的意思就是，堆内存内重新开辟了一块空间存放对象 {n: 2}，a 就指向了这块新的内存空间，b 指向的还是原来的没变

• 右侧的赋值号运算符执行完继续执行左侧的赋值号运算符 a.x = a = {n: 2}，由于 a = {n: 2} 返回 a 本身，所以 a.x 的属性值被赋值为 a
  
• 是不是有点懵，为了更好的说明情况，我把这里面的 a 区分一下，并且重新说一下上一句话
• 右侧的赋值号运算符执行完继续执行左侧的赋值号运算符 a(旧).x = a(新) = {n: 2}，由于 a(新) = {n: 2} 返回 a(新) 本身，所以 a(旧).x 的属性值被赋值为 a(新)
  

对照上图再看看这道面试题

var a = {n: 1}
var b = a;
a.x = a = {n: 2}

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

（完）