关于JavaScript继承和原型链

Before we get started

首先明确,JS的继承是由原型链来实现的。(即使在ES6中class的extends,也更像是一种语法糖)

当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object )都有一个私有属性(称之为 _proto_)指向它的原型对象(prototype)。该原型对象也有一个自己的原型对象 ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

C++和Java使用new命令时,都会调用"类"的构造函数(constructor)
在Javascript语言中,new命令后面跟的不是类,而是构造函数
在 JavaScript 中,构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时,它就可以被称为构造方法(构造函数)。

那么new运算符具体干了什么呢?

var obj  = {};
obj.__proto__ = F.prototype;
F.call(obj);

var o = new Foo();

// JavaScript 实际上执行的是:
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

关于_proto_和prototype

那么上面的_proto_和prototype又是什么呢?

对象具有属性_proto_,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型。
eg.

let o1 = new Object()
// 则
o1.__proto__ ===  Object.prototype // true

而Function是特殊的对象,在Function中,除了和其他对象一样有_proto_对象以外,还有原型属性(prototype),这个属性指向原型对象,而原型对象有个叫constructor的属性,指回原构造函数。
eg.

let f1 = new Foo()
// 则
f1.__proto__ === Foo.prototype
Foo.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

Foo.prototype.constructor === Foo

Object的原型对象用Object.prototype._proto_ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

Object关于prototype的两个方法

// 等同于 B.__proto__= A
Object.setPrototypeOf(B, A)
// 从子类上获取父类
Object.getPrototypeOf(B)

JavaScript实现继承的几种方式

构造继承

function dog (name) {
    this.name = name
}
// 共享的属性放在prototype中,只要更改prototype,所有实例的master属性都会被更改
dog.prototype = { master: 'Fog' }

// 生成两个实例对象
let dog1 = new dog('111')
let dog2 = new dog('222')

console.log(dog1.master) // Fog
console.log(dog2.master) // Fog

// 更改master
dog.prototype.master = 'Misty'

console.log(dog1.master) // Misty
console.log(dog2.master) // Misty

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

原型继承

即:把父类的私有+公有的属性和方法,都作为子类公有的属性。
核心思想:<code>Child.prototype = new Parent()</code>
实现的本质是重写了原型对象 ,通过将子类的原型指向了父类的实例,所以子类的实例就可以通过_proto_访问到 Child.prototype 也就是 Parent的实例

实例继承

核心思想:

function Child() {
    let instance = new Parent()
    return instance
}

拷贝继承

核心思想:循环遍历父类实例,然后父类实例的私有方法全部拿过来添加给子类实例

Call继承

核心思想:

function Child() {
    Parent.call(this); //构造函数中的this就是当前实例
}

注意:call是function的方法

中间件继承

核心思想:<code>Child.prototype._proto_ = Parent.prototype</code>

Object.create()

ECMAScript 5 中引入了一个新方法:Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。

ES6的extends

首先说明,ES6的Class中,所有定义的function方法(注意:在定义类的方法时,前面不需要加上 function 这个保留字),都是定义在prototype属性上的。
即:在类的实例上调用方法,其实就是调用原型上的方法。
此外,在类的内部定义的所有方法都是不可枚举的。(与ES5不同,注意)

Class之间可以通过extends关键字实现继承。
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承了父类的this对象。如果不调用super方法,子类就得不到this对象。
这与ES5不同:ES5是先创建子类的this,再将父类的方法添加到this上(Parent.apply(this))
而ES6:先创建父类的this,然后再用子类的构造函数修改this

而super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的

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

推荐阅读更多精彩内容