三句话给你解释清楚原型和原型链

    在前端的校园招聘面试以及社会招聘面试中,原型和原型链的相关试题基本上是必不可少的,也就说是必问的,很多人都会被这两个概念搞蒙,即使你真的了解了原型和原型链的定义,一到具体的面试题目,__proto__prototype这两个词嵌套复用就很容易把面试者弄得一脸懵逼,但是相信你读完这篇文章,这方面的面试题肯定就不再是问题了,因为真的可以两句话轻松搞定。

    首先我们先来列出几个等式,读者可以带着这些等式来阅读接下来的内容:

var object = {}
object.__proto__ === Object.prototype // 为 true

var fn = function(){}
fn.__proto__ ===Function.prototype  // 为 true
fn.__proto__.__proto__ === Object.prototype // 为 true

var array = []
array.__proto__ === Array.prototype // 为 true
array.__proto__.__proto__ === Object.prototype // 为 true
Array.__proto__ === Function.prototype // 为 true

    然后在几个月前我写过一篇同样关于原型和原型链的博客, 但几个月后回看起来,并不是特别满意,感觉并不能很清晰地把知识表达出来让读者看明白,于是才有了今天这篇文章,在上次的那篇文章中提到以下内容:

“首先,我们来讲讲浏览器的初始状态,就是在无代码的情况下,浏览器所分配到的内存的使用情况,首先浏览器会创建一个全局对象global,而在这个全局对象global内含有许多的全局函数,例如global.parseInt、global.parseFloat、global.Number、global.String、global.Boolean、global.Object等等,函数也是对象的一种,因此也会具有属性,其中一种属性为prototype,这个属性的含义便是函数的原型对象。”

    这段文字,其实大家只要关注最后加粗的地方即可,这也是我们第一句要记住的话:
    第一句话:prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。

    接下来引入第二句要记住的话:
    第二句话:要知道自己的__proto__引用了哪个prototype,只需要看看是哪个构造函数构造了你,那你的__proto__就是那个构造函数的prototype

    最后是第三句要记住的话,你可以将其理解成为第一句和第二句话的一个例外:
    第三句话:所有的构造函数的原型链最后都会引用Object构造函数的原型,即可以理解Object构造函数的原型是所有原型链的最底层,即Object.prototype.__proto===null


    重复一下,加深大家的印象:
    第一句话:prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。
    第二句话:要知道自己的__proto__引用了哪个prototype,只需要看看是哪个构造函数构造了你,那你的__proto__就是那个构造函数的prototype
    第三句话:所有的构造函数的原型链最后都会引用Object构造函数的原型,即可以理解Object构造函数的原型是所有原型链的最底层,即Object.prototype.__proto===null


    好了,一切关于原型链的问题,都能够得到解决了,你不信?
    行,那我们随便再出几道题目,然后来看看是不是通过两句话就能彻底解决出来。

第一道:

Object.__proto__ === ????填空???? // 为 true

    求Object.__proto__,首先你要知道Object是什么数据类型,他是一个构造函数,也就是一个函数,来复习一下我们的第二句话,函数由哪个构造函数构造出来?那不是废话吗,当然是Function,因此很明显,答案就是:

Object.__proto__ === Function.prototype // 为 true


第二道:

Function.__proto__ === ????填空???? // 为 true

    求Function.__proto__,一样,你要先清楚Function是什么数据类型,他同样是一个构造函数,是来用来创建(构造)一个函数的构造函数(- -!有点拗口),所以同样的,用我们的第二句话即可解决,这个构造函数同样是函数,因此答案就是:

Function.__proto__  === Function.prototype // 为 true


第三道:

true.__proto__ === ????填空???? // 为 true

    求true.__proto__,有没有感觉是换汤不换药,true是什么数据类型,Boolean嘛,因此它是由构造函数Boolean构造出来的,所以答案显而易见:

true.__proto__ === Boolean.prototype // 为 true


第四道:

Function.prototype.__proto__ === ????填空???? // 为 true

    求Function.prototype.__proto__,好了,这里需要第一句话和第二句话一起用了,首先根据第一句话,prototype是一个对象,然后根据第二句话,那么既然它是一个对象,他的构造函数很明显就是Object,因此答案也呼之欲出了:

Function.prototype.__proto__ ===Object.prototype // 为 true


第五道:

function Test(){}
var test=new Test()
test.__proto__===????填空???? // 为 true

    对于自己写的构造函数,这三句话依然有效,因此答案也很容易就得出来了:

test.__proto__===Test.prototype // 为 true


最后一道,必须谨记的例外:

Object.prototype.__proto__===null

    这个等式也只需要记住第三句话就可以轻松解决啦,具体成立的原因在第三句话里也解释了。




    最后再重复一下那三句话,再次加深大家的印象:
    第一句话:prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。
    第二句话:要知道自己的__proto__引用了哪个prototype,只需要看看是哪个构造函数构造了你,那你的__proto__就是那个构造函数的prototype
    第三句话:所有的构造函数的原型链最后都会引用Object构造函数的原型,即可以理解Object构造函数的原型是所有原型链的最底层,即Object.prototype.__proto===null

    好了,相信以后你们再遇到关于原型还有原型链的题目,都能轻轻松松解决了!



本教程版权归饥人谷_宣泽彬和饥人谷所有,转载须说明来源

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

推荐阅读更多精彩内容

  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,075评论 0 6
  • 在JavaScript中,原型链作为一个基础,老生长谈,今天我们就来深入的解读一下原型链。 本章主要讲的是下面几点...
    Devinnn阅读 1,371评论 1 6
  • 原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函...
    劼哥stone阅读 4,330评论 15 79
  • JS中原型链,说简单也简单。 首先明确: 函数(Function)才有prototype属性,对象(除Object...
    前小白阅读 3,850评论 0 9
  • (一) 醉诗醉曲水云间, 总把愁丝勾作弦。 百媚千红独韵莲, 紫红蓝。 一半儿娇嗔,一半儿敛。 (二) 百花深处惹...
    纳兰蕙若阅读 2,063评论 54 125