javascript - 为什么 Babel 不能正确处理 const？

Question

查看下面的代码。计数器被声明为 const。当你运行它时，它不应该允许它在任何情况下发生改变!

function increment(counter) {
 counter += 1; 
}

function test() {
    const counter = 1;
    increment(counter);
}

转译后，它会生成以下代码。这允许 const 计数器递增!

function increment(counter) {
  counter += 1; // Counter is declared const, still it can be changed!
}

function test() {
  var counter = 1;
  increment(counter);
}

我只是想了解一下，这是 Babel 转译的问题还是 JavaScript 规范的问题。

编辑:我知道与ES6不同，当前版本的JS不支持const。我担心的是，如果我使用转译的 JavaScript，我可能会遇到未知的 const 相关错误。这样应该可以吧？

Answer 1

Counter is declared const, still it can be changed!

转译后的代码中有两个名为 counter 的标识符:

• 增量内的参数计数器。
• test 内的变量 counter。

他们是完全独立的!

参数从来都不是“常量”，它们总是可以被分配一个新值。它对传递给函数的内容没有影响，因为所有参数都是按值传递的，即增量是通过 值 传递的。然后将其分配给参数 计数器。

我们可以通过在函数调用之前和之后记录变量的值来轻松验证这一点:

function increment(counter) {
 counter += 1; 
}

function test() {
    var counter = 1;
    console.log('value before', counter);
    increment(counter);
    console.log('value after', counter);
}

test();

I'm just trying to understand, whether it is a problem with Babel transpilation or with JavaScript specification

两者都没有。无论您是使用 var 还是 const 来声明 counter，它都完全按照指定的方式工作。

My concern is, if I use transpiled JavaScript, I may encounter unknown const related bug.

不，情况不会是这样。是什么让 const 如此特别？您无法为其分配新值并且它的作用域被阻止。那么让我们看看当你违反这两个约束时 Babel 会做什么:

输入:

const foo = 21;
foo = 42;

巴贝尔输出:

Babel 拒绝转译带有错误的代码

SyntaxError: intput.js: "foo" is read-only
  1 | const foo = 42;
> 2 | foo = 21;
    | ^
  3 |

输入:

{
  const foo = 21;
}
console.log(foo); // trying to access const outside of block

巴贝尔输出:

"use strict";

{
  var _foo = 21;
}
console.log(foo); // trying to access const outside of block

Babel 重命名了 block 作用域变量。 foo 不存在(如预期)。