三句话+两个公式终结js原型链问题

首发于SirM2z的博客

之前发文研究了下js的原型链,但总感觉说的不是特别简单明了,每次回头看时,都还要从原理梳理一遍,这次打算详细梳理一遍,归纳出几个简单结论,用来终结原型链问题。经过这次琢磨,我发现要想搞懂js的原型链,只需要搞懂三个属性(后面我会总结成三句话),外加几个特殊公式就OK。

先放结论

结论一:三个重要属性(三句话)

  1. constructor属性:指向构造函数
  2. prototype属性:原型对象object类型(Function.prototype除外,后面会讲),不需要记它指向谁,因为它不指向谁,就是个对象(有点绕),总之记住它就是个对象就好,一个对象的原型对象的构造函数就是这个对象本身,下面有代码解释
  3. __proto__属性:指向构造函数原型对象

用代码解释第二句话:

let foo = funtion(){}
foo.prototype.constructor === foo // foo的原型对象的构造函数是foo

结论二:几个特殊公式

Object.prototype.__proto__ === null

Function.constructor === Function

Function.__proto__ === Function.prototype

Function.prototype.__proto__ === Object.prototype

Function.prototype.__proto__.__proto__ === null

图解结论二:

这里写图片描述
这里写图片描述

其实整个js原型链都符合结论一,只有结论二中的前两行公式是不符合的。它们两个应该是为了让整个原型链导向null而设计的,其他所有的链都可以通过结论一推导出来。不过在我们平常使用js的原型链时,是没必要往最顶层推导的(即null),所以前两个特殊公式基本用不到,在我们自己的代码中,只需参考结论一就可以推导所有原型链。

推导过程

有一个基准:只有函数对象才有prototype属性,函数对象简单说就是由function声明的函数

首先看一下几个内置的构造函数(String\Number\Boolean\Array\Date\Symbol\Object\Function)的prototype

这里写图片描述
这里写图片描述

可能这样还不够直观,那么看一下这张图:

这里写图片描述
这里写图片描述

看出来区别了吧,typeof(Function.prototype)竟然还是function,从这个角度继续探索,也就会得出上述前提公式的第二条Function.constructor === Function,第一条公式可以通过自行比较得出。

至于结论一也不能算做结论,属于基础感念范畴的,通过代码可以验证结论一,如下

let Foo = function(){}

// typeof(Foo.prototype) 应该是对象
typeof(Foo.prototype) // "object"

let f = new Foo()

// f.constructor 应该指向它的构造函数 Foo
f.constructor === Foo // true

// f.__proto__ 应该指向构造函数的原型对象,即 Foo.prototype
f.__proto__ === Foo.prototype // true

总结:至此,js原型链问题就被终结,只要记住结论一和那两个公式,所有原型链都能通过思考梳理出来,而不需要依靠控制台去试错得出。

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

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 2,991评论 4 14
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,054评论 0 3
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,724评论 2 17
  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 896评论 0 1
  • “喜欢一个不喜欢自己的人是什么感觉?” “你喜欢的样子我都没有” “我视你如命,你当我有病” 01 前段时间有一部...
    苏哩少女阅读 1,118评论 6 1