理解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实现的Select级联
Jan 27 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
javascript数组的定义及操作实例
Nov 10 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
url decode problem 解决方法
2011/12/26 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
简洁的十分钟Python入门教程
2015/04/03 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
汉语专业毕业生自荐信
2014/07/06 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
单位实习介绍信
2015/05/05 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android