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

theme: juejin
highlight: a11y-dark

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

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了；

总结

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

本文正在参加「金石计划 . 瓜分6万现金大奖」