一、原型链继承
基于原型链查找，将父类的实例作为子类的原型
// 一、原型链继承
function Parent () {
this.name = 'hszz'
this.arr = [1, 2, 3]
}
Parent.prototype.like = function () {
console.log('')
}
function Child() {
console.log('')
}
Child.prototype = new Parent() // constructor指针变了 指向了Parent
Child.prototype.constructor = Child // 手动修复
let c = new Child()
console.log('c', c)
优缺点
- 子类的实例会共享父类构造函数引用类型的属性
- 创建子类实例的时候无法传参
let c1 = new Child()
let c2 = new Child()
c1.name = 'hszz-hszz'
console.log(c1)
console.log(c2)
// #########################
// 重写了引用类型的arr属性和like方法, 它们都直接添加到了c1的实例属性上
c1.arr = [1, 2, 3, '被修改了（重新赋值）'] // 重新赋值
c1.like = function() {
console.log('like方法被我修改了')
}
console.log(c1.arr) // [1, 2, 3, '被修改了（重新赋值）']
console.log(c2.arr) // [1, 2, 3]
// #########################
// 这次采用push方法，没有开辟新空间，修改的就是原型。
c1.arr.push('add push') // 这次没有重新赋值
console.log(c1.arr) // [1, 2, 3, 'add push']
console.log(c2.arr) // [1, 2, 3, 'add push']
二、构造函数式继承
相当于拷贝父类的实例属性给子类，增强了子类构造函数的能力
优缺点
- 子类实例的各个属性相互独立、还能传参
- 子类无法继承父类原型上面的方法和属性。
- 在构造函数中定义的方法，每次创建实例都会再创建一遍。
// 二、构造函数式继承
function Parent (name) {
this.name = name
this.arr = [1, 2, 3]
}
Parent.prototype.like = function () {
console.log(`like${this.name}`)
}
function Child(name) {
Parent.call(this, name)
}
let c = new Child('hszz')
console.log(c)
三、组合继承 (原型链继承 + 构造函数式继承)
// 三、组合继承 (原型链继承 + 构造函数式继承)
function Parent(name) {
this.name = name;
this.arr = [1, 2, 3];
}
Parent.prototype.like = function () {
console.log(`this${this.name}`);
};
function Child(name) {
Parent.call(this, name);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child; // 修复constructor指针
let c = new Child("hszz");
console.log("c", c);
优缺点
- 集合两者优点
- 缺点-父类构造函数被调用了两次，
- 第一次调用后，子类的原型上拥有了父类的实例属性，
- 第二次call调用复制了一份父类的实例属性作为子类Child的实例属性
let c1 = new Child("hsz1");
let c2 = new Child("hsz2");
c1.arr.push("add push");
console.log(c1);
console.log(c2);
// 集合两者优点
// 缺点-父类构造函数被调用了两次，
// 第一次调用后，子类的原型上拥有了父类的实例属性，
// 第二次call调用复制了一份父类的实例属性作为子类Child的实例属性
四、原型式继承
基于prototype，和原型链继承类似，这种继承方式下实例没有自己的属性值，访问到也是原型上的属性。
优缺点
- 同原型链继承
// 四、原型式继承
function prodObject(obj) {
function F() {
}
F.prototype = obj
return new F()
}
// 这也是Object.create()的实现原理，所以用Object.create直接替换prodObject函数是ok的
let base = new function Base() {
name1 = 'hszz'
arr = [1, 2, 3]
}
let c1 = prodObject(base)
let c2 = prodObject(base)
console.log(c1)
console.log(c2)
// 类似原型链继承
五、寄生式继承
原型式继承的升级，寄生继承封装了一个函数，在内部增强了原型式继承产生的对象。
优缺点
- 拥有原型链继承的缺点
- 除此，内部的函数无法复用
// 五、寄生式继承
function prodObject(obj) {
function F() {
}
F.prototype = obj
return new F()
}
function greaterObject( obj ) {
let clone = prodObject(obj)
clone.queue = [1, 2, 3]
clone.like = function() {}
return clone
}
let parent = {
name: 'hszz',
color: ['red', 'blue', 'black']
}
let c = greaterObject(parent)
console.log('c', c)
六、寄生组合式继承
组合继承的问题在于会调用二次父类，造成子类原型上产生多余的同名属性。
-
把
Child.prototype = new Parent()，
改为Child.prototype = Object.create(Parent.prototype) -
通过Object.create返回的实例对象，将Child.prototype间接指向Parent.prototype，
当再增加addByChild方法时，属性就和父类没关系了。
// 六、寄生组合式继承
###### 优化组合继承
function Parent(name) {
this.name = name
this.arr = [1, 2, 3]
}
Parent.prototype.like = function () {
console.log(`like${this.name}`)
}
function Child(name) {
Parent.call(this, name)
}
// *************** 组合继承原本写法
// Child.prototype = new Parent();
// ************** 一改
Child.prototype = Parent.prototype // 改写为这
Child.prototype.constructor = Child;
let c = new Child('hszz')
console.log('c', c)
// 如果Child.prototype改变了，那岂不是直接影响到了父类
Child.prototype.addByChild = function() {}
Parent.prototype.hasOwnProperty('addByChild') // true
// ************** 二改
Child.prototype = Object.create(Parent.prototype) // 改为这样
Child.prototype.constructor = Child;
// 通过Object.create返回的实例对象，
// 我们将Child.prototype间接指向Parent.prototype，
// 当再增加addByChild方法时，属性就和父类没关系了。
网友评论