理解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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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
德生1994机评
2021/03/02 无线电
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
JS实现图片切换效果
2018/11/17 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue中activated的用法
2021/01/03 Vue.js
python类参数self使用示例
2014/02/17 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python与C互相调用的方法详解
2017/07/14 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
信息技术培训感言
2014/03/06 职场文书
小学生读书笔记范文
2015/06/30 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016国培学习心得体会
2016/01/08 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python