理解Javascript_09_Function与Object


Posted in Javascript onOctober 16, 2010

注:理论过于深入,本人不改保证所有的理论都是正确的,但经过多方测试还未发现实际代码与理论冲突的问题。如有错误,望高人指点!

Function

首先回顾一下函数对象的概念,函数就是对象,代表函数的对象就是函数对象。所有的函数对象是被Function这个函数对象构造出来的。也就是说,Function是最顶层的构造器。它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已。这也表明Function具有自举性(自已构造自己的能力)。这也间接决定了Function的[[call]]和[[constructor]]逻辑相同。

function Foo() {}; 
var foo = new Foo(); 
//Foo为foo的构造函数 
alert(foo instanceof Foo); // true 
//但是Function并不是foo的构造函数 
alert(foo instanceof Function); // false 
//Function为Foo的构造函数 
alert(Foo instanceof Function);//true

上面的代码解释了foo和其构造函数Foo和Foo的构造函数Function的关系。(具体原理请参见Function与Object的内存关系图)
Object 

对于Object它是最顶层的对象,所有的对象都将继承Object的原型,但是你也要明确的知道Object也是一个函数对象,所以说Object是被Function构造出来的。(关于Object并没有太多的理论)

Function与Object
这是本文的重点,非常重要!

alert(Function instanceof Function);//true 
alert(Function instanceof Object);//true 
alert(Object instanceof Function);//true 
function Foo() {}; 
var foo = new Foo(); 
alert(foo instanceof Foo); // true 
alert(foo instanceof Function); // false 
alert(foo instanceof Object); // true 
alert(Foo instanceof Function); // true 
alert(Foo instanceof Object); // true

你能理解这些答案吗?那恭喜你,Javascript语言的本质你已经理解了。
那么让我们来看一下Object与Function实际的关系吧:
理解Javascript_09_Function与Object
在你看图之前,请先阅读函数对象与instanceof原理两篇文章,要不然内存图很难理解。

在这,我对内存图做一点说明:在函数对象一文中提到了函数对象的构造过程,在本文中提到Function为自举性的,所以说函数对象Foo的构造过程和函数对象Function的构造过程是一样的。所以在图中给于高亮显示,我用'|'来分隔来表示它们的构造过程相同。根据instanceof的理论,和内存图,可以将上面的语句都推导出正确的结果。在此我们不一一讲述了,读者自已体会吧。

如果你不能理解这张复杂的内存图的话,可以看下面的说明图来帮助理解:
理解Javascript_09_Function与Object
注:代码的实际执行流程并不完全像这张图上描述的那样,也就是说这张图是有问题的(可以说是错误的),它无法解释为什么Function instanceof Function 为true。 但是它易于理解Function与Object的关系。

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
理解Javascript_08_函数对象
Oct 15 #Javascript
javascript instanceof 内部机制探析
Oct 15 #Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 #Javascript
JavaScript 对象模型 执行模型
Oct 15 #Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 #Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 #Javascript
JavaScript访问样式表代码
Oct 15 #Javascript
You might like
织梦模板标记简介
2007/03/11 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python模拟事件触发机制详解
2018/01/19 Python
对python中的logger模块全面讲解
2018/04/28 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
公司请假条范文
2014/04/11 职场文书
个人欠款担保书
2014/05/20 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
信访维稳承诺书
2015/05/04 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL