事情得从一个chrome控制台中的无意打印说起。

众所周知,js共六种数据类型,string、number、undefined、boolean、object、null。当然javascript还准备了引用类型,他们都是object对象构造而来,如下图所示的Function、Array、Date...

              

话说到这儿,Array instanceof Object ....这些自然好理解,那么Array instanceof Function这他妈又是什么鬼?那就让我们来探索一番~

关系图如下,让我们细细剖析一下

首先,你要明白一个全天下人都明白的知识点

  • 所有的引用类型(数组、对象、函数)都有一个__proto__的属性。
  • 所有的函数都一个prototype属性,他的值也是一个对象。
  • 所有引用类型的__proto__都指向其构造函数的prototype(显式对象)

事情的诞生都源于一个叫Object.protoype的东西,没错就是下面这个东西,函数、对象、数组都有的方法便在这儿。

继续打印看看,Object.prototype.__proto___

没错,这就是故事的源头... ,这就是造物主造出来的第一个玩意儿...他便是一国之主~

紧接着,造物主又孕育出了一个叫Function的东西,为了凸显等级关系,他便让Function.prototype的__proto__便指向了Object.prototyp(也可以理解为Function的构造函数的原型对象)。不信?你试试

有了首席大臣,Object.prototype便把大部分职责都交给了他,乱七八糟的事儿都交给你吧,没错,当官的都这样。于是,首席大臣便开始了自己辛劳的工作。

先构造一个自己的嫡系出来吧,function Function于是诞生了,他便是你声明的所有函数的构造函数,他的__proto__便指向了其构造函数的原型对象Function.prototype,看下面这个例子。

