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里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...
随机推荐
- c和oc小知识
1.const const 修饰了*p1 / *p2 const int * p1=&age; int const * p2=&age;//和上面的意义一样 ,换句话说就是 在 “ * ...
- java分享第十五天(log4j 格式详解)
log4j 格式详解 log4j.rootLogger=日志级别,appender1, appender2, -. 日志级别:ALL<DEBUG<INFO<WARN<ERRO ...
- 通读AFN①--从创建manager到数据解析完毕
流程梳理 今天开始会写几篇关于AFN源码解读的一些Blog,首先要梳理一下AFN的整体结构(主要是讨论2.x版本的Session访问模块): 我们先看看我们最常用的一段代码: AFHTTPSessio ...
- CentOS 6.5 安全加固及性能优化 (转)
通过修改CentOS 6.5 的系统默认设置,对系统进行安全加固,进行系统的性能优化. 环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5- ...
- EditPlus快捷键
Editplus 选中一行: ctrl+rEditplus 复制一行: ctrl+r选择行,然后ctrl+c复制.复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行Ed ...
- 【安装mysql】windows安装压缩版mysql5.7.15
160915.1459 综述 中午安装成功,但是启动失败,很可能是压缩包有问题(从别人拷的),解决了近一个小时,没搞定,于是换条方案,重新去官网下载压缩包,这次看准了windows架构,且64-b ...
- 推荐学习使用cocoapods和phoneGap安装的链接
phoneGap安装:http://blog.csdn.net/cwb1128/article/details/18019751 cocoaPods使用:http://blog.csdn.net/wz ...
- JS简介,如何快熟JS。打下结实基础。
JS决定网页的行为,有行为就有逻辑,而计算机只是人工智能,你给它什么样的指令,它就会按照你的指令去运行. 有人会问,既然是给出指令,那还需要什么逻辑? 这里我举一个简单的小例子来说明一下! 到你想输入 ...
- IT人生知识分享:博弈论的理性思维
背景: 昨天看了<最强大脑>,由于节目比较有争议性,不知为什么,作为一名感性的人,就想试一下如果自己理性分析会是怎样的呢? 过程是这样的: 中国队(3人)VS英国队(4人). 1:李建东( ...
- Hadoop学习笔记—4.初识MapReduce
一.神马是高大上的MapReduce MapReduce是Google的一项重要技术,它首先是一个编程模型,用以进行大数据量的计算.对于大数据量的计算,通常采用的处理手法就是并行计算.但对许多开发者来 ...