查询JavaScript表达式`x>0 || alert() && "hii"`的执行顺序及运行原理

规则前提 #

首先明确两个互不冲突的JavaScript运算规则：

• 运算符优先级仅决定表达式的分组结合方式，不会改变逻辑运算符从左到右的执行顺序，也不会覆盖逻辑运算符的短路执行规则
• 优先级排序：> > && > ||
• 逻辑或||短路规则：从左到右执行时，只要左操作数为真值，就直接返回左操作数的值，完全跳过右侧所有代码执行

原表达式执行流程拆解 #

原代码表达式为：

let x = 1;
x > 0 || alert() && "hii"

第一步：按优先级分组 #

因为&&优先级高于||，表达式会被编译器先分组为：

x > 0 || (alert() && "hii")

而非(x > 0 || alert()) && "hii"，这就是优先级规则的唯一作用。

第二步：按顺序执行+短路判断 #

1. 首先执行最左侧的x > 0运算，x赋值为1，运算结果为true（属于真值）
2. 接下来执行||运算符，左操作数已经是真值，触发短路逻辑，右侧的整个分组(alert() && "hii")完全不会被执行，因此alert()不会弹出，后续的&&运算自然也不会运行。

分组逻辑验证 #

如果将x赋值为-1，此时x > 0结果为假值，||就会执行右侧分组：

1. 先执行alert()弹出提示，alert()的返回值为undefined（属于假值）
2. 执行&&运算符，左操作数为假值触发短路，直接返回undefined，整个表达式的最终结果为undefined

内容的提问来源于stack exchange，提问作者Himanshu Rai