JS继承七种方式

function SuperClass() {
    this.x = 'I am super'
}
SuperClass.prototype.say = function() {
    console.log(this.x)
}
一:原型链继承,一般不用

缺点1:包含引用类型值时会改变
缺点2:无法在不影响所有原型对象时,向超类型的构造函数传递参数

function SubClass1() {
    this.y = 4
}
SubClass1.prototype = new SuperClass()
new SubClass1().say() // I am super
二:借用构造函数,一般不用
function SubClass2() {
    SuperClass.call(this)
}
new SubClass2().say() // not a function,说明无法复用原型链上的方法

SubClass2.prototype.subSay = function() {
    console.log(this.x)
}
new SubClass2().subSay() // I am super
三:组合继承,唯一缺点:调用了两次超类型构造函数
function SubClass3() {
    SuperClass.call(this)
    this.y = '4'
}
SubClass3.prototype = new SuperClass()
new SubClass1().say() // I am super
四:原型式继承,缺点是和原型链一样的
function create(obj) {
    function F() {}
    F.prototype = obj
    return new F();
}

const subClass4 = create(new SuperClass())
五:寄生式继承,即以工厂模式再次封装以增强对象
function parasitic(obj) {
    var clone = create(obj)
    // 增强对象
    clone.sayHi = function() {
        console.log(this.x + 'Hi')
    }
    return clone
}
六:寄生组合式继承,普遍认为最好
function inheritPrototype(SubClass6, SuperClass) {
    var prototype = create(obj)
    prototype.constructor = SuperClass
    SubClass6.prototype = prototype
}
七:Es6继承
class SuperClass {
    constructor() {
        this.x = 'I am super'
    }
    say() {
        console.log(this.x)
    }
}
class SubClass7 extends SuperClass {
    constructor() {
        super() // 必须调用超类构造函数,否则报错
        this.x = 'I am Sub'
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,159评论 0 6
  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,460评论 3 12
  • 1.继承(接口继承和实现继承) 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式...
    believedream阅读 991评论 0 3
  • 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式:接口继承 和 实现继承。接口继...
    threetowns阅读 453评论 0 0
  • 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 1,013评论 0 4