在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中，曾提到：

1、“一切（引用类型）皆为对象”

2、 “每个函数都有一个prototype”

3、 “每个对象都有一个__proto__”

那么，问题来了，在随笔“Javascript之一切皆为对象2”中，不是有下图么

那，根据“一切（引用类型）皆为对象”，图中的函数Fn不也是对象吗？

那它也有__proto__，那么它是指向谁的呢？！！

答案：Function.prototype

为什么这么说呢？

因为函数Fn不是通过Function创建的么

所以Fn.__proto__指向的是Function.prototype。

不信？

我们一起写个demo并运行代码，证实下。打开chrome调试器截图如下。

<!DOCTYPE html>

    <head>

        <title>ttt</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <script>

            //创建一个Fn函数

            function Fn(){}

            //打印Fn的隐指针，即Fn.__proto__

            console.log(Fn.__proto__);

        </script>

    </body>

</html>

我靠，这是什么鬼！！

我只想说，应该是浏览器(我的chrome浏览器版本是48)还不支持Function.prototype吧。

那，怎么证明你上面所说的Fn.__proto__指向的是Function.prototype呢？

这样，我们知道prototype有个属性constructor吧，它是指向函数本身的，所以呢，倘若Fn.__proto__指向的是Function.prototype，那么Fn.__proto__.constructor就是指向的Function咯。

所以只要我们验证Fn.__proto__.constructor指向的是Function，那么就可以得出Fn.__proto__指向的是Function.prototype了哈。

demo和chrome截图如下

<!DOCTYPE html>

    <head>

        <title>ttt</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <script>

            //创建一个Fn函数

            function Fn(){}

            /*首先调用Fn的隐指针(__proto__)，

              然后再通过Fn.__proto__的constructor看看它指向的是什么

            */

            console.log(Fn.__proto__.constructor);

        </script>

    </body>

</html>

哈哈，从上面的截图可以看出Fn.__proto__.constructor的确指向的是Function，所以这会信了吧，Fn.__proto__指向的是Function.prototype。

所以修改上面的流程图，得下（为了结构更加清晰，我们将上图中的fn1对象删除，只留一个fn对象）：

咦，看了改造后的流程图，有个疑问，Function不也是个对象么，那它的__proto__指向谁呢？

答案：它自己的prototype。

何出此言？

因为Function也是个函数，所以它一定是被Function创建的，即它自身，因此，它的__proto__指向的是Function.prototype。

在上面，我们知道了Fn.__proto__.constructor是指向的Function的，那么倘若要证实Function.__proto__是指向的Function.prototype，只要Function.__proto__.constructor指向的是Function就欧克啦，即Fn.__proto__.constructor.__proto__.constructor指向的是Function。

代码和截图如下：

<!DOCTYPE html>

    <head>

        <title>ttt</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <script>

            //创建一个Fn函数

            function Fn(){}

            console.log(Fn.__proto__.constructor.__proto__.constructor);

        </script>

    </body>

</html>

看来Function.__proto__的确是指向的Function.prototype。

根据Javascript 之一切皆为对象2中，提到prototype也是对象，所以Function.prototype也有__proto__，且指向的是Object.prototype。

从上面，我们知道Fn.__proto__指向的是Function.prototype，所以我们检查Function.prototype.__proto__是不是指向的Object.prototype，也就是看看Fn.__proto__.__proto__是不是指向的Object.prototype咯。

验证代码和截图如下：

<!DOCTYPE html>

    <head>

        <title>ttt</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <script>

            //创建一个Fn函数

            function Fn(){}

            console.log(Fn.__proto__.__proto__);

        </script>

    </body>

</html>

验证完毕：Function.prototype.__proto__指向的是Object.prototype。

所以，再次改造上图，得下流程图：

咦，从上图看到Object不也是对象吗？那它的__proto__指向谁呢？并且它的prototype的__proto__又指向谁呢？

答案：Object当然也是Function创建的，所以它的__proto__指向的肯定就是Function.prototype咯。由于Object.prototype是最后一个链，所以它（Object.prototype）的__proto__指向的就是null。

Object是函数嘛，它的__proto__指向Function.prototype倒好理解。

但，你说Object.prototype的__proto__指向的是null？！！

是的，Object.prototype.__proto__指向的是null，代码和截图如下：

<!DOCTYPE html>

    <head>

        <title>ttt</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <script>

            //创建一个对象obj

            var obj = new Object();

            /*obj.__proto__指向的是Object.prototype，

              所以,obj.__proto__.__proto__就是Object.prototype.__proto__

            */

            console.log(obj.__proto__.__proto__);

        </script>

    </body>

</html>

嘻嘻，对的吧。

再次改造上图，得下效果图：

好了，如果你能理解以上这张图，恭喜你，原型链的流程也估计差不多理解咯。

javascript之一切皆为对象3的更多相关文章

  1. javascript之一切皆为对象2

    其实呢,“函数function”和“对象object”之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中“Javascript之一切皆为对象1”也清楚的阐述 ...

  2. Javascript之一切皆为对象1

    在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...

  3. JavaScript系列----一切皆是对象

    1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...

  4. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  5. JavaScript“并非”一切皆对象

    上一篇:<函数声明和函数表达式--函数声明和函数表达式的异同> p{font-size:14px; } 写在前面 网上非常多都在说"JavaScript一切皆对象",那 ...

  6. javascript 核心语言笔记 6 - 对象

    对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(h ...

  7. （转载）JavaScript中的原型和对象机制

    (转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...

  8. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  9. JavaScript中的原型和对象机制

    1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...

随机推荐

  1. HashMap实现缓存（二）

    package com.cache; import java.util.*; //Description: 管理缓存 //可扩展的功能:当chche到内存溢出时必须清除掉最早期的一些缓存对象,这就要求 ...

  2. Odoo 二次开发教程(三)-第一个Model及Form、Tree视图

    创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...

  3. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

  4. Think in 递归

    网上写递归的文章可以用汗牛充栋来形容了,大多数都非常清晰而又细致的角度上讲解了递归的概念,原理等等.以前学生的时候,递归可以说一直是我的某种死穴,原理,细节我都懂,但是不管是在如何运用或者如何试试算法 ...

  5. fwrite写入文件不成功bug

    文件写入了,只是从头覆盖了!因为在fwrite():前面 文件位置指针是是SEEK_SET,即首位置.在fwrite(fileHeader, 1, 10, file); 前面加上一行fseek(fil ...

  6. 初识Python

    Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...

  7. linux内核分析作业8：理解进程调度时机跟踪分析进程调度与进程切换的过程

    1. 实验目的 选择一个系统调用(13号系统调用time除外),系统调用列表,使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 分析汇编代码调用系统调用的工作过程,特别是参数的传递的方 ...

  8. asp.net identity UserSecurityStamp 的作用

    UserSecurityStamp 主要是用来对用户安全相关信息做一个快照. 在使用asp.net identity 的 CreateAsync(TUser user) 创建一个用户的时候,如果开启了 ...

  9. 【转载】十步完全理解SQL

    很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语言.甚至是函数语言(尽管有些人认为 SQL 语言也是一种函数式语言) ...

  10. jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...