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调试器截图如下。

 

我靠,这是什么鬼!!

我只想说,应该是浏览器(我的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截图如下

 

哈哈,从上面的截图可以看出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。

代码和截图如下:

 

看来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咯。

验证代码和截图如下:

 

验证完毕: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,代码和截图如下:

 

嘻嘻,对的吧。

再次改造上图,得下效果图:

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

时间: 2024-10-26 19:39:16

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

javascript之一切皆为对象2

其实呢,"函数function"和"对象object"之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中"Javascript之一切皆为对象1"也清楚的阐述了. 但这个对象又是通过函数来创建的,咳咳,似乎在平时代码中也是哈. 请看下面代码 function Fn(){ } var fn =new Fn(); 你可能会说,哥们,不对吧,不是我们也曾写过如下代码吗!! var obj = {}; 哈,是的哈

Javascript之一切皆为对象1

在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScript的世界里,怎么区分“值类型”和“引用类型”呢? 哟呼,答案:typeof. 让我们一起写个demo,猜猜看typeofShow()会输出哪些结果. <!DOCTYPE html> <head> <title>javascript</title> <met

JavaScript“并非”一切皆对象

网上非常多都在说”JavaScript一切皆对象“,那么这个"一切"到底是实实在在的"一切",还是一个虚数?也有看过网上的文章,有的三纸无驴,就是抄抄概念,有的也只是解释了一部分,并没有给出确切的结论.那么我想结合自己的理解,给出一个确切的结论. 当然,结论嘛,自然要放在文章结尾.小伙伴们接着往下看. 数据类型概要 进入之前,有必要概要地说一下js的数据类型,当然小伙伴们也可以直接pass. js的数据类型有两种:原始类型和对象类型.其中原始类型又包括以下几种类型:

【JavaScript】【学习】对象的创建和继承

下午刚刚看完了<JavaScript高级程序设计>中的第六章,面向对象的程序设计,因为自己以前没有面向对象程序设计的基础,所以理解得有些困难,但是通过自己的努力研读+上网查资料+反复实践,总算是答题上理解了,对我的编程思维算是一个很大的提高吧,这里把学习笔记和心得发一下,方便以后自己查阅. 一.理解对象 在JavaScript中,一切皆是对象,前面学习引用类型,基本都是JavaScript中的内置对象,而基本类型,则都是这些内置对象的实例,BOM,DOM也是对象,全局变量可以视为window的

javascript 核心语言笔记 6 - 对象

对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(hashtable).「字典」(dictionary).「关联数组」(associative array).JavaScript 还可以从一个称为 原型 的对象继承属性 JavaScript 对象是动态的 -- 可以新增属性也可以删除属性,除了字符串.数字.布尔值.null 和 undefined 之

在JavaScript中生成自定义的对象

使用对象便于组织信息.下面我们介绍如何在JavaScript中生成自定义的对象. ---------------------- JavaScript 对象 在前面几章中我们学到JavaScript中有些内置的对象,比如String, Date, Array等等.除此之外,你还可以定义自己的对象. 对象是一种特殊的数据,含有属性和函数. 下面让我们用一个例子来说明:比如一个人是一个对象.属性是与对象有联系的值,比如人的属性包括姓名,身高,体重,年龄,肤色,眼睛的颜色等等.所有人都有这些属性,但是每

Javascript学习--------认识window窗口对象

window对象: Window 对象表示浏览器中打开的窗口. 可以通过window对象设置窗口的大小,位置等. 还可以控制是否加载网页等. window对象集合: 集合 描述 frames[] 返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.length 存放数组 frames[] 中含有的元素个数.注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数

MDN——javascript——入门——第三章对象——json——知识点总结

1. JSON:javascript object notation(js 对象表示法) 将结构化数据表示为JavaScript对象的标准格式, 通常用于在网站上表示和传输数据 (从服务器向客户端发送一些数据,因此可以将其显示在网页上) Douglas Crockford(提出推广了json)     虽然它是基于JavaScript语法,它可以独立于JavaScript的使用,许多编程环境有 读取(解析),并生成JSON的能力.(例如php)   JSON对象可以存储在它自己的文件,根本上只是

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应