从 Prototype 开始说起(上)—— 图解 ES5 继承相关

Prototype__proto__

我们先写下一行代码:

function Parent {}

当我们写下这简单的一行代码时,实际上发生了两件事情

  • 创建了一个构造函数 Parent
  • 创建了一个原型对象 prototype

如下图:

QQ20191116-200718@2x.png

构造函数 Parent 中 有一个 prototype 的属性指向 Parent 的 原型对象 prototype
原型对象 prototype 则有一个 constructor 的属性 指向回 构造函数 Parent

紧接着,我们又写下一行代码:

var parent = new Parent()

此时,图片上多出一个新成员

QQ20191116-201047@2x.png

注意到图中的 Parent 的实例 parent 里,有一个[[prototype]],为什么这里不是 __proto__呢?

其实,这里的 [[prototype]] 表示一种标准规范内置属性,被一些浏览器自己通过__proto__实现了,对于 Chrome 的实现来说,这个 __proto__ 也并不存在于 实例 parent中,而是 Object.prototype 的一个 存取描述符,以下代码可以证明:

parent.hasOwnProperty('__proto__') // false

Object.prototype.hasOwnProperty('__proto__') // true

Object.getOwnPropertyDescriptor(Object.prototype, '__proto__')
/**
 * {
 *    configurable: true,
 *    enumerable: false,
 *    get: f __proto__()
 *    set: f __proto__()
 * }
 */

我们之所以能通过 parent.__proto__ 访问到,是因为通过原型链访问到了 Object.prototype 上的 __proto__ 存取描述符。

ES5 的 6 种继承

以下内容更像是《JavaScript高级程序设计》的笔记,主要提炼出每个继承的特点以及例图。

原型链继承

function Parent() {}
function Child() {}

var parent = new Parent()
Child.prototype = parent

var child = new Child()

此时,根据第一部分所描述的细节,我们很快可以画出这几行代码所做的事情:

QQ20191116-204120@2x.png

这样 child 就可以通过原型链继承的方式访问到 parent 以及 Parent.prototype 上的属性和方法了。 这种方式的特点是:

  • 引用类型的属性为所有实例共享
  • 无法向父类构造函数传值

借用构造函数继承(经典继承)

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

var child1 = new Child('child1')
var child2 = new Child('child2')

可以看到,这种方式和 原型 没有任何关系,所以画出的图也很纯粹:

QQ20191116-210140@2x.png

这种方式的特点是:

  • 每个实例上的属性都是独立的
  • 可以向父类构造函数传参
  • 每次创建实例都会创建一遍方法

组合继承

顾名思义,就是讲上述两种继承方式有机结合,通过将方法定义在 prototype 中,属性通过借用构造函数继承的方式实现继承。

function Parent(name) {
    this.name = name
}

Parent.prototype.talk = function () {}

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

var parent = new Parent('parent')
Child.prototype = parent
Child.prototype.constructor = Child

var child = new Child('child')

此时,关系图有了一些变化:

QQ20191117-202056.png

我们可以从图中看到,实例 child 和 实例 parent 各自拥有独立的 namne,但是共享 Parent.prototype 中的 talk() 方法。这种方式的特点是:

  • 拥有以上两种方式的优点
  • 执行了两次 父类构造函数 Parent

原型式继承

function createObject(o) {
    function F() {}
    F.prototype = o
    return new F()
}

function Parent() {}

var parent = new Parent()

var child = object(parent)

这里先创建了一个 createObject 函数,其实就是 ES5 Object.create 的模拟实现,将传入的对象作为创建的对象的原型。

QQ20191116-212737@2x.png

原型链继承 对比一下,我们发现其实是一样的,除了可以不用创建一个自定义构造函数 Child。所以特点和 原型链继承 相同:

  • 引用类型的属性为所有实例共享
  • 无法向父类构造函数传值

寄生式继承

原型式继承 的基础上,创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

function createObject(o) {
    function F() {}
    F.prototype = o
    return new F()
}

function enhanceObject(o) {
    var clone = createObject(o)
    clone.talk = function() {}
    return clone
}

function Parent() {}

var parent = new Parent()

var child = enhanceObject(parent)

通过增强对象,每次创建的新实例,所拥有的方法不是共享 Parent.prototype 中的,而是各自独立创建的。因此,该方式的特点类似借用构造函数继承

  • 可添加函数,增强能力
  • 每次创建对象都会创建一遍方法

寄生组合式继承

我们在 组合继承 中发现,这种方式最大的缺点是会调用两次父构造函数,
一次是设置子类型实例的原型的时候:

var parent = new Parent('parent')
Child.prototype = parent

一次在创建子类型实例的时候:

var child = new Child('child')

回想下 new 的模拟实现,其实在这句中,我们会执行:

Parent.call(this, name)

所以我们在例图中可以发现,parentchild 中都有一份 name 属性。

因此,通过 在 寄生组合式继承 中的 createObject 方法,间接的让 Child.prototype 访问到 Parent.prototype,从而减少调用父构造函数的次数。

function createObject(o) {
    function F() {}
    F.prototype = o
    return new F()
}

function Parent(name) {
    this.name = name
}

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

Child.prototype = createObject(Parent.prototype)
Child.prototype.constructor = Child

var child = new Child('child')

例图如下:

QQ20191116-220051@2x.png

这种方式的高效率体现它只调用了一次 Parent 构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

后记

从 Prototype 开始说起 一共分为两篇,从两个角度来讲述 JavaScript 原型相关的内容。

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

推荐阅读更多精彩内容

  • 什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类。 “原型对象”是核心概念。原型对象是新对象的模板,...
    zhoulujun阅读 2,311评论 0 12
  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,092评论 0 6
  • 继承 Javascript中继承都基于两种方式:1.通过原型链继承,通过修改子类原型的指向,使得子类实例通过原型链...
    LeoCong阅读 291评论 0 0
  • 理解 javascript 的原型链及继承 以上所有的运行结果都是 true; 三种构造对象的方法: 通过对象字面...
    你期待的花开阅读 1,500评论 0 3
  • 老屋, 承载了多少童年的美好, 哪怕会泥土飞扬, 外面大雨,屋里小雨滴答, 淋湿了我们的梦乡。 从前, 木窗里的昏...
    想飞的树不如草阅读 112评论 0 0