第二章 面向对象编程之继承(1),看完这篇彻底明白了

35 阅读9分钟

继承

=================================================================

类式继承


function SuperClass(){

this.superValue = true

}

SuperClass.prototype.getSuperValue = function(){

return this.superValue

}

function SubClass(){

this.subValue = false

}

SubClass.prototype = new SuperClass()

SubClass.prototype.getSubValue = function(){

return this.subValue

}

var instance = new SubClass()

在这里插入图片描述

类式继承,就是子类通过其原型prototype对父类实例化,继承了父类。

分析一下instance的结构:

在这里插入图片描述

可以看到instance是SubClass的一个实例。

因为实例对象的__proto__属性指向的就是其构造函数的prototype属性,所以instance.proto === SubClass.prototype === SuperClass

instanceof用来判定对象是否是某个类的实例

我们可以用instanceof来判断对象和类之间的关系,instanceof是通过判断对象的prototype链来确定这个对象是否是某个类的实例,而不关心对象与类的自身结构。

在这里插入图片描述

因为某个对象的__proto__属性指向的是其构造函数的prototype属性。

所以从上面的测试可以看出,当某个对象/类是另一个类的实例,或者某个类的原型prototype是另一个类的实例时,就会满足instanceof的判定。另外instanceof的判定还会延伸至后者的父类或者祖先。

类式继承的缺陷

父类公有属性的引用类型会被共用

由于子类通过其原型prototype对父类的实例化,继承了父类。所以说如果父类中的共有属性要是引用类型,就会在子类中被所有实例共用。所以一个子类的实例更改子类原型从父类构造函数汇总继承来的共有属性就会直接影响到其他子类。

在这里插入图片描述

因为实例instance1和instance2的book属性指向的都是同一个地址,所以会相互影响;而title属性是通过值类型复制,所以相互独立。

无法初始化

因为子类的继承是靠其原型prototype对父类的实例化实现的,因此在创建父类的时候,无法想父类传递参数,所以也无法对父类构造函数内的属性进行初始化。

构造函数继承——创建即继承,原型无法共用


上面的类式继承已经做到了子类可以继承父类的属性和方法,但是同样缺陷也很明显,就是继承的父类公有属性是引用类型的话,指向同一地址,实例会相互影响,并且无法进行初始化。而构造函数继承就能够完美解决这一问题。

// 构造函数继承

// 声明父类

function SuperClass(id){

// 引用类型共有属性

this.books = ['JS','html','css'];

// 值类型共有属性

this.id = id;

}

// f父类声明原型方法

SuperClass.prototype.showBooks = function(){

console.log(this.books)

}

// 声明子类

function SubClass(id){

SuperClass.call(this,id);

}

在这里插入图片描述

注意,SuperClass.call(this,id) 这条语句是构造函数式继承的精华,由于call这个方法可以改变函数的作用环境,因此在子类中,对SuperClass调用这个方法就是将子类的变量在父类中执行一遍,由于父类是给this绑定属性的,因此子类自然也就继承了父类的共有属性。但是这种类型的继承并没有涉及原型prototype,所以父类的原型方法自然不会被继承。

组合继承——类式继承和构造函数式继承合体


// 组合式继承

// 声明父类

function SuperClass(name){

this.name = name

this.books = ['html','css','js']

}

// 父类原型共有方法

SuperClass.prototype.getName = function(){

console.log(this.name)

}

// 声明子类

function SubClass(name,time){

// 构造函数式继承父类name属性

SuperClass.call(this,name)

// 子类中新增共有属性

this.time = time;

}

// 类式继承

SubClass.prototype = new SuperClass()

// 子类原型方法

SubClass.prototype.getTime = function(){

console.log(this.time)

}

var instance1 = new SubClass('js book',2021)

instance1.books.push('node.js')

console.log(instance1.books)

instance1.getName()

instance1.getTime()

var instance2 = new SubClass('css book',2022)

instance2.books.push('h5')

console.log(instance2.books)

instance2.getName()

instance2.getTime()

在这里插入图片描述

分析一下instance的构造:

在这里插入图片描述

