理解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 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
js生成随机数方法和实例
Jan 17 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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 header函数分析详解
2011/08/06 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python文件的md5加密方法
2016/04/06 Python
python正则实现计算器功能
2017/12/14 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js