`
funzhang2010
  • 浏览: 14146 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

【学习笔记】JavaScript基础—对象

阅读更多
1. JavaScript对象 

  ECMA-262将对象(object)定义为"属性的无序集合,每个属性存放一个原始值、对象或函数"(unordered collection of properties each of which contains a primitive value, object, or function)。这意味着对象是无特定顺序的值的数组。在ECMAScript中,对象由特性(Attribute)构成,特性可以是原始值,也可以是引用值。如果特性存放的是函数,它将被看作对象的方法(Method),否则该特性被看作属性(Property)。
2. 对象的废除 

  ECMAScript有无用存储单元收集程序(就像C#的垃圾收集器),意味着不必专门销毁对象来释放内存。当再没有对对象的引用时,该对象就被废除了。运行无用存储单元收集程序时,所有废除的对象都会被销毁。每当函数执行完它的代码,无用存储单元收集程序都会运行,释放所有的局部变量,还有在一些其它不可预知的情况下,无用存储单元收集程序也会运行。 
  把对象的所有引用都设置为null,可以强制性的废除对象。例如: 

  Var oObject=new Object();

  // 程序逻辑

  oObject=null;

  当变量oObject设置为null后,对第一个创建的对象的引用就不存在了。这意味着下次运行无用存储单元收集程序时,该对象将被销毁。
  每用完一个对象后,就将其废除,来释放内存,这是个好习惯。这样还确保不再使用已经不能访问的对象,从而防止程序设计错误的出现。此外,旧的浏览器(如IE)没有完全的无用存储单元收集程序,所以卸载页面时,对象可能不能被正确地销毁。以前IE6就有这样的诟病,当页面被关闭后对象还是没有被释放,所以总是会导致内存溢出的错误。废除对象和它所有的特性是确保内存正确使用的最好方法。
3. 对象的类型 

  JavaScript中对象分为:本地对象(native object)、内置对象(built-in object)、宿主对象(host object)。其中本地对象和宿主对象大家一般用的比较多,比较熟。这里我就重点说明一下内置对象。 
  ECMA-262把内置对象定义为"由ECMAScript实现提供的、独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现"(any object supplied by an ECMAScript implementation, independent of the host environment, which is present at the start of the execution of an ECMAScript program.)。这意味着开发者不必明确实例化内置对象,它已经被实例化了。但ECMAScript只定义了两个内置对象:

3.1 Math对象 

  Math对象就是解决数学问题的所有公式。这个在各种编程语言中都有类似的实现,就不做介绍了。

3.2 Global对象

  园子里很多搞ASP.net的,相信大家对其中的Global.asax非常熟悉了。但这个对象在ECMAScript中却比较特殊。因为它实际上根本就不存在。如果尝试编写下面的代码去实例化它,将得到错误:
  Var _global=new Global();
  错误消息显示Global不是对象,但上文却说Global是一个内置对象,这不就自相矛盾了吗?不矛盾。这里需要理解的主要概念是,在ECMAScript中,不存在独立的函数,所有的函数都必须是某个对象的方法。ECMAScript中常用的函数例如isNaN()、isFinite()等,看起来都像独立的函数。实际上,它们都是Global对象的方法。而且Global对象的方法还不止这些。 
4. 定义类或对象

  虽然ECMAScript越来越正规化了,但创建对象的方法却被置之不理。在高级的编程语言(如C#)中,创建对象的方法被明确的定义了。所以不会有太大的分歧。但在脚本语言中创建对象的方法就是多种多样了。

4.1 工厂方式

由于对象的属性可在对象创建后动态定义,所以许多开发者都在初次引入JavaScript时编写类似下面的代码:
Var oCar=new Object();
oCar.color="red";
oCar.doors=4;
oCar.mpg=23;
oCar.showColor=function(){alert(this.color);};

  在这段代码中,创建对象car。然后给它设置几个属性:它的颜色是红色,有四个门,每加仑油23英里。最后一个属性是指向函数的指针,意味着该属性其实是个方法。执行这段代码后,就可以使用对象car了。可是要创建多个car实例就麻烦了。
  要解决此问题,开发者可以创建并返回特定类型的对象的工厂函数。例如,函数CreateCar()可用于封装前面列出的创建car对象的操作:
Function createCar()
{
  Var oTempCar=new Object();
  oTempCar.color="red";
  oTempCar.doors=4;
  oTempCar.mpg=23;
  oTempCar.showColor=function(){alert(this.color)};
  
  return oTempCar;
}

Var oCar1=createCar();
Var oCar2=createCar();
 

  这里,前面的所有代码都包含在createCar()函数中,此外还有一行额外的代码,返回Car对象作为函数值。调用此函数时,将创建新对象,并赋予它所有必要的属性,复制出一个前面说明的car对象。使用该方法,可以容易地创建car对象的两个版本,他们的属性完全一样。当然,还可以修改creatCar()函数,给它传递各个属性的默认值,而不是赋予属性默认值: 
Function createCar(sColor,iDoors,iMpg)
{
  Var oTempCar=new Object();
  oTempCar.color= sColor;
  oTempCar.doors= iDoors;
  oTempCar.mpg= iMpg;
  oTempCar.showColor=function(){alert(this.color)};
  return oTempCar;
}

Var oCar1=createCar("red",4,23);
Var oCar2=createCar("blue",2,26);
oCar1.showColor();      // 输出"red"
oCar2.showColor();      // 输出"blue"
 

  给createCar()函数加上参数,即可为要创建的car对象的color、doors和mpg属性赋值。使这两个对象具有相同的属性,却有不同的属性值。但这里有个问题:每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本。事实上,每个对象用的都是同一段代码。这样的定义方法还有一个如下的变形:
Function Car(sColor,iDoors,iMpg)

  this.color= sColor;
  this.doors= iDoors;
  this.mpg= iMpg;
  this.showColor=function(){alert(this.color)};
}

Var oCar1=new Car("red",4,23);
Var oCar2=new Car("blue",2,26);

oCar1.showColor();      // 输出"red"
oCar2.showColor();      // 输出"blue"
 
  这个方法和上一个方法有个一样的缺陷:重复的创建了showColor()函数。为了解决这个缺陷我们可以用下面的方法。

4.2 原型方式

  该方法利用了对象的Prototype属性。用空构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性:
Function Car()
{}

Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.showColor=function(){alert(this.color)};

Var oCar1=new Car();
Var oCar2=new Car();


  使用这个方法可以解决重复创建showColor()函数,但又会有新的问题,考虑下面的例子:
Function Car()
{}

Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.drivers=new Array("Mike","Sue");
Car.prototype.showColor=function(){alert(this.color)};

Var oCar1=new Car();
Var oCar2=new Car();

oCar1.drivers.push("Matt");

alert(oCar1.drivers);    // 输出"Mike,Sue,Matt"
alert(oCar2.drivers);    // 输出"Mike,Sue,Matt"
 

  这里,属性drivers是指向Array对象的指针。改变指针指向的内容,所有的实例都会改变。看来这种方法也不可取

  4.3 混合方式

  这种方式就是用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果所有的函数只创建一次,而每个对象都具有自己的对象属性实例。
Function Car(sColor,iDoors,iMpg) 

  this.color= sColor;
  this.doors= iDoors;

  this.mpg= iMpg;
  Car.drivers=new Array("Mike","Sue");
}

Car.prototype.showColor=function(){alert(this.color)};

Var oCar1=new Car("red",4,23);
Var oCar2=new Car("blue",3,25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers);    // 输出"Mike,Sue,Matt"
alert(oCar2.drivers);    // 输出"Mike,Sue"


  这种方式是ECMAScript主要采用的方式,它具有其他方式的特性,却没有它们的缺陷。在实际编程中应用的也是最多了。
  另外还有JSON创建方式。其创建的方式如下:
var Car =
{
  color: "red",
  doors: 4,
  mpg: 23,
  drivers: [{name: "Mike", age: 20, Married: false}, {name: "Sue", age: 30, Marred: true}],
  showColor: function() {alert(this.color)}
};
 
  这种创建对象的方式也比较优雅。可作为Ajax返回的文本,然后用eval()函数将其还原成一个对象。著名的脚本框架JQuery就有专门接收返回文本为JSON对象的异步方法。

分享到:
评论

相关推荐

    javascript学习笔记.docx

    f) 继承:只是在查询一个属性时自动发生,而不会在写属性时发生,就是说单写一个父类的属性时,JavaScript环境会为对象本身创建一个同名的属性,从此该属性就覆盖了父类中的属性。 12) 创建一个数组可用 new Array()...

    菜鸟的Javascript笔记.rar

    不过因为小菜鸟个人认为HTML DOM比其它的JavaScript对象更常用一些(不过这可不一定适用于你的情况),所以在学完基础的JavaScript之后就去学习HTML DOM了。 学习HTML DOM 你也想和小菜鸟一起学HTML DOM?来看看...

    javascript学习笔记2

    js基础学习笔记 --------字符串与事件对象总结

    JavaScript常用对象.md

    JavaScript学习笔记第二部分,包括对象,内置对象(Array, String, Data, 字符串和数值之间的转化,Globle对象,Windows对象,Math对象)的详解和例子,适合0基础和有一些基础的同学。

    javascript学习基础笔记之DOM对象操作

    DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些...

    java学习笔记

    java学习笔记大全:java内容介绍 java编程可以分成三个方向: 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 java se课程介绍 java面向对象编程(基础) java...

    JS学习笔记(全)

    javascript学习笔记,包括基本语法、面向对象、正则表达式、dom的所有操作

    JavaScript 学习笔记之基础中的基础

    概要:javascript的组成、 各个组成部分的作用 、 一、javascript的组成  javascript  ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.1ECMAScript  ECMAScript是通过ECMA-262标准化的脚本...

    javascript基础语法学习笔记

     javascript是一门用来增强页面动态效果,实现页面与用户之间的实时、动态交互的脚本语言(解释型编程语言)。javascript由三部分组成:ECMA、DOM和BOM  [1]ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲...

    javascript学习笔记(二)数组和对象部分

    javascript对象部分 一:基础部分 1.JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined。 2.Jscript 支持四种类型的对象:内部对象、生成的对象、宿主给出的对象(所有BOM和DOM对象都是宿主对象。)...

    Java/JavaEE 学习笔记

    Java/JavaEE 学习笔记 作者在杰普学习时的学习笔记,是J2ee初学者必备手册,是大家学习J2EE开发的很好的参考笔记。 Java/JavaEE 学习笔记 内容目录: Unix 学习笔记..........7 一、Unix前言............7 二、...

    Javascript 读书笔记索引贴

    基础篇 Javascript学习笔记1 数据类型 Javascript学习笔记2 函数 Javascript学习笔记3 作用域 Javascript学习笔记4 Eval函数 Javascript学习笔记5 类和对象 Javascript学习笔记6 prototype的提出 Javascript学习...

    JavaScript编程 基础知识

    1.JavaScript代码应置于<script></script>标签内 2.JavaScript文件的引入 3.JavaScript代码作为Html标签的属性值 4.Javascript代码作为事件属性值 ...11.JavaScript对象 12.常用内部对象 13.对象专用语句 14.数组

    JavaScript学习笔记之DOM基础 2.4

    DOM(Document Object Model),即“文档对象模型”...基于语义的逻辑结构,DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型,下面小编把最近整理有关javascript笔记之DOM基础分享给大家,有需要的朋友可以参考下

    JavaScript高级程序设计学习笔记(一)

    最近为了补js的基础,开坑javascript高程,这书基础部分写得很详细很好读,搭配着MDN进行学习理解。 闲下来的时间记录一下边读边做的笔记,大多是以前编程的时候没注意过的基础知识点。 第一章 JavaScript的完整实现...

    J2EE学习笔记(J2ee初学者必备手册)

    HTML&JavaScript学习笔记.....................198 HTML: 超文本标记语言.......................198 1、html简介...........198 2、动态网页开发技术......................199 3、html的基本构成....................

    javascript学习笔记_浅谈基础语法,类型,变量

    基础语法、类型、变量 非数字值的判断方法:(因为Infinity和NaN他们...javascript构造一个(String、Number、Boolean)的临时对象(称为包装对象),然后通过这个临时对象来调用它的属性和方法,这些属性、方法改变的

    韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全)-共448页.docx

    java面向对象编程(基础) java图开界面开发 java数据库编程 java文件io流编程 java网络编程 java多线程编程 java ee基础1 java面向对象编程--数据库编程-->java se java 基础2 html--css--javascript-->div+css ...

    JavaScript学习笔记整理之引用类型

    它描述的是一类对象所具有的属性和方法。Object是一个基础类型,Array是数组类型,Date是日期类型,RegExp是正则表达式类型,等。 拥抱JavaScript 曾经名不经传的JavaScript随着AJAX的流行而身价倍增,现在...

Global site tag (gtag.js) - Google Analytics