ES2015继承的实现

Posted 2020-12-02 starryi-alpha

# ES2015继承
class A {
    ma = ‘ma‘;
    static sa = ‘sa‘;
    static sf = () => {
        return ‘sf‘;
    }
}
class B extends A {
}

let b = new B();

以上代码经过Babel编译后为

// 1. 删除检查代码
// 2. 仅使用Object.setProtypeOf和Object.getPrototypeOf设置和访问对象内部[[Prototype]]
function _inherits(subClass, superClass) {
    
    // 设置原型对象，实现原型继承
    subClass.prototype = Object.create(superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    // 实现静态属性继承
    // subClass.sa === superClass.sa;
    Object.setPrototypeOf(subClass, superClass);
}

var A = function A() {
    this.ma = ‘ma‘;
};

A.sa = ‘sa‘;
A.sf = function() {
    return ‘sf‘;
};

var B = function(_A) {
    // B.prototype = _A.prototype;
    // Object.setPrototypeOf(B, A);
    _inherits(B, _A);
    
    function B() {
        // 初始化父类实例属性
        // _A.apply(this, arguments);
        return Object.getPrototypeOf(B).apply(this, arguments);  
    }
    return B;
} (A);

let b = new B();

以上代码主要做了三件事

• 通过B.prototype设置构造函数的原型链，实现原型继承
• 通过Object.setPrototypeOf设置函数对象的的内部原型属性，实现静态属性继承
• 通过apply，将this和arguments应用到父类构造函数，初始化父类实例属性

javascript静态变量继承的特点

let same = B.sa === A.sa;   // true
let has = B.hasOwnProterty(‘sa‘); // false

PS：
react-redux的connect方法，内部通过判断hasOwnProperty来复制静态变量，所以在出现组件继承时会有如下结果

class SuperComponent extends React.Component {  
    static mSup= {...}
    ...
}
class SubComponent extends SuperComponent { 
    ...
}
let Connect = connect(mapStateToProps)(SubComponent);

Connect.mSup;   // undefined 

当然Facebook并不鼓励使用继承来创建特定组件，而是通过组合实现容器组件和高阶组件