理解Javascript_10_对象模型
更新时间：2010年10月16日 00:06:20 作者：
什么都不想说，一段代码两张图，解释一切。注：在此之前请阅读前面的系列博文
对象模型
红色虚线表示隐式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_09_Function与Object》中的内存分析图是一样的，为什么呢？在《数据模型》中提到过，内置对象都可以看作是函数的派生类型，例如Number instanceof Function为true，Number instanceof Object为true。在这个意义上，可以将它们跟用户定义的函数等同看待。所以内置对象和自定义对象的创建流程是一样的。
在篇博文是在理解了《Function与Object》的基础上写的，因此要理解本文必须理解Function与Object的关系！
最后写一点感言：令人发狂的理论！
红色虚线表示隐式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_09_Function与Object》中的内存分析图是一样的，为什么呢？在《数据模型》中提到过，内置对象都可以看作是函数的派生类型，例如Number instanceof Function为true，Number instanceof Object为true。在这个意义上，可以将它们跟用户定义的函数等同看待。所以内置对象和自定义对象的创建流程是一样的。
在篇博文是在理解了《Function与Object》的基础上写的，因此要理解本文必须理解Function与Object的关系！
最后写一点感言：令人发狂的理论！
相关文章
在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如事件绑定、事件监听、事件委托（事件代理）等,这篇文章主要给大家介绍了关于JS绑定事件的3种方法,需要的朋友可以参考下2023-11-11
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Knockoutjs 的Components 是一种自定义的组件，它以一种强大、简介的方式将你自己的ui代码组织成一种单独的、可重用的模块。接下来通过本文给大家介绍knockoutjs动态加载外部的file作为component中的template数据源的实现方法，一起看看吧2016-09-09
这篇文章主要为大家详细介绍了Javascript的原型和原型链，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
Javascript (ECMA Script)是一种弱类型的语言.这并不意味着它没有数据类型,只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值.Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用.2009-06-06
这篇文章主要介绍了微信小程序实现用户登录模块服务器搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要给大家介绍了关于如何利用d3.js制作连线动画图与编辑器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
在平时前端开发中,我们不难发现经常会用到字符串操作,这篇文章主要给大家介绍了关于vue(javaScript)操作字符串的一些常用方法的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了CocosCreator通用框架设计之资源管理，对性能优化感兴趣的同学，一定要看一下2021-04-04
弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示，为了解决此问题，本文测试了一下案例在此与大家分享，有类似需求的朋友可以学习下2013-08-08
这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子，有需要的朋友可以参考一下2013-07-07
最新评论