一篇文章弄明白Javascript

东方客主
• 阅读 942

在一片混沌中,一个叫Function的函数开天辟地,自己创建了自己。于是,一个叫JavaScript的星球诞生了。

一篇文章弄明白Javascript

图一:创建了自己的Function

新诞生的星球灰常牛逼,自带了两个规则:

  1. 所有的function都由Function创建,并拥有原型对象。
  2. 所有的对象都由function(construction)创建,并拥有雏形。该雏形指向function的原型对象。

这时候的Javescript星球只有Function, 所以Function开始按照规则完善自己。

首先只看规则一

规则一实际上有两点:
1.1 所有的function都由Function创建
1.2 所有的function都拥有原型对象
原型对象: prototype
Function自己本身就是function,按照规则,它应由Function创建——它创建的自己没毛病——正好符合规则1.1。但是按照1.2,它还要有自己的原型对象。于是它又创建了自己的原型对象。

一篇文章弄明白Javascript

图二:Function.prototype

Function已经符合规则一了。但是又出现了一个Function.prototype对象,它也需要按照规则完善自己。
问题出现了!!
Function.prototype是个对象没问题,但它同时又是Function创建的(本身正好符合规则1.1要求),所以它是个function。按规则1.2,它也应该有自己的原型对象。如果再由Function创建一个函数型原型对象,那这个原型对象又需要原型对象,这会出现一个死循环,怎么办?
解决办法很简单

JavaScript星球决定1:可以存在没有原型对象的function。这些function不能作为constructor创建对象,但也不是绝对。(下面这段话可以认为是幻觉)
Function.prototype和箭头函数没有原型对象,而且也不能作为constructor,由object.prototype.bind生成的函数没有原型对象,但可以作为constructor。所生成对象的雏形指向bind原函数的原型对象。

于是,Function.prototype虽然是个function,但它是个例外,没有原型对象。
问题就这么凑合解决了,但不能一直这样。原型对象只需要是个对象即可,没有必要是个函数对象,但是Function创建的,都是函数对象。函数对象和普通对象的不同点在于,函数对象受规则一的限制,必须有原型对象,普通函数不需要的。于是Function创建了Object。Object是个函数,它用来创建普通对象。
但是引入Object以后,因为Object也是一个函数,所以按照规则1.2,也需要一个原型对象(它本身是Function创建的,符合1.1)。好在Object自己创建了自己的原型对象Object.prototype。

一篇文章弄明白Javascript

图三:符合规则一的星球

到此规则一 完善了。

然后实现规则二

规则二实际上也有两点:
2.1 对象是由function创建的
2.2 所有的对象都拥有雏形。该雏形指向function的原型对象。
先看看这时候的Javescript星球,看图三,现在有Function和Function.prototype,有Object和Object.prototype对象,一共是4个对象。
首先它们都符合2.1。看图三就能直观看出来。图中方块代表函数对象椭圆代表一般对象红色箭头线表示创建了。 按照规则2.2,它们都应该拥有雏形。
雏形: __proto__
先看Function, 按照规则2.2,它的雏形指向创建者的原型对象。它是由自己创建的,并且前面它已经创建了自己的原型对象。于是,它的雏形就按规则指向自己的原型对象。

Function.__proto__ === Function.prototype 

再看Object,好在它的创建者Function有自己的原型对象,于是

Object.__proto__ === Function.prototype 

再看Object. prototype,这个有点特殊,自己的创建者Object的原型对象,也就是自己,按理因该是

Object.prototype.__proto__ === Object.prototype 

但是这样就形成一个环了。于是JavaScript星球出了决定2:

Object.prototype.__proto__ === null 

剩下Function.prototype。它也有同样的问题,按规则它的雏形应该指向创建者的原型对象,现实是,它就是自己创建者的原型对象,于是,按规则就是这个:

Function.prototype.__proto__ === Funtion.prototype 

这不是又个圈吗?于是,星球出了决定3

Function.protype.__proto__ === Object.prototype 

至此,规则全部完成,最难的原型链基础形成了。现在的JavaScript星球是这样的:

一篇文章弄明白Javascript

图四:基础JavaScript星球

以后的普通对象创建的过程大致如此:
先定义Constructor,该Constructor由Function创建,
同时Constructor的原型对象由Object创建,
然后通过new Constructor 来创建对象。
对象的雏形指向Constructor的原型对象。

function Simple () {}

var simple = new Simple;

simple.__proto__ === Simple.prototype; 

图四中的紫色线就是传说中的原型链。所有的对象继承,都是原型链的追溯。

雏形是我杜撰的,proto 一般也叫原型,我是为了好区分。按照我的杜撰,应该叫雏形链。

一篇文章弄明白Javascript

图五对象的定义

JavaScript星球是怎样运行的呢?这就涉及到作用域。
首先要了解,JavaScript星球还有
规则〇:一切都是对象,null表示一种没有对象的对象。
规则〇也有2点
0.1 所有的一切,哪怕是字面量也在需要的情况自动包装成对象。

// 这里的1竟然有toString方法。
(1).toString === '1' 

0.2 null是一种对象类型,就和函数是函数对象一样,null是null对象类型,这个类型的对象只有一个值null且该对象没有任何方法。和函数对象不一样的是,null又是五个基本类型中的一个。

typeof null === 'object' 

有了这些准备,我们开始看运行。

在运行开始,它先定义全局作用域,它共生一个全局对象,全局对象有一个属性undefined,它是undefined类型的唯一值。

undefined 类型是null类型的派生类,也是五个基本类型中的undefined类型。该类型只有唯一值undefined,而且该类型也没有任何方法。不过要注意:

typeof undefined === 'undefined' 

nudefined还是个全局变量的属性,也就是说,它是可以修改的。

等我慢慢写完。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实