假设有如下父类
function Parent(name){
this.name = name
this.show = function(){
console.log(this.name)
}
}
Parent.prototype.age = 10
1. 构造函数继承
/*
* 构造函数继承
*/
function Child(name){
Parent.apply(this, arguments) //重点
}
var c = new Child('xiaoming')
c.show() // xiaoming
console.log(c.age) // undefined
- 重点:
用.call()
和.apply()
将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制)) - 特点:
- 只继承了父类构造函数的属性,没有继承父类原型的属性
- 可以继承多个构造函数属性(call多个)
- 在子实例中可向父实例传参
- 缺点:
- 只能继承父类构造函数的属性,没有继承父类原型的属性
- 无法实现构造函数的复用(每次用每次都要重新调用)
- 每个新实例都有父类构造函数的副本,臃肿
2. 原型继承
/*
* 原型继承
*/
function Child(name){
this.name = name
}
for(var i in Parent.prototype){
Child.prototype[i] = Parent.prototype[i]; // 重点
}
let c = new Child('xiaoming')
c.show() // 报错,父构造函数无法继承
console.log(c.age) // 10
- 重点:遍历父类的原型赋值给子类
- 优点:简单,方便,可以继承原型身上的方式和属性
- 缺点:只能继承原型,不方便传参
3. 原型链继承
/*
* 原型链继承
*/
function Child(name){
//无法向父类传参name
this.name = name
}
Child.prototype = new Parent() //重点
let c = new Child('xiaoming')
c.show() // xiaoming
console.log(c.age) // 10
- 重点:让新实例的原型等于父类的实例
- 特点:
既能继承原型,又能继承构造函数 - 缺点:
- 新实例无法向父类构造函数传参
- 继承单一,无法多继承
- 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
4. 组合继承
组合继承(组合原型链继承和构造函数继承)(常用)
/*
* 组合继承
*/
function Child(name){
Parent.apply(this, arguments) //重点
}
Child.prototype = new Parent() //重点
let c = new Child('xiaoming')
c.show() // xiaoming
console.log(c.age) // 10
- 重点:结合了两种模式的优点,传参和复用
- 特点:
- 既能继承构造函数又能继承原型,方便传参,多继承
- 每个新实例引入的构造函数属性是私有的
- 缺点:
调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。
5. 寄生继承(Object.create()的原理)
/*
* 寄生继承(Object.create()的原理)
*/
function createChild(obj){
function F(){}
F.prototype = obj
return new F() // 返回一个实例,实例的原型是传入的obj
}
function create(obj, name){
let child = createChild(obj) // 重点
child.name = name
return child
}
let p = new Parent() // 获取一个Parent实例
let child = create(p, 'xiaoming')
console.log(child.name) // xiaoming
console.log(child.age) // 10 通过原型找到
- 重点:就是给原型链继承外面套了个壳子
- 优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象
- 缺点:没用到原型,无法复用
6. ES6 class继承
extends
使用关键字继承
super
调用父类构造函数
- 特点:
ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this
上面(Parent.apply(this)
)。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this
上面(所以必须先调用super
方法),然后再用子类的构造函数修改this
。如果子类没有定义constructor
方法,这个方法会被默认添加。也就是说,不管有没有显式定义,任何一个子类都有constructor
方法。 - 注意:
在子类的构造函数中,只有调用super
之后,才可以使用this
关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super
方法才能调用父类实例。 - 优点:简单方便易操作,语法层面的继承,属性和方法都能继承,参数很好处理
- 缺点:兼容性
网友评论