ES规范解读之自增操作符

2024年4月5日 120次阅读 来源: kuitos

ES规范解读之自增操作符

原文:https://github.com/kuitos/kuitos.github.io/issues/24
几个月前，不知道什么缘由跟同事讨论了起js里自增操作符(i++)的问题，现将前因后果整理出来，传于世人?

事情起源于这样一段代码

var i = 0;
i = i++;
console.log(i);

来，都来说说答案是啥？
结果是0
换一种形式，或许大家不会有多少疑问

var i = 0;
var a = i++;
console.log(a); // 0

没错，这也是我们初学自增操作符的经典例子，对这结果还有疑问请自觉面壁。。。
遥想当年学习自增操作符的口诀大致是，i++ 是先用后自增，++i 是先自增再用
那么按照这个思路，上面的代码解析流程应该是这样的

var i =0;
i = i;
i = i + 1;

可惜结果并不是这样的
按照犀牛书上的描述，后增量(post increment)操作符的特点是

它对操作数进行增量计算，但返回未作增量计算的(unincremented)值。

但是书上并没有告诉我们，先做增量计算再返回之前的值，还是返回之前的值再做增量计算。
对于这种疑问，我们只能求助ecmascript给出官方解释：

Postfix Increment Operator(后自增操作符)

The production PostfixExpression : LeftHandSideExpression [no LineTerminator here] ++ is evaluated as follows:

  1. Evaluate LeftHandSideExpression.

  2. Call GetValue(Result(1)).

  3. Call ToNumber(Result(2)).

  4. Add the value 1 to Result(3), using the same rules as for the + operator (see 11.6.3).

  5. Call PutValue(Result(1), Result(4)).

  6. Return Result(3).

从es上的算法描述，我们能够清晰的得知，后自增操作符是先自增赋值，然后返回自增前的值，这样的一个顺序。
到这里还不算完。
既然i=i++这种操作最后i还是为原始值，也就是这段代码不会有任何实际意义，那么js引擎有没有可能针对性的做优化，从而避免不必要的自增运算？(如果你用的是IDE，IDE会提示你这是一段无用的代码)
也就是说，我们如何确定，执行引擎一定做了两步操作：

  1. i = i + 1; return iBeforeIncrease = 0;

  2. i = iBeforeIncrease;

还是执行引擎可能会针对性的优化，只做一步操作：

  1. i = iBeforeIncrease;

当我在想怎么去确定这一点时，松波给出了解决方案，用Object.observe()方法啊！！(该方法是ES7提案中的新api，不过chrome早早的实现了)

var obj = {i:0};
Object.observe(obj, function(changes){
    console.log(changes);
});
obj.i = obj.i++;

代码放到chrome中跑一下，可以看到，改变触发了两次，也就是i做了两次修改操作。
另外firefox中也提供了一个类似的api，Object.prototype.watch，有兴趣的同学可以试试用这个方式来验证一下。

顺便抖个机灵，自增操作是非原子性操作，是非线程安全的，多线程环境下共用变量使用自增操作符是会有问题的(前端同学们别急，ES7会为我们带来js多线程编程体验?)。

    原文作者：kuitos
    原文地址: https://segmentfault.com/a/1190000003785340
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