JavaScript 继承

JavaScript 继承

原型链

function Parent() {}
function Child() {}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

构造器

function Parent() {}
function Child() {
    Parent.call(this);
}

原型链 + 构造器

function Parent() {}
function Child() {
    Parent.call(this);
}
Child.prototype = new Parent();

原型式

function extendObject(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

其实上述代码就是 Object.create() 的兼容方法。

寄生组合

function inheritPrototype(child, parent) {
    var prototype = extendObject(parent.prototype);
    prototype.constructor = child;            
    child.prototype = prototype;            
}

function Child() {
    Parent.call(this);
}

inheritPrototype(Child, Parent)

ES6 extends

class Parent {}
class Child extends Parent {]}

let child = new Child();
  • child instanceof Parent 返回 true
  • child instanceof Child 返回 true

对比

  • 可复用:可复用父类的构造函数
  • 会共享:子类的实例会共享父类的引用属性
  • 可传参:创建子类的时候能否传递参数
方法 优点 缺点
原型链 可复用 会共享、不可传参
构造器 不会被共享、可传递参数 不可复用
原型链 + 构造器 可复用、不会被共享、可传参 调用了两次父类构造函数
原型式 可复用 会共享、不可传参
寄生组合 完美的方案
ES6 extends 兼容性