js的继承
Contents
原型链继承
原理
让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。
缺点
- 所有子类实例都指向同一个父类实例，父类中引用类型变量修改，会影响所有子类实例。
- 创建子类实例时无法向父类构造函数传参，即没有实现
super()功能。
// 父类
function Parent() {
this.name = 'bhwa233'
this.info = {
age: 0
}
}
// 父类的原型方法
Parent.prototype.getName = function () {
return this.name
}
// 子类
function Child() {
}
// 让子类的原型对象指向父类实例
Child.prototype = new Parent()
Child.prototype.constructor = Child // 根据原型链的规则,顺便绑定一下constructor, 这一步不影响继承, 只是在用到constructor时会需要
// 然后Child实例就能访问到父类及其原型上的name属性和getName()方法
const child = new Child()
console.log(child.name); // bhwa233
console.log(child.getName()); // bhwa233
//关于缺点
const child1 = new Child()
const child2 = new Child()
child1.info.age = 18
console.log(child1.info); // { age: 18 }
console.log(child2.info); // { age: 18 }
构造函数继承
原理
在子类的构造函数中执行父类的构造函数，并为其绑定子类的this，让父类的构造函数把成员属性和方法都挂到子类的this上。避免实例之前共享一个原型实例，又能向父类构造方法传参。
缺点：
- 无法继承到父类原型上的属性和方法。
// 父类
function Parent(name: string) {
this.name = name
}
// 父类的原型方法
Parent.prototype.getName = function () {
return this.name
}
// 子类
function Child() {
Parent.call(this, 'child') // 执行父类构造方法并绑定子类的this, 使得父类中的属性能够赋到子类的this上
}
const child1 = new Child()
const child2 = new Child()
child1.name = 'child1'
console.log(child1.name); // child1
console.log(child2.name); // child
console.log(child1.getName()); //TypeError: o.getName is not a function,构造函数继承的方式继承不到父类原型上的属性和方法
组合式继承
原型链和构造函数继承结合。
缺点：
- 每次创建子类实例都执行了两次构造函数(
Parent.call()和new Parent())，虽然这并不影响对父类的继承，但子类创建实例时，原型中会存在两份相同的属性和方法。
// 父类
function Parent(name: string) {
this.name = [name]
}
// 父类的原型方法
Parent.prototype.getName = function () {
return this.name
}
// 子类
function Child() {
Parent.call(this, 'child')
}
Child.prototype = new Parent() // 子类的原型继承父类的原型
Child.prototype.constructor = Child // 根据原型链的规则,顺便绑定一下constructor, 这一步不影响继承, 只是在用到constructor时会需要
const child1 = new Child()
const child2 = new Child()
child1.name[0] = 'child1'
console.log(child1.name); // ['child1']
console.log(child2.name); // ['child']
console.log(child1.getName()); // ['child1']
寄生式组合继承
为了解决构造函数被执行两次，将指向父类实例，改为指向父类原型，减少一次构造函数执行。
// 父类
function Parent(name: string) {
this.name = [name]
}
// 父类的原型方法
Parent.prototype.getName = function () {
return this.name
}
// 子类
function Child() {
Parent.call(this, 'child')
}
// Child.prototype = new Parent()
Child.prototype = Parent.prototype // 子类的原型指向父类的原型
Child.prototype.constructor = Child // 根据原型链的规则,顺便绑定一下constructor, 这一步不影响继承, 只是在用到constructor时会需要
const child1 = new Child()
const child2 = new Child()
child1.name[0] = 'child1'
console.log(child1.name); // ['child1']
console.log(child2.name); // ['child']
console.log(child1.getName()); // ['child1']
缺点：
由于子类原型都指向父类原型，对父类原型的操作会影响所有子类。为了解决这个问题，需要给Parent.prototype做一个浅拷贝。
function Parent(name) {
this.name = [name]
}
Parent.prototype.getName = function () {
return 'get parent name'
}
function Child() {
// 构造函数继承
Parent.call(this, 'bhwa233')
}
//原型链继承
// Child.prototype = new Parent()
Child.prototype = { ...Parent.prototype } //将`指向父类实例`改为`指向父类原型`
Child.prototype.constructor = Child
//测试
const child = new Child()
child.getName = function () {
return 'get child name'
}
const parent = new Parent()
console.log(child.getName()) // get child name
console.log(parent.getName()) // get parent name
面试题
写一个类Person，拥有属性age和name，拥有方法say(something)。
再写一个类Superman，继承Person，拥有自己的属性power，拥有自己的方法fly(height) ES5方式
function Person(age, name) {
this.age = age
this.name = name
}
Person.prototype.say = function (something) {
console.log(`say:${something}`)
}
function Superman(name, age, power) {
Person.call(this, ...arguments)
this.power = power
}
Superman.prototype = { ...Person.prototype }
Superman.prototype.constructor = Superman
Superman.prototype.fly = function (height) {
console.log(`fly:${height}`)
}
let a = new Superman(1, 2, 3)
a.fly(22)
a.say('123')