JS 实现继承的几种方式

news/2024/9/23 5:22:19/

现在有parent、child两个函数，child函数的实例想要访问parent函数的属性和方法（child想要继承parent）。

1、原型链继承

缺点：有引用的值共享的问题

即当parent某个属性是引用数据类型的时候，child实例如果修改了这个属性的内容则其他的child实例中这个属性也会一起改变（正常来说应该是互不干扰的，原始数据类型属性就是互不干扰的）

function parent(){this.data = '我是parent'
}function child(){}child.prototype = new parent()var fun = new child()console.log(fun.data)

2、构造函数集成

通过在child函数中独立执行parent（此时parent的this指向window ），然后通过call方法改变parent的指向指向child实例（ parent.call(this) ），这样new出来的child实例就能访问到parent中的属性和方法了。这种方法就称为构造函数继承。

缺点：使用这种方法child实例没有办法拿到parent函数原型上的属性和方法。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}var fun = new child()console.log(fun.data)        // 输出“我是parent”
fun.say()                    // 此处报错

3、组合继承（构造函数+原型链）

这个方法是结合了上述的两个方法：

用构造函数继承中的child函数独立执行parent来解决原型链继承的引用值共享问题
用原型链继承中child函数的原型指向parent的实例来解决构造函数中child实例无法访问parent原型上属性和方法的问题。

缺点：new了两次parent，会产生了属性与方法重叠的问题。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}child.prototype = new parent()var fun = new child()console.log(fun.data)
fun.say()

4、寄生组合继承（经典继承）

（第三种方法）组合继承：无论什么情况下，都会调用两次父类的构造函数。寄生组合式继承就解决了上述问题，被认为是最理想的继承方式。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}child.prototype = Object.create(parent.prototype)var fun= new child()console.log(fun.data)
fun.say()

5、原型式继承

原型式继承是一种基于已有对象创建新对象的继承方式，适用于简单对象的继承。在 JavaScript 中可以使用 Object.create 方法来实现原型式继承。

// 原型对象
var parent = {name: 'parent',age: 30,say: function () {return '我是' + this.name}
}// 基于原型对象创建新对象
var child= Object.create(parent)child.name = 'Alice'   // 修改属性值
child.age = 25         // 修改属性值console.log(child.say()) // 输出 "我是 Alice"

6、es6的extends类继承

child类通过extends继承了parent类的属性和方法。

class Parent {constructor(name) {this.name = name}// 原型方法// 即 Parent.prototype.getName = function() { }// 下面可以简写为 getName() {...}getName = function () {console.log('Parent:', this.name)}
}
class Child extends Parent {constructor(name, age) {// 子类中存在构造函数，则需要在使用“this”之前首先调用 super()。super(name)this.age = age}
}
const asuna = new Child('Asuna', 20)
asuna.getName() // 成功访问到父类的方法