javascript之一切皆为对象3
在前面两个章节“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的更多相关文章
- javascript之一切皆为对象2
其实呢,“函数function”和“对象object”之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中“Javascript之一切皆为对象1”也清楚的阐述 ...
- Javascript之一切皆为对象1
在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...
- JavaScript系列----一切皆是对象
1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- JavaScript“并非”一切皆对象
上一篇:<函数声明和函数表达式--函数声明和函数表达式的异同> p{font-size:14px; } 写在前面 网上非常多都在说"JavaScript一切皆对象",那 ...
- javascript 核心语言笔记 6 - 对象
对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(h ...
- （转载）JavaScript中的原型和对象机制
(转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- JavaScript中的原型和对象机制
1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...
随机推荐
- 使用js_md5加密密码
为什么在传输过程中要用md5对密码进行加密? 众所周知,我们在表单中的输入框输入了密码后,如果采用ajax的post或者get方式提交数据,在浏览器的newwork中就可以看到我们向后台传输的内容,其 ...
- weex image
weex 的image用来渲染图片, 可以使用img作为它的别名. 需要注意的是,他的长度可宽度必须指定, 不然它是不会工作的. 它没有任何的子组件. 有两个属性: src 用来指定图片的地址图片. ...
- iOS推送原理
1.首先app会和apns建立长连接,会发送 udid和 bundle id给apns 2.apns会返回给app一个device token 3.用会把device token 发给自己的服务器 4 ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- sqlserver 连接mysql
配置与电脑相对应的odbc http://dev.mysql.com/downloads/connector/odbc/
- Hibernate一对多配置
刚刚学习了Hibernate框架的基础知识,下面我来说说关于Hibernate一对多的配置 首先是大配置 连接数据库 用户名 和密码 能和小配置连接 部门小配置: 员工小配置: 部门实体类 员工实体类 ...
- easyUI datagrid 根据查询条件 选中对应数据的行
开始 输入了 土豆,南瓜,再次是小青菜,每次输入点击搜索的时候(模糊查询),选中的当前数据对应的行 在做之前,在网上查询了许多资料,也在技术群里问过许多次,弄了好久终于好了. 第一次写博客真不知道写啥 ...
- JS简介，如何快熟JS。打下结实基础。
JS决定网页的行为,有行为就有逻辑,而计算机只是人工智能,你给它什么样的指令,它就会按照你的指令去运行. 有人会问,既然是给出指令,那还需要什么逻辑? 这里我举一个简单的小例子来说明一下! 到你想输入 ...
- 优秀网站看前端 —— 小米Note介绍页面
刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的 ...
- EventAggregator, EventBus的实现
系列主题:基于消息的软件架构模型演变 .net中事件模型很优雅的实现了观察者模式,同时被大量的使用在各种框架中.如果我们非要给事件模型挑毛病,我觉得有两点: 实现起来略微繁琐 正如我们上篇文章分析,事 ...