理解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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js propertychange和oninput事件
Sep 28 Javascript
jquery队列函数用法实例
Dec 16 Javascript
简单的js计算器实现
Oct 26 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
对vuex中getters计算过滤操作详解
Nov 06 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
理解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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python实现统计单词出现的个数
2015/05/28 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Flask处理Web表单的实现方法
2021/01/31 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
优秀学生获奖感言
2014/02/15 职场文书
建筑工地大门标语
2014/06/18 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
个人整改方案范文
2014/10/25 职场文书
技术负责人岗位职责
2015/02/10 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
公司表扬信格式
2015/05/04 职场文书
项目投资意向书范本
2015/05/09 职场文书
小马王观后感
2015/06/11 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
500字作文之周记
2019/12/13 职场文书