JS基础面试题二（继承）

前言

• 每一个实例对象都会有一个 _ _ proto _ _ 属性，
• 每一个函数都会有一个prototype属性；
• 构造函数可以通过prorotype查找它的原型，
• 实例对象可以通过 _ _ proto _ _ 查找它的原型；

JS实现继承的方式

首先我们需要提供一个父类：代码如下

// 定义一个类
function Animal(name) {
	// 属性
	this.name = name || 'animal'
	// 方法
	this.sleep= function () {
		console.log(`${this.name}正在睡觉`)
	}
}
// 原型方法
Animal.prototype.eat = function (food) {
	console.log(`${this.name} 正在吃${food}`)
}

1.原型链继承

function Dog () {}
Dog.prototype = new Animal()
Dog.prototype.name = 'dog'

let dog = new Dog()
console.log(dog.name) // dog
console.log(dog.sleep()) // dog正在玩耍
console.log(dog.eat('bone')) // dog正在吃bone
dog instanceof Animal // true  检测Animal.prototype在不在dog实例的原型链上
dog instanceof Dog // true 

核心： 将父类的实例作为子类的原型
特点：
1. 纯粹的继承关系，实例是子类的实例，也是父类的实例
2. 父类新增原型方法 or 属性，子类都能访问到
3. 简单，易于实现
缺点：
1. 要想为子类新增属性和方法，必须要在new Animal()语句之后执行，不能放到构造函数中
2. 继承单一，无法实现多继承
3. 新实例无法向父类构造函数传参
4. 所有新实例都会共享父类实例的成员(原型上的成员是共享的，一个实例修改了原型的成员，另一个实例的原型成员也会被修改）

2.借用构造函数(经典继承)

function Dog () {
	Animal.call(this, 'Jane')
	this.age = 2
}

let dog = new Dog()

console.log(dog.age) // 2
console.log(dog.name) // Jane
console.log(dog.sleep()) // Jane正在睡觉
dog instanceof Dog // true
dog instanceof Animal // false  检测Animal.prototype在不在dog实例的原型链上

核心： 使用call() 或 apply()将父类构造函数引入子类函数（等同于复制父类的实例属性给子类，没用到原型）
特点：
1. 解决了原型链继承的缺点，子类实例共享父类引用属性的问题
2. 子类实例中，可以向父类传递参数
3. 可以实现多继承（call多个父类对象）
缺点：
1. 只能继承父类构造函数的属性 / 方法，不能继承父类原型的属性 / 方法
2. 无法实现构造函数的复用（每次用每次都要重新调用）
3. 每个新实例都有父类构造函数的副本，臃肿

3.组合继承

// 组合原型链和构造函数继承
function Dog () {
	Animal.call(this, 'Jack') // 借用构造函数模式
	this.age = 18
}
Dog.prototype = new Animal() // 原型链继承
let dog = new Dog()

console.log(dog.name) // Jack
console.log(dog.age) // 18
console.log(dog.sleep()) // Jack正在睡觉
console.log(dog.eat('meat')) // Jack正在吃meat
dog instanceof Dog // true
dog instanceof Animal // true

核心： 通过调用父类构造函数，继承父类的成员，保留传参的优点，然后通过将父类实例作为子类实例原型，实现函数复用
特点：
1. 可以继承父类原型上的属性 / 方法，可以传参，可以复用
2. 每个新实例引入的构造函数成员（属性和方法）是私有的，不存在引用成员共享问题
缺点：
1. 调用两次父类构造函数：一次是在创建新实例原型的时候；另一次是在新实例内部

4.原型式继承

// 先封装一个函数容器，用来输出对象和承载继承的原型
function content (object) {
	function Dog () {}
	Dog.prototype = object // 继承了传入的参数
	return new Dog() // 返回函数对象
}

let ani = new Animal()
let dog = content(ani)

console.log(dog.name) // animal
console.log(dog.sleep()) // animal 正在睡觉
console.log(dog.eat('vegetables')) // animal正在吃vegetables
dog instanceof Animal // true
dog instanceof Dog  // false

核心： 先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例，Object.create()就是这个原理
特点：
1. 类似复制一个对象，用函数来包装
缺点：
1. 无法实现函数复用
2. 所有新实例都会共享父类实例上的成员
3. 无法传递参数

5. 寄生式继承

function content (object) {
	function Dog () {}
	Dog.prototype = object // 继承了传入的参数
	return new Dog() // 返回函数对象
}
// 以上是原型式继承，给原型式继承再套个壳子传递参数
function createAni (original) {
	let clone = content(original) // 通过调用content函数创建一个新对象
	clone.play = function () {
		console.log('playing')
	}
	return clone
}
let ani = new Animal()
let dog = createAni(ani) // 这个函数经过声明之后就成了可增添成员的对象

console.log(dog.play()) // playing
console.log(dog.name) // animal  继承ani对象的属性
dog instanceof Animal // true
dog instanceof Dog // false

核心： 创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回该对象
特点：
1. 没有创建自定义类型，只是套了个壳子返回对象
缺点：（同原型式继承）
1. 无法实现函数复用
2. 所有新实例都会共享父类实例上的成员
3. 无法传递参数

6.寄生组合式继承

Dog.prototype = Object.create(Animal.prototype)
function Dog (name) {
	this.name = name
	Animal.call(this, name)
}
Dog.prototype.constructor = Dog
let pup = new Dog('mini')
console.log(pup.name)
let dog = new Dog('han')
console.log(dog.name)

核心： 重点在于改造组合式继承，解决调用两次父类构造函数的问题
Dog.prototype = Object.create(Animal.prototype)
特点：
1. 公有的写在原型；
2. 私有的写在构造函数；
3. 可以向父类传递参数
4. 不会重复调用父类；
缺点： 需要手动绑定 constructor （如果重写 prototype）

扩展：

1. Object.create()

寄生组合式继承中原理是使用Object.create() 方法创建一个新的对象

// 语法：
Object.create(prototype[, propertiesObject]) 
// 参数：
// proto: 必填，表示新建对象的原型对象，即该参数会被赋值到目标对象的原型上
// propertiesObject: 选填，是一个属性描述对象
// 注意：proto参数可以是null 或 对象，创建空的对象时需传入null，否则会抛出TypeError

// 返回值：在指定原型对象上添加新属性后的对象

2. 检测方法