我花了好几天做的动画,相信我只要看懂了,原型就拿下了

3,679 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

原型问题绕晕你了么?

没绕过么?吹呢?来答下面几道题,测测。

  • Object.prototype.__proto__值是null么?

  • 创建一个对象let str = new String(); 那么 str.__proto__ === String.prototypetrue还是false?

  • Number.constructor === Functiontrue还是false?

  • Number.prototype.constructor === Numbertrue还是false?

ok,上面几道题感觉如何?不够劲儿?再试试连环问。

  • Number.prototype.__proto__ === Object.prototypetrue还是false?

    • String.prototype.__proto__ === Function.prototype.__proto__ true还是false?

      • Boolean.__proto__.__proto__ === Object.prototypetrue还是false?
  • Number.constructor === Boolean.constructortrue还是false?

    • Number.__proto__.constructor === Functiontrue还是false?

      • Number.prototype.constructor === Numbertrue还是false?

差不多了吧,不管你绕没绕,反正我是被绕过,23333。

发现没有,这些题中反复出现三个关键要素:

  • 构造器constructor
  • 显式原型prototype
  • 隐式原型__proto__

原来我被绕,是因为我没有理清楚这三者之间的关系啊。

要想理清必须要经过比较长的理解过程,才能说学的透,记得住。

那么怎么才能学的快,记得牢,不怕忘,捡起来方便,有窍门么

窍门便是动画加口诀,我好像顿悟了一个“真理”啊

首先我通过对原型较为深入的理解,我觉得:

  • 机器:构造器constructor就是一个机器
  • 模具:显式原型prototype就是一个模具
  • 新物体:机器按照模具的样子,创建了一个新物体
    • 新物体的隐式原型即__proto__就是创造它的机器constructor的模具prototype

不就这么简单么,然后我就梳理出整个原型的发展过程,然后再套用这个“真理”,我一下就顿悟了,好像很多事情都说的通了,为了能够把当时的感觉描述出来,我写出了一个口诀。

混沌初开,万物为空

混沌是一切的开始,没有任何有形的物体存在,有的仅仅是一些基本组成物质的元素。

Untitled.png

无中生有,物聚成体

物质经过漫长的碰撞凝聚,渐渐的形成了最原始的元物体。

ezgif.com-video-to-gif.gif

物体演变,化元为众

元物体不断地演变,分裂出了众多具有不同特征的物体。

ezgif.com-gif-maker (6).gif

众体灵长,函数生用

在这些众多的物体之中,有个物体产生了灵,因其有了想法,可以对具体要做的事做计划,然后在某个时机被执行,这样便可裁成自身,进而拥有繁衍的能力,成为了生物,称为函数。 ezgif.com-gif-maker (7).gif

函数之用,为众造器

函数主动地为众多物体制定了繁衍的方案,并以此对自己进行裁成,繁衍出了多个函数子体,称为构造器。

ezgif.com-gif-maker (8).gif

体用合一,生生不息

当众物体与对应的构造器相结合,就具有了源源不断地繁衍自身的体力。

ezgif.com-gif-maker (10).gif

完整过程:

all.gif

注释一下

  • 体就是物体,对象。
  • “用”就是函数,一种可以被执行的能力,如同灵性一般。
  • 体用结合就是构造函数和原型对象的结合,形成了一个如同物种一般的存在。

用口诀再挑战一把上面的题

- Object.prototype.__proto__值是null么?

  • 思路:
    • Object是啥?是一个构造器constructor
    • Object.prototype是啥?就是跟ta体用合一的物体啊,也就是那个最先从“无”中生发出来的“元对象”。
    • “无中生有”的无是啥?就是null被。
  • 所以: image.png

创建一个对象let str = new String(); 那么 str.__proto__ === String.prototypetrue还是false?

  • 通过口诀:体用合一,生生不息

  • 思路:“体用合一”中的体就是Stringprototype,用就是constructor函数,也就是String函数本身喽,String构造器和prototype合伙创建的str,这是真理啊。

  • 所以: image.png


Number.prototype.constructor === Numbertrue还是false?

  • 思路:
    • Number”是啥,构造器啊,也就是“用”
    • Number”的“prototype”是啥,他的合作伙伴,“体”啊!
    • 他俩“体用合一”,才生生不息的,彼此是你中有我,我中有你的关系
    • 所以“体”的“用”即constructor,便是“Number”构造器喽。
  • 所以: image.png

Number.constructor === Functiontrue还是false?

  • 思路:
    • Number”是啥,构造器啊,也就是“用”
    • 原生的构造器有构造器么?谁有构造器?“体用合一”,当然是体有了,所以“constructor”是沿用创造自己的模具的,也就是“Number.__proto__”的constructor
    • Number.__proto__”是谁,那就要看Number作为一个“物体”,他是被谁创造的?
    • “函数之用,为众造器”啊,函数物体就是机器Function和模具Number.__proto__一起创造的。
    • 然后"体用合一",模具Number.__proto__constructor的就指向了机器Function喽。
  • 所以: image.png

这几个元问题搞定了,其余的问题都是套用的,

一句话总结

null⇒对象⇒分化出了函数等众多物体⇒函数创建了构造器⇒众多物体与对应的构造器结合⇒然后生生不息地创建物体

就这么简单,当我再面对原型问题的时候,我就不懵了,而且我不忘了,不用再背了。