es6学习(一)

这篇文章介绍本人在es6使用过程中遇到的一些问题，是本人没有理解透语法造成的问题。

箭头函数在class中的运用

直接看效果，有如下代码：

 class A {
   onChange = () => {
     console.log('A')
   }
 }

 class B extends A {
   onChange = () => {
     super.onChange();
   }
 }

 var b = new B();
 b.onChange();

这段代码运行会报错，修改代码如下：

class A {
   onChange = () => {
     console.log('A')
   }
 }

 class B extends A {
   onChange = () => {
     console.log(super.onChange)
    //  super.onChange();
   }
 }
 var b = new B();
 b.onChange();

结果为： undefined

看看class A转码之后的代码，如下:

var A = function A() {
  _classCallCheck(this, A);

  this.onChange = function () {
    console.log('A');
  };
};

onChange被放到了A的实例上，没有放到A.prototype上，再说这个之前要知道super作为对象时，指向父类的原型对象(A.prototype)，所以super.onChange是undefined。

上面的问题把class A中onChange不用箭头函数，就能拿到了，这时onChange方法就在A.prototype上。最后的代码如下：

class A {
  onChange () {
    console.log('A')
  }
}

class B extends A {
  onChange = () => {
    super.onChange();
  }
}

var b = new B();
b.onChange();

最后再来看看 class A转码之后的代码:

var A = function () {
  function A() {
    _classCallCheck(this, A);
  }

  _createClass(A, [{
    key: 'onChange',
    value: function onChange() {
      console.log('A');
    }
  }]);

  return A;
}();