本文已参与「新人创作礼」活动，一起开启掘金创作之路
通过继承，子类可以继承并使用父类的属性和方法。提高代码的复用。js继承主要是对构造函数和原型属性的继承。本文描述几种继承方式：
原型链继承
function Parent(name) {
this.name = name
this.assets = ['Hat']
}
Parent.prototype.sayName = function(){
console.log(`My name is ${this.name}`)
}
function Child(name, age) {
this.name = name
this.age = age
}
Child.prototype = new Parent() // 核心
let xiaoming = new Child('xiaoming')
xiaoming.sayName() // My name is xiaoming
xiaoming.assets.push('shoes')
let xiaohong = new Child('xiaohong')
console.log(xiaohong.assets) // ['Hat', 'shoes']
xiaoming.__proto__.constructor === Child // false
xiaoming.__proto__.constructor === Parent // true
Child.prototype = new Parent() // 核心
Child.prototype.constructor = Child // 将构造函数重新指向子类
优点：
- 子类通过prototype指向父类的实例。实现原型链继承。子类实例访问属性时，没有的属性会通过原型链查找到父类。
缺点：
- 子类实例化无法向父类传参
- 引用类型的属性被所有实例共享：如assets属性，子类实例xiaoming修改值，实例xiaohong取值也发生变化。
构造函数继承
function Animal(sex) {
this.sex = sex
this.eat = function() {
console.log('food')
}
}
Animal.prototype.drink = function() {
console.log('drink water')
}
function Dog(sex) {
Animal.call(this, sex)
this.cry = function() {
console.log('wang wang')
}
}
let dog = new Dog('male')
dog.eat()
dog.cry()
dog.drink() // 无法读取
dog instanceof Dog // true
优点：
- 可以向父类传参
- 复用的父类属性不共享
缺点：
- 无法使用父类原型对象的方法
组合继承
原型链继承无法传参，但可以获取原型对象上的属性，构造函数无法获取原型对象上的属性，但是可以传参赋值构造函数内属性和方法。 两种方式结合即组合模式。
function Parent() {
this.assets = ['Hat']
}
Parent.prototype.sayName = function(){
console.log(`My name is ${this.name}`)
}
function Child(name, age) {
Parent.call(this)
this.name = name
this.age = age
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
let xiaoming = new Child('xiaoming')
xiaoming.sayName()
xiaoming.assets.push('shoes')
let xiaohong = new Child('xiaohong')
console.log(xiaohong.assets) // ['Hat']
优点：
- 子类实例化可向父类传参。
- 实现对构造函数和原型对象上的属性和方法的复用。
缺点：
- 父类new了两次。
原型式继承
let animal = {
sex: 'male',
drink: function() {
console.log('drink water');
}
}
function extend(Obj) {
let fn = function(){}
fn.prototype = Obj
return new fn()
}
let xiaoming = extend(animal)
xiaoming.drink() // 'drink water'
优点：
- 简单，单纯的通过原型链访问父类属性
缺点：
- 父类属性共享。
寄生式继承
对原型式的扩展
let animal = {
sex: 'male',
drink: function() {
console.log('drink water');
}
}
function extend(Obj) {
let fn = function(){}
fn.prototype = Obj
return new fn()
}
// 原型式基础上增加对象的优化。扩展属性和方法
function Dog(sex) {
let vo = extend(animal)
vo.eat = function() {
console.log('eat')
}
return vo
}
let dog = Dog('male')
let bigDog = Dog('male')
优点：
- 对继承后对象增强，扩展属性和方法。
缺点：
- 同原型式一样，父类属性共享，没有类的概念。
寄生组合式继承
组合式继承两次调用父类。优化子类继承父类的原型对象的方法
function Parent(name) {
this.name = name
}
Parent.prototype.sayName = function(){
console.log(`My name is ${this.name}`)
}
function Child(name, age) {
Parent.call(this, name)
this.age = age
}
// 修改子类的原型对象指向
function F(){}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Child
let xiaoming = new Child('xiaoming', 18)
- 实现对调用父类构造函数、传参，也继承了父类原型上的方法。
ES6继承
...待补充
