从设计初衷解释 JavaScript 原型链

通常大家都是先学了 C/C++/Java 这类语言,后两者面向对象的开发思路很相似,写一个 class,然后 new 出相应的实例对象,这些对象有的属性和方法是各自不同的,有的则是共享的类属性、类方法。如果要一个 class 要继承另一个,就直接用相应的语法继承就行了。但这个套路到了 JavaScript 上就似乎不适用了,因为 JavaScript 采用了原型继承的思路来实现面向对象的。

尤其是我们在刚学习 JavaScript 的时候一般是为了操作 DOM,甚至是直接使用了 jQuery 这样的类库,不大有面向对象开发的需求,于是也没深入去研究过这个。直到要找工作的时候,发现这是必考基础题,才开始查资料,发现和以前的套路有不同,更难以接受所谓的「基于原型的继承机制」。

上帝说要有类,就有了「类」

且说 JavaScript 一开始设计的时候,只是非常简易的脚本语言,但因为其中都是对象,所以需要一个机制来联系它们,最后还是设计了继承。但作者并没有用「类」的形式来实现,而是通过 new 一个「构造函数」来生成一个对象。

例如 Ruby 中,是实实在在地用了 class 声明了一个 Person 类,然后用 initialize 方法实例化一个对象,这个对象有自己的属性 name 和 gender。

class Person
  def initialize(name, gender)
    @name = name
    @gender = gender
  end
end
someone = Person.new('Jason', 'male')

在 JavaScript 中,并没有 class 的概念(ES6之后的语法糖暂且不提),而是使用了一个函数,运行 new 的时候便会根据这个 Person 函数生成一个对象,有其自己的属性 name 和 gender, 这个对象还有一个特别的属性,那就是__proto__,它的值就是Person.prototype的引用,后面再详细说。

function Person(name, gender){
  this.name = name;
  this.gender = gender;
}
var a = new Person("Jason", 'male');
var b = new Person("Amy", 'female');
console.log(a.name); // Jason
console.log(b.gender); // female

共享属性和方法

如上似乎实现了一个类,但实际上好像没有类变量或者类方法?因为通过 new 运算符生成的对象都是各自独立的,只不过它们的__proto__属性都是Person.prototype罢了。

为了共享属性和方法,就要用到这个见了几万遍的属性——prototype了。其实每一个函数都有一个prototype属性,通常是一个空的对象。如果给这个prototype对象里加点东西,那么由这个Person函数构造出来的对象便都能访问到。

function Person(name, gender){
  this.name = name;
  this.gender = gender;
}
console.log(Person.prototype); // {} 是一个空对象
Person.prototype = {
  country: 'China'
};
var a = new Person("Jason", 'male');
var b = new Person("Amy", 'female');
console.log(a.name); // Jason
console.log(b.name); // Amy
console.log(a.country); // China
console.log(b.country); // China

为什么呢?在之前已经说了,通过Person这个函数new出来的对象,都自带了一个属性__proto__,它的值是指向Person.prototype,是一个引用。意思就是说这个实例对象直接instanceof Person的。而 Person.prototype.__proto__ 也是一个对象呀,因为Person.prototype是直接由Object生成的,所以 Person.prototype.__proto__ == Object.prototype

a.__proto__ == Person.prototype
a.__proto__.__proto__ == Person.prototype.__proto__ == Object.prototype

所以说,a对象是继承自Person的原型对象( Person.prototype ),而Person的原型对象又继承自Object的原型对象,这样就构成了原型链。

反过来看原型链

当我调用a.country的时候,会发现a对象里并没有这个属性,便开始根据原型链向上查找,也就是去找__proto__所指向的原型对象,看看它有没有country属性,如果有,就得到了,没有的话继续向上查找,直到Object.prototype为止,因为Object再往上就是null了。Object原型对象是最初始的原型了,没有再继承自别的地方了。

所以对象通常还自带了一个方法hasOwnProperty,用法如下:

a.hasOwnProperty('name'); // true
a.hasOwnProperty('gender'); // true
a.hasOwnProperty('country'); // false

可以得出,country属性并不是自己的属性,而是通过原型链向上查找得到的,也就是所谓的继承来的。当然啦,hasOwnProperty这个方法显然也不是在写Person构造函数时自己开发的,是通过原型链向上查找,直到Object.prototype才有的,也就是实际上是调用了a.__proto__.__proto__.hasOwnProperty('name')

instanceof这个运算符则是通过原型链来计算的。

a instanceof Person // true
a instanceof Object // true
a instanceof Dog // false
a.__proto__ = Object.prototype // 改变原型链的关系,跳过Person,直接继承自Object原型
a instanceof Person // false
a instanceof Object // true

写在最后

我总算是搞懂这个原型链了,实在是艰辛。搞明白这个之后才觉得,原型继承似乎更加好用。写文之前参考了阮一峰的文章,醍醐灌顶,所以根据自己的理解写下这些,希望能帮助更多的人理解原型链。

参考:Javascript 继承机制的设计思想

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

推荐阅读更多精彩内容