理解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"代码
Jan 09 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 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运行时强制显示出错信息的代码
2011/04/20 PHP
浅析php工厂模式
2014/11/25 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
python常用函数详解
2016/09/13 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python 表格打印代码实例解析
2019/10/12 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
地质灾害防治方案
2014/05/14 职场文书
大学生见习报告范文
2014/11/03 职场文书
党小组考察意见
2015/06/02 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript