理解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中的public和private对象,即static修饰符
Jan 18 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
理解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
菜鸟修复电子管记
2021/03/02 无线电
php+mysql实现无限分类实例详解
2015/01/15 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
为数据添加append,remove功能
2006/10/03 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
对python sklearn one-hot编码详解
2018/07/10 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python实现维吉尼亚算法
2019/03/20 Python
python实现高斯投影正反算方式
2020/01/17 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
控制工程专业个人求职信
2013/09/25 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
场地使用证明模板
2014/10/25 职场文书
2015大一新生军训感言
2015/08/01 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers