webpack编译后代码

[lznbuild]

babel是如何转换的
-试一试

1. class B 继承 class A 翻译成 es5 应该是什么样子
2. const,let 转换成var，怎么实现他们的特性
3. 箭头函数编辑成es5的普通函数有什么不一样 （this处理就是外部声明变量去保存）

4. await async 编译后什么样子

   类的内部所有定义的方法，都是不可枚举的

class

ES6代码

class Person {
  constructor(name) {
    this.name = name;
  }

  static bar = 'bar'
}

编译后

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Person = function Person(name) {
  // 检查Person是否是通过new 的方式调用的
  _classCallCheck(this, Person);
  this.name = name;
};

Person.bar = 'bar'

class继承

class Parent {
    constructor(name) {
        this.name = name;
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类的 constructor(name)
        this.age = age;
    }
}

var child1 = new Child('kevin', '18');

console.log(child1);

编译后

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Parent = function Parent(name) {
    _classCallCheck(this, Parent);

    this.name = name;
};

var Child = function(_Parent) {
    _inherits(Child, _Parent);

    function Child(name, age) {
        _classCallCheck(this, Child);

        // 调用父类的 constructor(name) Parent.call(this,name)

        var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name));

        _this.age = age;
        return _this;
    }

    return Child;
}(Parent);

var child1 = new Child('kevin', '18');

console.log(child1);

const,let,var

{
    const a = 0

    {
      console.log(b)

        const b = 78

      b = 34 

      let c = 6

      c = 3
    }

  console.log(b)
}

console.log(a)

编译后

"use strict";

function _readOnlyError(name) { throw new Error("\"" + name + "\" is read-only"); }

{
  var _a = 0;
  {
    console.log(_b);
    var _b = 78;
    _b = (_readOnlyError("b"), 34);
    var c = 6;
    c = 3;
  }
  console.log(b);
}
console.log(a);

对于const ,let 的暂时性死区，babel没有进行处理

箭头函数

  var name = 'window'
  var fn = () => {console.log(this.name)}

  var obj = {
    name: 'obj',
    fn
  }

  obj.fn()

编译后

var _this = this;

var name = 'window';

var fn = function fn() {
  console.log(_this.name);
};

var obj = {
  name: 'obj',
  fn: fn
};
obj.fn();