JavaScript原型与继承(二)

本文所述内容:

  • 由组合构造模式详解组合继承模式,及其问题所在,问题所产生的原因,解决问题的办法
  • 合理的继承模式原理及瑕疵

1.组合继承模式

我们常说对于引用类型的数据,不能直接赋值修改,因为即使赋值给另外一个变量后,这个变量的值实际保存的是这个引用类型的指针,该指针依然指向的是这个引用类型所在堆中的值,换句话说,该指针指向引用类型原型。

我觉得这也是由于js原型链本身特性所造成的一种简单的继承。

前一篇文章我们有看到组合继承,就如创建对象的组合构造模式一样。

温习组合模式:

// 组合构造模式,即合并构造函数模式和原型模式

// 1. 这一步是构造函数模式
function Test(name){
    this.name = name
}

// 2. 这一步是原型模式
Test.prototype = {
    // 此处最好将原型指向构造函数本身,虽然影响不大,具体解释前一章节有说到
    constructor: Test,
    getName() {
        console.log(this.name)
    }
}

同理,组合继承也是类似(我们依旧假设继承与被继承的2个对象为ChildParent),将Child的原型重写并指向给Parent实例的原型

// 组合继承,即借用构造函数和重写原型的方式
function Parent(name) {
    this.name = name
    this.colors = ['red', 'green']
}

Parent.prototype.getName = function() {
    console.log(this.name)
}

function Child(name) {
    // 1.借用了 Parent构造函数,将name和colors属性“引用到”Child构造函数中
    // 这么做的目的是 使每个Child实例都拥有自己的name 和 colors
    Parent.call(this, name)
}

// 2.将`Child`的原型重写并指向给`Parent`实例的原型
Child.prototype = new Parent()

这样便达到了Child的所有实例,都拥有Parent实例的属性和方法,且这些属性和方法不是共享的,是实例本身所拥有的。

但这样同样会带来一个问题,Parent的构造函数会运行2次

// 第一次,将`Child`的原型重写并指向给`Parent`实例的原型
Child.prototype = new Parent()

// 第二次,实例化Child的时候,会调用Child构造函数,
// 此时,会再次调用Parent构造函数,克隆一份name和colors到Child中
let ym = new Child('ym')

注意:这个问题不仅仅是Parent的构造函数会运行2次的问题,还有一个问题是,Parent构造函数中的name和colors会存在2份,因为每一次调用Parent构造函数都会创建Parent的实例。

第一份存在于ym实例中,我们可以打印

let ym = new Child('ym')
ym.name // ym
ym.colors = // ['red', 'green']

如图所示
![6[@]0Z3$3U0WLG]JAJ`ZZLT.png](http://upload-images.jianshu.io/upload_images/3637499-b475a621659d6695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

第二份存在于Child.prototype

![1E5]O@H$I0P36K)TMJ5O`{0.png](http://upload-images.jianshu.io/upload_images/3637499-c2eabef2ea19f882.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里我们可以看到Child.prototype中的name为undefined,因为我们第一次初始化Parent时,并没有传参。

为了印证这一点,我们前一章说过,delete操作符可以使得查找属性继续顺着原型链往上,(delete是删除当前对象上的属性)

这时,我们在第一次初始化的时候传一个参数name 为 test

Child.prototype = new Parent('test')

然后再删除实例ym上的name,调用getName打印当前name值

delete ym.name
ym.getName()  // test 符合预期

这个问题造成的原因前面也说过了,就是因为初始化了2次Parent构造函数。那究竟哪一次是多余的呢?答案是第一次。

2.合理的继承模式

想想继承是为了什么?就是为了拥有父类的所有属性和方法而又不造成原型链的“污染和浪费”,同时父类原型和子类原型又可以很好的扩展,那我们何不简单粗暴的把父类原型克隆一份,不需要使用prototype指来指去?,6月8日更新:克隆一份的说法是错误的理解,继承的核心是原型链,父类扩展后,子类也相应得到扩展,而克隆做不到。

也就是在第一次初始化的时候不使用new Parent(),而是直接克隆一份Parent.prototype赋值给Child.prototype

那么这里会有疑问,Parent的实例上的属性不就没有被Child继承了吗?答案是依旧被继承了,在第二次初始化的时候。

依旧是上面的例子改造,完整的示例:

function Parent(name) {
    this.name = name
    this.colors = ['red', 'green']
}

Parent.prototype.getName = function() {
    console.log(this.name)
}

function Child(name) {
    Parent.call(this, name)
}

Child.prototype = Object.create(Parent.prototype)

// 这里我们依旧手动指定构造函数,为了便于区分实例与构造函数的关系
Child.prototype.constructor = Child

let ym = new Child('ym')
console.log(ym)

Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

另外,jquery的$.extend(true, {}, {})深拷贝我觉得也是可以的。,更新:$.extend做深拷贝是实现不了继承的,Object.create第一个参数如果是原型,那么返回的新对象的原型也是指向这个参数原型的,所以原型链并没有断掉。

查看下结果:

T)0VVG[P4W_LG_R70O4]EXR.png

发现这个方法也是有瑕疵的,查找的时候多了一层object,原因是Object.create本身会返回一个新的对象实例,该实例的指针指向克隆的Parent.prototype

3.总结

继承的更合理的方式,是基于组合模式,去掉组合模式中多余的成分,即:

去掉第一次初始化Parent构造函数,使Parent的实例属性只存在于Child实例中

由于现在一般用ES6的特性写js,其中extends继承是经常用的,但是原理还有待深究(期待下一篇吧)......或许,这才是最合理的继承方法。

4.相关

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

推荐阅读更多精彩内容