巴别塔游乐场意外的前导下划线

Question

看看下面的class"data"方法。方法体包含一个名为 "result" 的变量，并在 else if 子句中重新分配给一个数组。

出于某种原因，babel 将上述变量转译为带有前导下划线。

ES6 class:

class Serie {
  constructor( name, data = [] ) {
    Object.defineProperty(this, "name", {
      enumerable: false,
      configurable: false,
      writable: false,
      value: name
    })

    data.map( (v, i) => this[v.name] = v.value );
  }

  data( name ) {
    let result = null;

    if ( arguments.length == 1 ) {
      result = this.hasOwnProperty( name ) ? this[ name ] : result;
    }
    else if ( arguments.length == 0 ) {
      let keys   = Object.keys(this),
          i      = keys.length,
          result = [];

      while ( i-- ) {
        result.push( this[ keys[i] ] );
      }
    }

    return result;
  }

  // ...
}

转译方法：

function data(name) {
      var result = null;

      if (arguments.length == 1) {
        result = this.hasOwnProperty(name) ? this[name] : result;
      } else if (arguments.length == 0) {
        var keys = Object.keys(this),
            i = keys.length,
            _result = [];

        while (i--) {
          _result.push(this[keys[i]]);
        }
      }

      return result;
    }

Answer 1

result 正在重新声明，而不仅仅是重新分配，使用 let，因此范围限定为当前块（ else if 块）。

当转译为 var 时，它不遵守块作用域，第二个声明不应覆盖第一个。

基本上就是这个区别：

let a = 123;
if (true) {
  let a = 456;
}
// a === 123

还有这个：

var a = 123;
if (true) {
  var a = 456;
}
// a === 456

巴别塔游乐场意外的前导下划线

Unexpected leading underscore with babel's playground

javascript

transpiler

ecmascript-6

babeljs