这篇文章介绍本人在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;
}();