理解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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
input 高级限制级用法
Mar 26 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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
德劲1103的维修打理经验
2021/03/02 无线电
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
浅析Python多线程下的变量问题
2015/04/28 Python
python 自动去除空行的实例
2018/07/24 Python
python使用selenium实现批量文件下载
2019/03/11 Python
django最快程序开发流程详解
2019/07/19 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python同步两个文件夹下的内容
2019/08/29 Python
python可视化text()函数使用详解
2020/02/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
物流仓储计划书
2014/01/10 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
计算机系本科生求职信
2014/05/31 职场文书
家长学校培训材料
2014/08/20 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
单位接收函格式
2015/01/30 职场文书
2016年教师新年寄语
2015/08/18 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android