继承

2021-11-29 20:00:26 作者：互联网

类式继承

// 声明父类
function SuperClass() {
    this.superValue = true
}
// 为父类添加共有方法
SuperClass.prototype.getSuperValue = function () {
    return this.superValue
}
// 声明子类
function SubClass() {
    this.subValue = false
}

继承的是父类的实例对象

// 继承父类
SubClass.prototype = new SuperClass()
// 为子类添加共有方法
SubClass.prototype.getSubValue = function () {
    return this.subValue
}

实例化子类看看结果

const sub = new SubClass()
sub.getSuperValue()    // true
sub.getSubValue()      // false

通过instanceOf测试一下

// instanceof通过判断原型链来确定对象是否是某个类的实例，而不关心对象与类自身的结构
sub instanceof SuperClass   // true
sub instanceof SubClass   // true
// 注意，它并不表示继承，而是判断前面是否是后面的实例
SubClass instanceof SuperClass   // false
SubClass.prototype instanceof SuperClass   // true

看起来挺不错，好像继承就应该是这样，子类可以使用父类的属性和方法，那么这样做是否有什么缺点呢？我们再测试一下

function SuperClass() {
    this.books=["1","2","3"]
}
function SubClass() {}
SubClass.prototype= new SuperClass()
const sub1 = new SubClass()
const sub2 = new SubClass()
sub2.books     // [ '1', '2', '3' ]
sub1.books.push("4")
sub2.books     // [ '1', '2', '3', '4' ]

出现问题了，我们改动了一个实例sub1中的数组，但sub2实例中的数组也发生了变化，为什么会这样？

其实不难想到，出现这种情况的根本原因肯定是sub1直接改动了原型中的数据，因为sub1中没有books属性，就去自己的原型中找，在SuperClass中找到了，但是由于父类是个实例对象，所以其引用类型数据会被子类共用，导致所有子类都出现了问题，这个是很不安全的，那么如何避免这个问题呢？往下看

构造函数式继承

通过使用call的方法，

// 声明父类
function SuperClass(id) {
    this.books=["1","2","3"]
    this.id = id
}
// 父类声明原型方法
SuperClass.prototype.showBooks = function () {
    console.log(this.books)
}
// 声明子类
function SubClass(id) {
    SuperClass.call(this, id)
}

检测引用类型，发现解决了问题

const sub_1 = new SubClass(12)
const sub_2 = new SubClass(20)
sub_1.books.push("4")
sub_1.books   // [ '1', '2', '3', '4' ]
sub_1.id      // 12
sub_2.books   // [ '1', '2', '3' ]
sub_2.id      // 20
sub_1.showBooks()   // sub_1.showBooks is not a function

但是又出现了新的问题，showBooks is not a function，不能查找到原型链中的showBooks方法

因为call相当于直接把父类构造函数中的属性和方法复制了一份给子类，因为没有涉及prototype，所以父类的原型子类无法继承

组合式继承

那是不是说，把构造函数式继承和类式继承一起使用就可以避免这个问题了呢

function SuperClass(name) {
    this.name = name
    this.books = [ '1', '2', '3' ]
}
SuperClass.prototype.getName = function () {
    console.log(this.name)
}
function SubClass(name, time) {
    // 构造函数继承
    SuperClass.call(this, name)
    this.time = time
}
// 类式继承
SubClass.prototype = new SuperClass4()
SubClass.prototype.getTime = function () {
    console.log(this.time)
}

测试结果发现，果然，问题都解决了

const sub_1 = new SubClass("vue", 2021)
sub_1.books.push("4")
console.log(sub_1.books)   // [ '1', '2', '3', '4' ]
sub_1.getName()            // vue
sub_1.getTime()            // 2021

const sub_2 = new SubClass("react", 1998)
console.log(sub_2.books)   // [ '1', '2', '3']
sub_2.getName()            // react
sub_2.getTime()            // 1998

但是又出现了新的问题，因为call()在对象自身复制了一份原型共有属性，但原型中也有一份父类共有属性，父类的构造函数实际调用了两遍

寄生式组合继承

创建一个过渡类，传入父类的prototype，将父类掏空，同时继承父类的原型链，返回一个过渡类的实例对象

然后创建寄生组合式继承方法，此处因为修改prototype后，子类 __proto__中的constructor会被覆盖丢失，所以重新修正一下其constructor

// 创建一个空的过渡类，减小构造函数的开销
function inheritObject(o) {
    // 创建一个过渡类
    function F() {}
    F.prototype = o
    return new F()
}
// 寄生组合式继承
function inheritPrototype(subClass, superClass) {
    // 复制一份父类的原型副本保存在变量中
    const p = inheritObject(superClass.prototype)
    // 继承
    subClass.prototype = p
    // 重新修正constructor
    p.constructor = subClass
}

测试一下

// 定义父类
function SuperClass5(name) {
    this.name = name
    this.colors = ["red", "blue", "green"]
}
// 定义父类原型方法
SuperClass5.prototype.getName = function () {
    console.log(this.name)
}
// 定义子类
function SubClass5(name, time) {
    // 构造函数继承
    SuperClass5.call(this, name)
    // 子类新增属性
    this.time = time
}
// 寄生组合式继承
inheritPrototype(SubClass5, SuperClass5)
SubClass5.prototype.getTime = function () {
    console.log(this.time)
}

这回都没有问题了

const test1 = new SubClass5("vue", 20)
const test2 = new SubClass5("react", 10)
test2.colors    // ['red', 'blue', 'green']
test1.colors.push("blue")
test2.colors    // ['red', 'blue', 'green']
test1.getName() // vue

其实在ES5中提供了上述inheritObject创建过渡类的方法，即

Object.create(superClass.prototype)

在ES6中更是提供了寄生组合式继承的方法，即

Object.setPrototypeOf(SubClass.prototype, SuperClass.prototype)

标签：function,父类,sub,继承,SubClass,SuperClass,prototype
来源： https://www.cnblogs.com/xt112233/p/15621038.html