理解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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
js实现删除json中指定的元素
Sep 22 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
Zerg兵种介绍
2020/03/14 星际争霸
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
获取body标签的两种方法
2011/10/13 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python验证码识别的方法
2015/07/10 Python
python字符串连接方法分析
2016/04/12 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python文件写入write()的操作
2019/05/14 Python
程序员岗位职责
2013/11/11 职场文书
清洁员岗位职责
2015/02/15 职场文书
通知的格式范文
2015/04/27 职场文书
在职证明格式样本
2015/06/15 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书