事情得从一个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. ASP.NET MVC Autofac依赖注入的一点小心得(包含特性注入)

    前言 IOC的重要性 大家都清楚..便利也都知道..新的ASP.NET Core也大量使用了这种手法.. 一直憋着没写ASP.NET Core的文章..还是怕误导大家.. 今天这篇也不是讲Core的 ...

  2. usaco 2002 月赛 Chores 题解

    Description Farmer John's family pitches in with the chores during milking, doing all the chores as ...

  3. 快学Scala之继承

        ## 1. 继承 Scala语言通过 extends 关键字来继承类. 那么继承一个类有什么好处呢? 子类除了拥有继承自超类的方法和字段(即为val(常量), var(变量)所定义的), 还可 ...

  4. Unity3D-Shader-热扭曲效果

    [旧博客转移 - 2016年1月13日 13:18 ] 前面的话: 本来我是想写一个水的原理的,但是发现涉及的知识太多,还有好多不懂的,所以就先一步一步来 最近呢,我在网上捡到了一本<热扭曲秘籍 ...

  5. visual studio高效率插件及快捷键

    visual studio从2010开始支持插件安装(工具->扩展管理器),这里推荐几个插件,可以极大的提升开发效率: Visual Assist X(VAssistX) VAssistX是wh ...

  6. Eclipse中常用快捷键

    Ctrl+C:复制. Ctrl+V:粘贴. Ctrl+X:剪切. Ctrl+S:保存. Ctrl+Z:撤销. Ctrl+A:全选. F3:快速定位光标位置的某个类.方法和属性. Ctrl+Q:跳到最后 ...

  7. USB的前世今生

    在人类的历史长河中,很少有一种技术或者传输标准能像USB那样跟我们的生活息息相关,甚至到了没有不行的地步.USB对于今天的人们来说,就好像是空气,是水,是我们每天必需但是又熟视无睹的东西,没有多少人知 ...

  8. 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序

    不得不吐槽一下,安装配置这eclipse真是太费劲了...下面总结一下,以便下次再安装 本人 win10系统,64位机 一.在官网下载eclipse安装包 文件名:eclipse-inst-win64 ...

  9. jenkins2 -pipeline 常用groovy脚本

    jenkins2的核心是pipeline,pipeline的核心是groovy. 那有一些基础的groovy是必须经常使用的,如变量赋值,变量引用,打印变量,输出字符,任务调用,循环判断等. Groo ...

  10. jmeter 单接口测试方案(接口无业务关联)

    前言 前面开了一篇讲了Jenkins+jmeter+ant的使用,但没有说到具体怎么投入到项目使用,主要介绍了接口测试定义,流程和环境部署,所以我今天要说的就是我是怎么将这个方案投入到实际中使用的.这 ...