JavaScript 面向对象编程（1）基础

更新时间：2010年05月18日 01:13:43 作者：

自从有了Ajax这个概念，JavaScript作为Ajax的利器，其作用一路飙升。JavaScript最基本的使用，以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。

1. 用JavaScript实现类
JavaScritpt没有专门的机制实现类，这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量，又可以包含其它函数，这样，变量可以作为属性，内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下：

复制代码代码如下:

 
function myClass() 
{ 
//此处相当于构造函数 
} 

这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分，以后会详细描述。
2. 如何获得一个类的实例
实现了类就应该可以获得类的实例，JavaScript提供了一个方法可以获得对象实例。即 new操作符。其实JavaScript中，类和函数是同一个概念，当用new操作一个函数时就返回一个对象。如下：
var obj1 = new myClass();
3. 对象的成员的引用
在JavaScript中引用一个类的属性或方法的方法有以下三种。
1> 点号操作符
这是一种最普遍的引用方式，就不累赘。即如下形式：
对象名.属性名;
对象名.方法名;
2> 方括号引用
JavaScript中允许用方括号引用对象的成员。如下：
对象名["属性名"];
对象名["方法名"];
这里方括号内是代表属性或方法名的字符串，不一定是字符串常量。也可以使用变量。这样就可以使用变量传递属性或方法名。为编程带来了方便。在某些情况下，代码中不能确定要调用那个属性或方法时，就可以采用这种方式。否则，如果使用点号操作符，还需要使用条件判断来调用属性或方法。
另外，使用方括号引用的属性和方法名还可以以数字开头，或者出现空格，而使用点号引用的属性和方法名则遵循标示符的规则。但一般不提倡使用非标示符的命名方法。
3> 使用eval函数
如果不希望使用变量传递变量或方法名，又不想使用条件判断，那么eval函数是一个好的选择。eval接收一个字符串类型的参数，然后将这个字符串作为代码在上下文中执行，返回执行的结果。这里正是利用了eval的这一功能。如下：
alert(eval("对象名." + element.value));
4. 对对象属性，方法的添加、修改和删除操作
JavaScript中，在生成对象之后还可以为对象动态添加、修改和删除属性和方法，这与其它面向对象的语言是不同的。
1> 添加属性和方法
先创建一个对象，空对象创建后没有任何属性和方法，然而我们可以在代码中创建。

复制代码代码如下:

 
var obj1 = new Object(); 
//添加属性 
obj1.ID = 1; 
obj1.Name = "johnson"; 
//添加方法 
obj1.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 

2> 修改属性与方法
与添加属性和方法类似，例如接着上面的例子：

复制代码代码如下:

 
// 修改属性 
obj1.ID = 2; 
obj1.Name = "Amanda"; 
// 修改方法 
obj1.showMessage = function() 
{ 
alert("ID: " + this.ID"); 
} 

3> 删除属性与方法
直接将要删除的属性或方法赋值为undefined即可：

复制代码代码如下:

 
obj1.ID = 1; 
obj1.Name = undefined; 
obj1.showMessage = undefined; 

5. 创建无类型对象。
类似于C#3.0里的Anonymous Types，JavaScript 也可以创建无类型的对象。形式如下：

复制代码代码如下:

 
var obj1 = {}; 
var obj2 = 
{ 
ID: 1, 
Name: "Johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + "Name: " + this.Name); 
} 
} 

这里定义了两个无类型的对象，obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
用这种方式创建属性方法时，也可以用字符串定义属性方法的名字。如：

复制代码代码如下:

 
var obj2 = 
{ 
"ID" : 1, 
"Name": "Johnson" 
} 

6. prototype
每个函数对象都具有一个子对象prototype，因为函数也可以表示类，所以prototype表示一个类的成员的集合。当new 一个对象时，prototype对象的成员都会被实例化成对象的成员。先看一个例子：

复制代码代码如下:

 
function myClass() 
{ } 
myClass.prototype.ID = 1; 
myClass.prototype.Name = "johnson"; 
myClass.prototype.showMessage = function() 
{ 
alert("ID: " + this.ID + "Name: " + this.Name); 
} 
var obj1 = new myClass(); 
obj1.showMessage(); 

使用prototype对象创建类有一个好处。如果将所有的成员直接写在类的声明中，如下：

复制代码代码如下:

 
function myClass() 
{ 
//添加属性 
this.ID = 1; 
this.Name = "johnson"; 
//添加方法 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass(); 

在上面的代码中，定义了一个类myClass，在类中直接定义了两个属性和一个方法。然后实例化了两个对象，这里的两个属性和一个方法，每创建一次myClass对象都会被创建一次，浪费了内存空间。而用prototype以后就可以解决这个问题，每new一个函数时，其prototype对象的成员都会自动赋给这个对象，当new多个对象时不会重复创建。
由于prototype的初始化发生在函数体执行之前，用以下代码可以证明：

复制代码代码如下:

 
function myClass() 
{ 
//此处相当于构造函数 
this.ID = 1; 
this.Name1 = this.Name; 
this.showMessage(); 
} 
myClass.prototype.Name = "johnson"; 
myClass.prototype.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
var obj1 = new myClass(); 

执行以上代码可以发现当new这个类型的对象时，即弹出了对话框。
最后只得一提的是，prototype有一个方法，在面向对象的设计中用得到。即：constructor属性，是对构造函数的调用，这里的构造函数即上文提到的类的声明里的代码。如：

复制代码代码如下:

 
function myClass() 
{ 
//此处相当于构造函数 
alert("this is in constructor"); 
} 
myClass.prototype.constructor(); 
var obj1 = new myClass(); 

执行以上代码你会发现对话框弹出了两次。由此可见，prototype可专门用于设计类的成员，实际上在JavaScript面向对象的设计中，很多时候都会用到prototype。

javascript 面向对象编程聊聊对象的事
javascript是基于对象的编程语言。从window到document，从方法到类，从object到Array都是对象。
2009-09-09
Javascript 面向对象（二）封装代码
Javascript 面向对象（二）封装代码，需要的朋友可以参考下
2012-05-05
JObj预览一个JS的框架
我说过，我要写一个JS的框架，我知道有人会从心底BS我，但是：你继续BS吧！我还是要写我的JOBJ。
2008-03-03
javascript实现面向对象类的功能书写技巧
经过前段时间，学习《ajax完全自学手册》后，才知道javascript原来还可以这么写。
2010-03-03
js 简单类代码
js类的封装方法，说实话我也是新手，一直没涉及到js的类，下面的代码，应该看的懂，不懂就先用脑子记下了，见得多了就会了
2008-05-05
javascript Base类包含基本的方法
一个Base类，包含基本的方法，大家可以在这个基础上拓展下功能。
2009-07-07
JavaScript面向对象之Prototypes和继承
本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述，是理解JS OO 的佳作之一
2012-07-07
javascript 混合的构造函数和原型方式，动态原型方式
JS编程中最常用两种对象类定义的方式。不管是利用下面2种方式的那一种，都可以达到相同的效果！
2009-12-12
Javascript 面向对象重载
在面向对象语言里重载是很重要的一个特性，而JavaScript这个自称面向对象的语言竟然没有直接提供重载的功能。
2010-05-05
JavaScript 类的定义和引用 JavaScript高级培训自定义对象
在Java语言中，我们可以定义自己的类，并根据这些类创建对象来使用，在Javascript中，我们也可以定义自己的类，例如定义User类、Hashtable类等等。
2010-04-04