(注:Foo.prototype中的constructor便是构造函数,他与Foo函数是完全相等的。他指的并不是当前Foo函数的构造函数,而是由他构造出来的对象的构造函数。对象/数组本身不具备构
造下一代的能力,因此其便没有prototype原型对象,他的__proto__属性便指向了其构造函数的原型也就是Foo.prototype。而对于任意一个函数的prototype原型对象来说,其
__proto__都指向了老祖宗Object.prototype

  

Function的制作工作完成了以后,造物主老感觉还是缺点什么东西,还是不满意,于是一生令下,Function你听好了,再给我搞出一个叫Object的东西。Funcion就屁颠屁颠的搞出了二儿子,function Object

他的原型对象是啥呢,自然就是一国之主,Object.prototype。那么由他构造出来的对象的__proto__便指向的是Object.prototype

造物主还是觉得不满意,又命令Function道,按照造Object的方案,再给我造一个Array... 但是他干的活得多一些....

于是Function便开始了Array的制造过程,为了让他干的活儿多一点,他模仿自己的样子,给Array.prototype加了一些特殊的工具,让Array.prototype.__proto__依然指向了一国之主,Object.prototype

js王国诞生记至此完成....辛苦Function同志....

【总结】相信你理清了这些之后,对于js又是一个很大的提升,像zepto、vue等源码的阅读也会更加得心应手。以上都是按照自己的理解而来,文章中各引用类型的诞生顺序值得商榷,但是都是为了能够理解的更加深刻。希望有同学发现解释的有误的地方还能不吝赐教。

javascript今生前世的更多相关文章

  1. JavaScript 中回调地狱的今生前世

    1. 讲个笑话 JavaScript 是一门编程语言 2. 异步编程 JavaScript 由于某种原因是被设计为单线程的,同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程,这也 ...

  2. ATL、MFC、WTL CString 的今生前世(转载)

    转载:https://www.cnblogs.com/tekkaman/archive/2011/04/20/2022650.html 上文分析了ATL.MFC CString的设计和实现,我们不禁会 ...

  3. web前端知识总结

    前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...

  4. kettle的基本介绍

    Kettle 主要内容: 一.ETL介绍 二.Kettle介绍 三.Java调用Kettle API 一.ETL介绍 1. ETL是什么? 1).ETL分别是“Extract”.“ Transform ...

  5. C++浅析——虚表和虚表Hook

    为了探究虚表的今生前世,先来一段测试代码 虚函数类: class CTest { public: int m_nData; virtual void PrintData() { printf(&quo ...

  6. 彪悍开源的分析数据库-ClickHouse

    https://zhuanlan.zhihu.com/p/22165241 今天介绍一个来自俄罗斯的凶猛彪悍的分析数据库:ClickHouse,它是今年6月开源,俄语社区为主,好酒不怕巷子深. 本文内 ...

  7. Java网络编程中异步编程的理解

    目录 前言 一.异步,同步,阻塞和非阻塞的理解 二.异步编程从用户层面和框架层面不同角度的理解 用户角度的理解 框架角度的理解 三.为什么使用异步 四.理解这些能在实际中的应用 六.困惑 参考文章 前 ...

  8. NSGA-II入门C1

    NSGA-II入门C1 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献1 参考文献2 白话多目标 多目标中的目标是个瓦特? 多目标即是优化问题中的优化目标在3个及以上,一般这些优化的 ...

  9. K8s 终将废弃 docker,TKE 早已支持 containerd

    近日 K8s 官方称最早将在 1.23版本弃用 docker 作为容器运行时,并在博客中强调可以使用如 containerd 等 CRI 运行时来代替 docker.本文会做详细解读,并介绍 dock ...

随机推荐

  1. 处理input标签的border-radius

    给input设置border-radius效果时一定要先设置border属性,否则会出现左上部有阴影的效果.

  2. 仿网易新闻app下拉标签选择菜单

    仿网易新闻app下拉标签选择菜单 仿网易新闻app下拉标签选择菜单,长按拖动排序,点击增删标签控件 ##示例  ##EasyTagDragView的使用 在layout布局里添加:  

  3. python学习笔记之运算符

    目录 前言 软件环境 身份运算符 算术运算符 比较运算符 位移运算符 自变运算符 位运算符 逻辑运算符 成员关系运算符 Python真值表 最后 前言 在前面的博文介绍了Python的数据结构之后,接 ...

  4. RabbitMQ系列教程之七:RabbitMQ的 C# 客户端 API 的简介

    今天这篇博文是我翻译的RabbitMQ的最后一篇文章了,介绍一下RabbitMQ的C#开发的接口.好了,言归正传吧. Net/C# 客户端 API简介1.主要的命名空间,接口和类  定义核心的API的 ...

  5. ES6 新增命令

    let               用来声明变量.它的用法类似于var,但是所声明的变量, 只在let命令所在的代码块内有效. 例: {var a=10; let b=20;}; console.lo ...

  6. zepto.js 的tap事件中点击一次触发两次事件

    html代码: <div class="xh-lxx-cart-count1"> <span class="minus">-</s ...

  7. Linux服务器下对Oracle作Rman备份

    由于工作需要,最近要对几台Linux系统下的Oracle数据库进行Rman备份,就在操作的同时,整理了一下,方便今后作为资料进行查阅. ------------------------Linux服务器 ...

  8. 有关Android插件化思考

    最近几年移动开发业界兴起了「 插件化技术 」的旋风,各个大厂都推出了自己的插件化框架,各种开源框架都评价自身功能优越性,令人目不暇接.随着公司业务快速发展,项目增多,开发资源却有限,如何能在有限资源内 ...

  9. 使用Spring boot + jQuery上传文件(kotlin)

    文件上传也是常见的功能,趁着周末,用Spring boot来实现一遍. 前端部分 前端使用jQuery,这部分并不复杂,jQuery可以读取表单内的文件,这里可以通过formdata对象来组装键值对, ...

  10. static关键字,引发的spring普通类获取spring的bean的思考

    在c++和java中static关键字用于修饰静态成员变量和成员函数 举例一个普通的javabean class AA { int a; static int b; geta/seta;//此处省略g ...