探究JS常见的6种继承方式

继承可以使得子类别具有父类的各种方法和属性

继承方法:

一、原型链继承

原型链继承是比较常见的继承方式之一其中涉及的构造函数、原型实例

三者之间存在着一定的关系

  • 每一个构造函数都有一个原型对象
  • 原型对象又包含一个指向构造函数的指针
  • 而实例则包含一个原型对象的指针
function Parent1() {
  this.name = 'parent1'
  this.play = [1, 2, 3]
}
function Child1() {
  this.type = 'child1'
}
Child1.prototype = new Parent1()
console.log(new Child1())

上面代码看似没有问题,虽然父类的方法和属性都能够访问,但其实有一个潜在的问题,下面例子来说明这个问题

var s1 = new Child1()
var s2 = new Child1()
s1.play.push(4)
console.log(s1.play, s2.play)
// [1,2,3,4],[1,2,3,4]

上面代码明明只改变了s1play属性,为啥s2的属性也跟着改变了,原因很简单,因为两个实例使用的是同一个原型对象,他们的内存空间是共享的,当一个发生变化的时候,另外一个也随之进行变化 。这就是使用原型链继承方式的缺点

二、构造函数继承(借助call)

构造函数的优缺点:
优点:它使父类引用属性不会被共享,优化了第一种继承方式的弊端。
缺点:只能继承父类的实例属性和方法,不能继承原型属性和方法

function Parent2() {
  this.name = 'parent2'
}
Parent2.prototype.getName = function() {
  return this.name
}
function Child1() {
  Parent2.call(this)
  this.type = 'child2'
}
let child = new Child1()
console.log(child) // Child1 {name: "parent2", type: "child2"}
console.log(child.getName()) // child.getName is not a function
三、组合继承(前两种组合)
function Parent3() {
  this.name = 'parent3'
  this.play = [1, 2, 3]
}
Parent3.prototype.getName = function() {
  return this.name
}
function Child3() {
  // 第二次调用 Parent3()
  Parent3.call(this)
  this.type = 'child3'
}
// 第一次调用 Parent3()
Child3.prototype = new Parent3()
// 手动挂上构造器,指向自己的构造函数
Child3.prototype.constructor = Child3
var s3 = new Child3()
var s4 = new Child3()
s3.play.push(4)
console.log(s3.play, s4.play) //[1, 2, 3, 4] , [1, 2, 3]
console.log(s3.getName()) //parent3
console.log(s4.getName()) //parent3

上面代码解决了前两种方法的问题,又有了新的问题,通过上面的注释,我们可以看到Parent3被调用了两次,第一次是改变Child3prototype的时候,第二次通过call调用Parent3的时候,那么Parent3多构造一次就多进行了一次性能开销。

四、原型式继承 (Object.create())

该方法接收两个参数:
1、用作新对象原型的对象
2、为新对象定义额外属性的对象(可选参数)

let parent4 = {
  name: 'parent4',
  friends: ['p1', 'p2', 'p3'],
  getName: function() {
    return this.name
  }
}
let person4 = Object.create(parent4)
person4.name = 'tom'
person4.friends.push('jerry')

let person5 = Object.create(parent4)
person5.friends.push('lucy')

console.log(person4.name) // tom
console.log(person4.name === person4.getName()) // true
console.log(person5.name) // parent4
console.log(person4.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
console.log(person5.friends) // ["p1", "p2", "p3", "jerry", "lucy"]

上面代码通过Object.create()方法可以实现普通对象的继承,不仅能继承属性,同样也能继承getName()方法

五、寄生式继承

使用原型式继承可以获得一份目标对象的浅拷贝,然后利用这个浅拷贝的能力再进行增强,添加一些方法,这样的继承方式 ,称为寄生式继承。
虽然优缺点和原型式继承一样,但对于普通对象的继承方式来说,寄生式继承相比于原型式继承还是在父类基础上添加了更多的方法。

let parent5 = {
  name: 'parent5',
  friends: ['p1', 'p2', 'p3'],
  getName: function() {
    return this.name
  }
}
function clone(original) {
  let clone = Object.create(original)
  clone.getFriends = function() {
    return this.friends
  }
  return clone
}
let person5 = clone(parent5)

console.log(person5.getName()) // parent5
console.log(person5.getFriends()) // ["p1", "p2", "p3"]

通过上面代码,我们可以看到person5是通过寄生式继承生成的实例,它不仅仅有getName方法,而且最后也用了getFriends方法,从最后输出的结果中可以看到person5通过clone方法添加了getFriends方法,从而使person5这个普通对象在继承过程中又增加了一个方法,这样的继承方式就是寄生式继承。

六、寄生组合式继承

在前面这几种继承方式的优缺点基础上进行改造,得出了寄生组合式的继承方式,这也是所有继承方式里面相对最优的继承方式。

function clone(parent, child) {
  // 这里改用Object.create就可以减少组合继承中多进行一次构造的过程
  child.prototype = Object.create(parent.prototype)
  child.prototype.constructor = child
}

function Parent6() {
  this.name = 'parent6'
  this.play = [1, 2, 3]
}

Parent6.prototype.getName = function() {
  return this.name
}

function Child6() {
  Parent6.call(this)
  this.friends = 'child6'
}

clone(Parent6, Child6)

Child6.prototype.getFriends = function() {
  return this.friends
}

let person6 = new Child6()

console.log(person6) // Child6 {name: "parent6", play: Array(3), friends: "child6"}
console.log(person6.getName()) // parent6
console.log(person6.getFriends()) // child6
总结
总结结构图
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容

  • 原型链继承将构造函数的原型设置为另一个构造函数的实例对象,这样就可以继承另一个原型对象的所有属性和方法,可以继续往...
    玲儿珑阅读 136评论 0 0
  • JavaScript的继承 许多面向对象语言都支持两种继承的方式:接口继承和实现继承。接口继承只继承方法签名,而实...
    生软今天解散了吗阅读 606评论 0 0
  • 1、原型链继承 原理:让子类的prototype指向父类的实例。 优点: 1、可以继承父类构造函数的属性和方法,也...
    Richard_Lin阅读 345评论 0 0
  • 想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一、原型链继承 重点:让新实例的原型等于父类的实例。 特点...
    尹玛丽阅读 459评论 0 1
  • 想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一、原型链继承 重点:让新实例的原型等于父类的实例。 特点...
    暗夜里最亮的星阅读 158评论 0 0