理解Javascript_10_对象模型_javascript技巧

对象模型

红色虚线表示隐式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的关系!

最后写一点感言:令人发狂的理论!

时间: 2024-08-03 11:46:18

理解Javascript_10_对象模型_javascript技巧的相关文章

理解javascript正则表达式_javascript技巧

了解RegExp类型: ECMAScript通过RegExp类型来支持正则表达式. var expression=/pattern/flags;  正则表达式的模式(pattern)部分: 可以是任何简单或复杂的正则表达式,可以包含字符类,限定符,分组,向前查找,反向引用. 关于正则表达式中各种特殊字符(如 \,^,$,\w,\b 等)的含义可以参考 MDN 正则表达式-特殊字符 的整理.这里我们简单介绍一下向前查找和反向引用. 向前查找:正则表达式向前使用一些字符而不移动这些字符的位置,分为正

浅析JS中对函数function的理解(基础篇)_javascript技巧

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

javascript深入理解js闭包_javascript技巧

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

一分钟理解js闭包_javascript技巧

什么是闭包?先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); //控制台输出1,再输出2 简单吧.再来看一段代码: function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var c = new a(); c.inc(); //控制台输出1 c.inc(); //控

理解Javascript闭包_javascript技巧

闭包是ECMAScript一个很重要的特征,但是却很难用合适的定义来描述它.虽然闭包很难清晰地描述,但是,却很容易创建,或者说,不小心创建.然而,闭包的存在其实是有一定的潜在问题的.为了避免"不小心"地创建闭包,以及更好地利用闭包的优点,有必要理解闭包的机制. 闭包的定义 关于闭包,有太多的定义,特别是有一些定义非常抽象,象这个: A "closure" is an expression (typically a function) that can have fr

JavaScript回调(callback)函数概念自我理解及示例_javascript技巧

此文适合JavaScript入门级选手阅读,高手就可以飘过了. 先扯点闲话.在中国,有这么一种现象:不管什么词或者概念,总会有些人把这些东西解释的神乎其神,貌似搞得别人听不懂就觉得自己很厉害的样子.其实不知道有多2.我个人比较崇尚简洁明了.什么词,什么概念,如果你能用简短的一两句话让大家听明白,这才是本事.好了,闲话不扯了,进入正题. 在JavaScript里什么叫Callback"回调函数",用我的话来讲就是把方法b当做一个参数传递个方法a,当方法a执行完后执行另外一个指定函数(这里

javascript闭包的理解和实例_javascript技巧

顺便提示一下: 词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域. with和eval除外,所以只能说JS的作用域机制非常接近词法作用域(Lexical scope). 下面是一个简单的使用全局变量的闭包实例: 复制代码 代码如下: var sWord="Hello,Welcome to web前端开发工程师的博客,请多多指教." function disWord(){ alert(sWord);

对象题目的一个坑 理解Javascript对象_javascript技巧

这一篇的例子,主要是来引起对Javascript对象的理解及注意的.其实是一种面试时的一个坑,实际项目中也是很少用得到,但是为了提高警惕性,我们来看这个例子: 代码名称 var first = {}; var second = {k:"second"}; var third = {k:"third"}; first[second] = 100; first[third] = 200; console.log(first[second])//这里会输出什么内容呢? 如

理解javascript封装_javascript技巧

封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出发.我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性,来达到封装的要求. 基本方式 一般来说,我们学用的有三种方法来达到封装的目的. 使用this.XXX来声明一个变量,然后再声明getXXX.setXXX等取值.赋值的方法. 使用this._XXX来声明一个变量,然后再声明getXXX