美文网首页让前端飞饥人谷技术博客前端开发笔记
三句话给你解释清楚原型和原型链

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

作者: 宣泽彬 | 来源:发表于2018-09-15 13:15 被阅读24次

    在前端的校园招聘面试以及社会招聘面试中,原型和原型链的相关试题基本上是必不可少的,也就说是必问的,很多人都会被这两个概念搞蒙,即使你真的了解了原型和原型链的定义,一到具体的面试题目,__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

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


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

相关文章

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

    在前端的校园招聘面试以及社会招聘面试中,原型和原型链的相关试题基本上是必不可少的,也就说是必问的,很多人都会被这两...

  • 第十三章 继承

    为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“...

  • js原型和闭包(6)——继承

    为何用“继承”为标题,而不用“原型链”?原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链和class继承

    从网上找了一张图,比较清楚的描述了原型链 原型链 1.原型链的定义 每个对象都可以有一个原型proto,这个原型还...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • 2018-10-29 关于js原型链的讨论

    起源:为什么使用原型链 使用原型链是为了实现继承,那js的继承为什么选择了原型链呢?我们来看看网络的解释 http...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • js中原型和原型链概念的简单理解

    这写的多明白啊,我就不自己BB了 这是我看过关于原型和原型链说的特别清楚的文章了 转载 原型:被new的那个 原型...

网友评论

    本文标题:三句话给你解释清楚原型和原型链

    本文链接:https://www.haomeiwen.com/subject/jgizgftx.html