理解Javascript_10_对象模型


Posted in Javascript onOctober 16, 2010

对象模型
理解Javascript_10_对象模型
红色虚线表示隐式Prototype链。
这张对象模型图中包含了太多东西,不少地方需要仔细体会,可以写些测试代码进行验证。彻底理解了这张图,对JavaScript语言的了解也就差不多了。下面是一些补充说明:
1. 图中有好几个地方提到build-in Function constructor,这是同一个对象,可以测试验证:

//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4 
Function==Function.constructor //result: true 
Function==Function.prototype.constructor //result: true 
Function==Object.constructor //result: true 
//Function also equals to Number.constructor, String.constructor, Array.constructor, RegExp.constructor, etc. 
function fn(){} 
Function==fn.constructor //result: true

这说明了几个问题: Function指向系统内置的函数构造器(build-in Function constructor);Function具有自举性;系统中所有函数都是由Function构造。

2. 左下角的obj1, obj2...objn范指用类似这样的代码创建的对象: function fn1(){}; var obj1=new fn1();这些对象没有本地constructor方法,但它们将从Prototype链上得到一个继承的constructor方法,即fn.prototype.constructor,从函数对象的构造过程可以知道,它就是fn本身了。

3.右下角的obj1, obj2...objn范指用类似这样的代码创建的对象: var obj1=new Object();或var obj1={};或var obj1=new Number(123);或obj1=/\w+/;等等。所以这些对象Prototype链的指向、从Prototype链继承而来的 constructor的值(指它们的constructor是build-in Number constructor还是build-in Object constructor等)等依赖于具体的对象类型。另外注意的是,var obj=new Object(123);这样创建的对象,它的类型仍然是Number,即同样需要根据参数值的类型来确定。同样它们也没有本地constructor,而是从Prototype链上获得继承的constructor方法,即build-in *** constructor,具体是哪一个由数据类型确定。
示例代码

//自定义对象代表,对应Javascript Object Model中的use defined functions 
function Foo(){} 
//自定义对象创建的对象实例的代表,对应Javascript Object Model中的objects that created by user defined functions 
var foo = new Foo(); 
//String内置函数代表 
//str为内置函数创建的对象实例的代表,对应Javascript Object Model中的objects that created by build-in constructors 
var str = new String("string");

内存展现
理解Javascript_10_对象模型
你会发现,它和《理解Javascript_09_Function与Object》中的内存分析图是一样的,为什么呢?在《数据模型》中提到过,内置对象都可以看作是函数的派生类型,例如Number instanceof Function为true,Number instanceof Object为true。在这个意义上,可以将它们跟用户定义的函数等同看待。所以内置对象和自定义对象的创建流程是一样的。

在篇博文是在理解了《Function与Object》的基础上写的,因此要理解本文必须理解Function与Object的关系!

最后写一点感言:令人发狂的理论!

Javascript 相关文章推荐
Javascript blur与click冲突解决办法
Jan 09 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
理解Javascript_09_Function与Object
Oct 16 #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
You might like
php Try Catch异常测试
2009/03/01 PHP
php表单提交问题的解决方法
2011/04/12 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python如何在循环引用中管理内存
2018/03/20 Python
Python之文字转图片方法
2018/05/10 Python
python简单贪吃蛇开发
2019/01/28 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
单位作风建设剖析材料
2014/10/11 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
评职称个人总结
2015/03/05 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
nginx常用配置conf的示例代码详解
2022/03/21 Servers
HDFS免重启挂载新磁盘
2022/04/06 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技