(转载)javascript世界万物诞生记

惊蛰1993      2022-02-09     116

关键词:

一. 无中生有

起初,什么都没有。
造物主说:没有东西本身也是一种东西啊,于是就有了null:技术分享

现在我们要造点儿东西出来。但是没有原料怎么办?
有一个声音说:不是有null嘛?
另一个声音说:可是null代表无啊。
造物主说:那就无中生有吧!
于是:技术分享

JavaScript中的1号对象产生了,我们把它叫做No. 1。
这个No. 1对象可不得了,它是真正的万物之祖。它拥有的性质和能力,是所有的对象都有的。
__proto__是什么意思呢?那是“生”的意思,或者叫做“继承”。

二. 制造对象的机器

既然有了一个对象,那么剩下就好办了,因为一生二,二生三,三生万物嘛。
但是,造物主很懒,他不想一个一个地亲手制造对象。于是他制造了一台能够造对象的机器:技术分享

他给这台机器起了一个名字:Object。
这台机器并不能凭空造出对象,它需要一个模板对象,按照这个模板对象来制造对象。很自然的,它把目前仅有的No. 1对象作为模板。图中的prototype就代表机器的模板对象。

机器又叫做构造函数,为啥呢?因为它是用来构造对象的嘛。

机器如何启动呢?答案是通过new命令。你对着机器喊一声:“new!”,对象就造出来了。

机器的产生,使得生产对象的过程自动化了,解放了造物主的双手,于是造物主忙别的去了。
如果机器只是按照模板的样子,机械地复制出一模一样的对象,那就太笨了。
人类的后代在继承了父辈的性状的基础上,可以产生父辈没有的新的性状。同样地,机器在制造对象时,除了继承模板对象的属性外,还可以添加新的属性。

比如说,有一天Object机器制造一个对象,它有一个特殊的属性,叫做flag,属性值是10。看起来是这样的:技术分享

写成代码就是:

var obj = new Object({ flag: 10 });

三. 更多制造对象的机器

一天天过去了,造物主来视察工作,发现Object制造出了很多很多对象。他还注意到:根据“物以类聚”的原则,这些对象可以分成很多类。聪明的造物主想,我何不多造几台机器,让每一台机器负责制造一类对象呢?于是,他造出了几台机器并给它们起了名字,分别是:
String:用来制造表示一段文本的对象。
Number:用来制造表示一个数字的对象。
Boolean:用来制造表示是与非的对象。
Array:用来制造有序队列对象。
Date:用来制造表示一个日期的对象。
Error:用来制造表示一个错误的对象。技术分享
多台机器齐开动,各自制造自己负责的那一类对象。轰轰烈烈的造物运动开始了。

造物主又开始思考了,虽然机器是用来制造对象的,但是机器本身实际上也是一种特殊对象啊。现在有了这么多机器,我得好好总结一下它们的共同特征,把它们也纳入对象体系。
于是,造物主基于No. 1对象,造出了一个No. 2对象,这个对象用来表示所有机器的共同特质。换句话说,它是所有机器的原型对象。技术分享

(注:__proto__写起来太麻烦了,我们用[p]来代替。)

当然,同Object一样,这些机器也需要各自有一个模板对象,即它们的prototype属性指向的那个对象。显然,它们的模板对象应该是继承在No. 1对象的。即
这张图显示了JavaScript世界中那些最基本的机器本身的继承(__proto__)线路以及它们的模板对象的继承(prototype)线路。只是看起来太复杂了,所以后面我们不再把它们的prototype画出来。

四. 制造机器的机器

造物主想:这下好了,我造出了Object机器,满足了对象制造的自动化。然后又造出了String、Number等机器,实现了特定类别的对象制造的自动化。但是,似乎还缺点什么啊?

对了,还缺少一台制造机器的机器啊!很快,万能的造物主就把它造了出来,并把它命名为Function。有了Function机器后,就可以实现自动化地制造机器了。
首先,Function也是一台机器,所以它的原型对象也是No. 2对象。
其次,Function又是一台制造机器的机器,所以它的模板对象也是No. 2对象。
所以我们得到了Function的一个非常特别的性质:

Function.__proto__ === Function.prototype

哇,太奇妙了!

不要奇怪,这个性质不过是”Function是一台制造机器的机器“这个事实的必然结果。
于是JavaScript的世界的变成了这个样子:技术分享从这张图上,我们会发现:所有的函数(包括Function)的__proto__都指向No. 2对象,而同时Function.prototype也是No. 2对象。这说明了:

从逻辑上,我们可以认为所有机器(包括Function自己)都是由Function制造出来的。

同时,如果再仔细瞧瞧,你会发现:

Object作为一个机器可以看做是有由Function制造出来的,而Function作为一个对象可以看做是由Object制造出来的。

这就是JavaScript世界的“鸡生蛋,蛋生鸡”问题。那么到底是谁生了谁呢?Whatever!

五. 让世界动起来

根据上文的叙述,机器用来制造某一类对象。正因为如此,机器可以作为这类对象的标志,即面向对象语言中类(class)的概念。此时,机器被称为构造函数。所以,在ES6引入class关键字之前,我们常常把构造函数叫做类。

然而,除了作为构造函数来制造对象外,函数通常还用作另外的用途:用来做一件事情。正是有了这个功能,JavaScript的世界才由静变动,变得生机勃勃。

比如,我们现在用Function机器制造了鸟类(即用来造鸟的机器):

function Bird(color) { this.color = color; }

然后,对着造鸟机说:“new!”,于是造鸟机发动起来,制造一个红色的鸟:

var redBird = new Bird(‘#FF0000‘);

现在我们想让鸟飞起来,于是我们再用Function机器来制造一台机器。这台机器不是用来制造对象的,而是用来做一件事情的,即“让鸟飞起来”这件事情:

// 这是一台通过晃动鸟的翅膀,让鸟飞起来的简陋的机器。 function makeBirdFly(bird) { shakeBirdWing(bird); }

我们知道,让一台制造对象的机器发动,只需要对它喊“new”即可;那么怎样让一台做事情的机器发动呢?更简单,对它咳嗽一声就行了。

makeBirdFly(redBird);

于是红鸟飞起来了,世界充满了生机。

从上面的Bird和makeBirdFly的定义可以看出:实际上,制造对象的机器和做事情的机器没什么明显区别,它们只是使用方式不同。在两种情况下,它们分别被叫做构造函数和普通函数。

说明1:function xxx语法可以看成new Function的等价形式。
说明2:用户自定义的函数通常既可以作为普通函数使用,又可以作为构造函数来制造对象。ES6新增的class语法定义的函数只能作为构造函数,ES6新增的=>语法定义的箭头函数只能作为普通函数。

六. 让世界立体起来

造物主对目前的世界不太满意。因为几乎所有的机器的模板对象都是No. 2,这导致世界看起来有点扁。

于是他又开始研究世界万物的分类问题。它发现有些对象会动、还会吃东西,于是他把它们叫做动物,用机器Animal来制造它们。他进一步发现,即使都是动物,也还是可以进一步分类,比如有些会飞、有些会游,他分别把它们叫做鸟类、鱼类。于是他想,我何不单独造几台机器,专门用来制造某一类动物呢。于是它造出了Bird、Fish等机器。

接下来,在选择这些机器的模板对象时碰到一个问题:如果还像之前那样直接复制一个No. 1对象作为Bird、Fish的模板,那么结果就是这样的:

这样可不好。首先没体现出鸟类、鱼类跟动物的关系,其次它们的模板对象存了重复的东西,这是一种浪费。怎么办呢?很简单,让Bird和Fish的模板对象继承自Animal的模板对象就好了。也就是

Bird.prototype.__proto__ === Animal.prototype Fish.prototype.__proto__ === Animal.prototype

于是:技术分享

用同样的方法,造物主造出了一个立体得多的JavaScript世界。

然而还不够。虽然那些纯对象现在充满了层次感,但是那些机器之间的关系还是扁平的:技术分享

怎么办呢?其实用类似的办法就行了:技术分享

为了做到这点,造物主发明了class关键字。

七. 世界最终的样子

世界现在变得可复杂了,只能画出一部分:技术分享

文章出自:JavaScript世界万物诞生记-梦柯教育中国专业的IT职业在线教育平台
交流平台:点击链接加入群【Javaweb前端学习交流】:



























javascript世界万物诞生记

JavaScript世界万物诞生记来源 https://zhuanlan.zhihu.com/p/22989691一.无中生有起初,什么都没有。造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来。但是没有原料怎么办?有一个声音说:... 查看详情

bug诞生记——临时变量栈变量导致的双杀(代码片段)

...上,于是就有了本系列这个稍微中性的名称。(转载请指明出于breaksoftware的csdn博客)    本系列博文的案例将都秉承一个 查看详情

bug诞生记——不定长参数隐藏的类型问题(代码片段)

...。为了直达问题根节,我将问题代码简化如下(转载请指明出于breaksoftware的csdn博客)#include<iostream>#in 查看详情

bug诞生记——不定长参数隐藏的类型问题(代码片段)

...。为了直达问题根节,我将问题代码简化如下(转载请指明出于breaksoftware的csdn博客)#include<iostream>#in 查看详情

bug诞生记——信号(signal)处理导致死锁(代码片段)

...务逻辑简化为:父进程一直维持一个子进程。(转载请指明出于breaksoftware的csdn博客)    首先我们定义一个结构体ProcessGuard,它持有子进程的ID以及保护它的的锁。这样我们在多线程 查看详情

bug诞生记——信号(signal)处理导致死锁(代码片段)

...务逻辑简化为:父进程一直维持一个子进程。(转载请指明出于breaksoftware的csdn博客)    首先我们定义一个结构体ProcessGuard,它持有子进程的ID以及保护它的的锁。这样我们在多线程 查看详情

javascript原型等概念

研究javascript的原型概念两天,看到这篇文章后,终于恍然大悟,里面的图展示了一切!大部分内容转载自:https://segmentfault.com/a/1190000005824449一切皆为对象殊不知,JavaScript的世界中的对象,追根溯源来自于一个null「一切皆为对... 查看详情

bug诞生记——const_cast引发只读数据区域写违例(代码片段)

...友,我们要学会和它相处,而不是改变它。(转载请指明出于breaksoftware的csdn博客࿰ 查看详情

apachedolphinscheduler诞生记

ApacheDolphinScheduler诞生记DolphinScheduler,简称”DS”,中文名“小海豚调度”(海豚聪明、人性化,又左右脑可互相换班,终生不用睡觉)。希望DolphinScheduler就像它的名字一样,成为一个“开箱即用”的灵活易... 查看详情

zygote进程——zygote的分裂

欢迎转载,转载请注明:http://blog.csdn.net/zhgxhuaa在Zygote的诞生一文中init进程是怎样一步步创建Zygote进程的。也了解了Zygote的进程的作用。Zygote进程的诞生对于整个Java世界能够说有着”开天辟地“的作用。它创建了Java虚拟机,而... 查看详情

mpeg诞生记

点击上方“LiveVideoStack”关注我们作者|LeonardoChiariglione翻译|Alex技术审校 | 李忠、张贤国MPEG 视 野#004#纯从逻辑上来讲,MPEG本不应该存在。 20世纪80年代,媒体标准化这个“银河帝国”被牢牢掌握在ITU(视频通信和... 查看详情

rtp诞生记

...者之一RonFrederick将为我们讲述这个如此重要的协议是如何诞生的。01—前因1992年10月,我开始试验SunVideoPix的图像采集卡,因为我打算基于IP组播写一个网络视频会议工具。该工具以vat(由L 查看详情

漫画|揭密微信诞生记

据民间流传微信的诞生源于张小龙因得一扫地高僧指点,才有了微信的诞生,而这其中也少不了程序员们的付出,一起来看看它的故事吧~本期漫画灵感来源于《微信第1行代码曝光!》文章,部分情节仅为民间流传或虚构。篇... 查看详情

linux诞生记

大家好,我叫Linux,是一名计算机的“大管家”,日常工作是指挥CPU、内存、硬盘、键盘、鼠标、显示器等设备有条不紊地运行起来。形象地讲,我是底层硬件与用户沟通的桥梁。用户可以通过我输入命令,我负责对命令... 查看详情

iot数字世界技术论(上)

...是,就有了光。在无限光芒的照耀下,我们物理世界开始进行演化,然后有了生物的产生和人类文明的诞生和发展。这西方圣经的创世篇,就如我们中国道德经的道生一,一生二,二生三,三生万物... 查看详情

jquery诞生记-原理与机制

一、看似偶然的东西实际是必然会发生的我大学时候在图书馆翻过一本很破旧的书,讲生物理论的,主要内容就是探讨生命的产生是偶然还是必然。里面很多亚里士多德都看不懂的公式计算什么的,还有模拟原始地球环境出现了... 查看详情

数字孪生万物可视|联接现实世界与数字空间

...《【云享·伙伴】第7期:数字孪生万物可视|联接现实世界与数字空间》,作者:华为云社区精选。一直备受欢迎的某沙盒类模拟城市建设游戏中,玩家以市长的身份亲自规划和建设整座城市,比如购买土地、... 查看详情

王垠~~转载

希望他能踏踏实实做个几年 做出成果 世界需要 改变但是不需要很急躁的改变清华梦的诞生 http://blog.sina.com.cn/s/blog_6749d9540100m1oy.html    小时候,妈妈给我一个梦。她指着一个大哥哥的照片对我说,... 查看详情