组合继承模式将类式继承和构造函数式继承相结合,可以看到构造函数式继承将父类的属性复制到子类(每次执行构造函数式继承,相当于重新new一个父类实例,所以不会有相互覆盖的可能),但是不涉及到protype,所以不会继承父类的原型方法。所以接下来马上使用类式继承,将父类的实例赋值给子类的prototype,因为子类原型prototype上继承父类的共有属性(比如books)和之前子类执行构造函数时生成的books属性同名,所以instance.books不会取原型链上的books属性,但是能够取到原型链上的父类原型pototype上的方法。

综上,组合继承完美结合了类式继承和构造函数式继承的优点,并且消除了他们的缺点。但是这种继承也不是完全没有缺点,就是执行了2遍的父类构造函数。

那有没有办法只执行1遍父类的构造函数,以减少消耗呢?

方法肯定是有的,那就是使用终结继承大法——寄生组合式继承!

终极继承大法——寄生组合式继承


原型式继承——封装类式继承

在说明终极继承大法之前,我们先学习一下它的组成之一,原型式继承。

function inheritObject(o){

// 声明一个过渡函数对象

function F(){}

// 过渡对象的原型继承父对象

F.prototype = o

// 返回过渡对象的一个实例,该实例的原型继承了父对象

return new F()

}

可以看出原型式继承和类式继承十分相似,实际上它就是类式继承的一个封装。只不过这里的子类是以过渡对象的形式出现的。

寄生式继承——原型式继承的二次封装

// 声明基对象

var book = {

name:'js book',

alikeBook:['css book','html book']

}

// 原型式继承

function inheritObject(o){

// 声明一个过渡函数对象

function F(){}

// 过渡对象的原型继承父对象

F.prototype = o

// 返回过渡对象的一个实例,该实例的原型继承了父对象

return new F()

}

// 寄生式继承

function createBook(obj){

// 通过原型式继承创建新对象

var o = new inheritObject(obj)

// 扩展新对象

o.getName = function(){

console.log(this.name)

}

return o

}

var newBook = new createBook(book)

在这里插入图片描述

寄生式继承其实就是对实例化后的原型继承对象进行扩展。

寄生组合式继承——终极

// 原型式继承

function inheritObject(o){

// 声明一个过渡函数对象

function F(){}

// 过渡对象的原型继承父对象

F.prototype = o

// 返回过渡对象的一个实例,该实例的原型继承了父对象

return new F()

}

// 寄生组合式继承

function inheritPrototype(subClass,superClass){

// 复制一份父类的原型副本保存在变量中

var p = inheritObject(superClass.prototype)

// 修正因为重写子类原型导致子类的constructor属性被修改

p.constructor = subClass

subClass.prototype = p

}

// 定义父类

function SuperClass(name){

this.name = name

this.colors = ['#000000','#ffffff','#000fff']

}

// 定义父类原型方法

SuperClass.prototype.getName = function(){

console.log(this.name)

}

// 定义子类

function SubClass(name,time){

// 构造函数式继承

SuperClass.call(this,name)

// 子类新增属性

this.time = time

}

// 寄生式继承父类原型

inheritPrototype(SubClass,SuperClass)

// 子类新增原型方法

SubClass.prototype.getTime = function(){

console.log(this.time)

}

// 创建2个测试方法

var instance1 = new SubClass('js book',2021)

var instance2 = new SubClass('css book',2022)

instance1.colors.push('red')

console.log(instance1.colors)

console.log(instance2.colors)

instance2.getName()

instance2.getTime()

在这里插入图片描述

分析下instance1的结构:

在这里插入图片描述

寄生组合式继承替换掉类式继承,与构造函数式继承的结合堪称完美。首先构造函数式继承复制了父类的共有属性,然后寄生组合式继承只是将父类的原型prototype复制到了子类的prototype,并且还修正了子类constructor属性。

多继承


JavaScript不是只有一条原型链吗?怎么实现多继承呢?我们来看下下面的一段代码:

在这里插入图片描述

通过extend方法,我们成功将source中的属性成功复制到了target对象中,但是仅仅这样还不够,会出现几个问题:

总结

我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

image image 开源分享:docs.qq.com/doc/DSmRnRG…