理解Javascript_10_对象模型
人气:0
对象模型
红色虚线表示隐式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的关系！
最后写一点感言：令人发狂的理论！
加载全部内容