es6 class继承用es5实现

759 阅读1分钟

es5实现普通的继承

// 类的调用检测 检测实例是不是new出来的
function _classCallCheck(instance, constructor) {
  if (!(instance instanceof constructor)) {
    throw new Error('Class constructor Child cannot be invoked without new')
  }
}
const extend = (sub ,sup) => {
    //静态属性以及方法继承
    Object.setPrototypeOf(sub, sup);
    sub.prototype = Object.create(sup.prototype);
    sub.prototype.constructor = sub;
    sub.super = sup.prototype;
    if(sup.prototype.constructor === Object.prototype.constructor) {
        sup.prototype.constructor = sup;
    }
};

function MyDate1(...args) {
    _classCallCheck(this,MyDate1);
    MyDate1.super.constructor.apply(this, args);
}
extend(MyDate1, Parent);

es5实现日期继承,直接使用上述方法会报错,v8引擎底层代码中有限制,如果调用对象的[[Class]]不是Date,则抛出错误。 改进如下:

es5 实现方案

const extend = (sub ,sup) => {
    //静态属性以及方法继承
    Object.setPrototypeOf(sub, sup);
    //原型链继承
    sub.prototype = Object.create(sup.prototype);
    //constructor更正
    sub.prototype.constructor = sub;
    //给儿子添加super属性,指向父类原型
    sub.super = sup.prototype;
    if(sup.prototype.constructor === Object.prototype.constructor) {
        sup.prototype.constructor = sup;
    }
};


function MyDate2(...args) {
    _classCallCheck(this,MyDate2);
    const d1 = new MyDate2.super.constructor(...args);
    Object.setPrototypeOf(d1, MyDate2.prototype);
    return d1;
}

extend(MyDate2, Date);
const md3 = new MyDate2;
console.log(md3.getTime());

附加:es6实现方法就很简单了:

class MyDate extends Date{

}
const md1 = new MyDate();
console.log(md1.getTime());