一道JS题，让我更深刻的理解了JS的执行机制

闲逛摸鱼发现一道有趣的题，题目如下：

let i = 0;

function x() {
   
   
    i++;
    return 10;
}

i += x();
console.log(i) // 10 or 11

这道题我发沸点了，本来是不想拿出来单独写一篇文章的，因为太短了，但是我需要存在感，沸点没人看，所以还是写一篇文章吧；

原沸点在这里：https://juejin.cn/pin/7169568535033675784

题目分析

题目很简单，有效代码只有6行，按照流程分析一下：

1. 声明变量 i，赋值为 0
2. 声明函数 x，函数内部 i 自增，返回 10
3. i 加等于 x 的返回值

结束，这个时候 i 的值是 10 还是 11 呢？可以在浏览器中执行一下；

答案是：10

为什么是 10

js的代码执行大家都知道是从上到下，从左到右的（排除异步、回调等），然后还有一些特殊的情况，比如函数声明提升、变量提升等，操作符的优先级等等，这些就不在这里讲了;

这道题的关键在于函数x内部执行了一个i++，下面又有一个i += x()，这里需要将执行过程拆解一下：

1. 定义变量 i，赋值为 0
2. 定义函数 x
   1. i 自增
   2. 返回 10
3. i 加等于 x 的返回值
   1. i += x()
   2. i = i + x()
   3. i = 0 + x()
   4. i = 0 + 10
   5. i = 10

看到这里应该就了解为什么是 10 了，因为js的执行机制是从左到右;

i += x()最终会被解释为i = i + x()，从左到右执行，是先取出i的值，然后再执行x()；

i不是一个引用类型，所以是直接拿到i的值0再执行x()，x()内部执行的i++并不会影响到已经获取到的i的值，所以最终的结果是10；

怎么让结果是 11

上面讲到了js的执行是从左到右的，我们只需要i的取值在x()执行之后就可以了，如下：

let i = 0;

function x() {
   
   
    i++;
    return 10;
}

i = x() + i;
console.log(i) // 10 or 11

这样就可以了，因为i的取值是在x()执行之后，所以i的值是1，最终结果就是11了；

解惑

上面讲的是这道理的整体运作原理和流程，不能我说i += x()最终解释的结果就是i = i + x()，但是事实就是如此，下面截图来自MDN 表达式与运算符

可以看到最终的解释就是如此，从这里可以看到上面解题的分析是正确的，+=运算符可能就是一个语法糖，最后让结果变成11又引发我一个问题。

以前有一道题是这样的，如何让a === 1 && a === 2 && a === 3成立，那么我改造一下，成为下面这种形式是否也是可以的呢？代码如下：

var a = 1;
var result = a++ === 1 && a++ === 2 && a++ === 3;
console.log(result);

或者现这种形式：

var a = 0;
var result = ++a === 1 && ++a === 2 && ++a === 3;
console.log(result);

上面这两种形式，最终result的结果都是true，感兴趣可以在控制台输出看看，非常有趣。

总结

确实是一道有趣的题，让我对js的执行机制有了更深的理解，用这道题分析简单的分析了一下js的执行机制，js的执行机制是自上而下，从左往右，内部会将一些语法进行拆解，对于非引用类型取值之后，取值的地方就固定了，不会发生修改。