Javascript 面向对象（声明篇）

更新时间：2010年04月30日 14:58:21 作者：

有时间重新审视了遍 Javascript 的面向对象机制。与其他的语言不同，Javascript 可以说提供了更灵活的面向对象机制（比如 function 在完成其自身功能的同时也是对象）。

由于才疏学浅，我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来，这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要，而且内容非常的繁多，在这里就分篇章逐个介绍。

使用对象首先就是声明它（内置的对象当然就不需要了）。该死的 Javascript 总是会让我们死去很多的脑细胞，这篇文章主要说明下声明 Javascript 类的几种方法。

工厂模式
工厂模式可能是很多开发人员使用的一种模式，简单的说这种方法先定义“地基”，然后在往上面扔（绑定）各种功能和属性。下面的代码可能看起来会非常的熟悉：

复制代码代码如下:

 
var oCar = new Object; 
oCar.color = "red"; 
oCar.showColor = function() { 
alert(this.color); 
} 
oCar.showColor(); 

当然，既然包装成一个类，就要重用它（上面的方法从语法上说仅仅是变量）。可以使用返回特定对象的工厂函数（factory function）将其封装起来：

复制代码代码如下:

 
function createCar() { 
var oCar = new Object; 
oCar.color = "red"; 
oCar.showColor = function() { 
alert(this.color); 
} 

return oCar; 
} 
oCar = createCar(); 
oCar.showColor(); 

当然，变通一下，可以在 createCar 函数上加入些参数，这样看起来已经非常地专业了：

复制代码代码如下:

 
function createCar(sColor) { 
var oCar = new Object; 
oCar.color = sColor; 
oCar.showColor = function() { 
alert(this.color); 
} 

return oCar; 
} 
oCar = createCar(); 
oCar.showColor(); 

匿名函数总是让人感觉非常的高深，但是有时候也会迷惑了自己。如果不考虑篇幅，可以外部定义它：

复制代码代码如下:

 
function showColor() { 
alert(this.color); 
} 

function createCar(sColor) { 
var oCar = new Object; 
oCar.color = sColor; 
oCar.showColor = showColor; 

return oCar; 
} 
oCar = createCar(); 
oCar.showColor(); 

这样做还有一个好处，就是不用重复定义 oCar.showColor 了（高效率的程序每个人都喜欢）。

构造函数模式
构造函数其实和工厂方式差不多。从代码量上来说，就是省略了构造函数内部没有创建一个对象。

复制代码代码如下:

 
function Car(sColor) { 
this.color = sColor; 
this.showColor = function () { 
alert(this.color); 
} 
} 
oCar = new Car("red"); 
oCar.showColor(); 

其实此隐含的对象已经在 new 以后就被实例化了。默认情况下，构造函数返回的就是其 this 的值（所以不必使用 return 返回）。但构造函数模式和工厂模式一样可能会重复定义方法，这点可以参考上述工厂模式的做法避免它（始终看起来不完美）。

原型模式
已经受够重复定义的问题了，那么有没有完美的解决办法呢？当然有。使用原型方法可以有效的避免此类的问题。

复制代码代码如下:

 
function Car() {} 
Car.prototype.color = new Array("red", "green", "blue"); 
Car.prototype.showColor = function() { 
alert(this.color); 
} 
oCar = new Car(); 
oCar.showColor(); 

但是使用此模式需要注意的是类中的所有属性和方法都是共用的（其实就是指针）。这意味着虽然被实例化的两个变量，如果其中一处的值被更改，那么另外一个就也会被更改。

注：此段内容有更改，详细请参见这里和这里（感谢 fish 兄弟提出）。

混合模式
看起来越来越完美了，结合上述学到的方法就很容易解决原型模式的问题，这样看起来就更像是专业的程序员了。

复制代码代码如下:

 
function Car(sColor) { 
this.color = sColor; 
} 
Car.prototype.showColor = function() { 
alert(this.color); 
} 
oCar = new Car("red"); 
oCar.showColor(); 

上述的方法声明的类， showColor 方法是原型（仅创建了一个实例），其他的都是构造（互不干扰）。

动态原型模式
把自己的方法仍在外面总不是件非常环保的事情，下面的方法就非常的“绿色”：

复制代码代码如下:

 
function Car() { 
this.color = "red"; 
if (typeof Car._initialized == "undefined") { 
Car.prototype.showColor = function() { 
alert(this.color); 
}; 
Car._initialized = true; 
} 
} 
oCar = new Car("red"); 
oCar.showColor(); 

此方法于上述的混合模式效果一致，即在构造函数内定义属性，而方法则使用原型模式。唯一的区别就是赋予对象方法的位置。

混合工厂模式
混合工厂模式可以认为是构造模式与混合模式的整合，因为 function 本身就是一个对象，所以可以使用 new 来实例化（请允许我这样描述）。

复制代码代码如下:

 
function Car() { 
var oCar = new Object; 
oCar.color = "red"; 
oCar.showColor = function() { 
alert(this.color); 
} 

return oCar; 
} 
oCar = new Car(); 
oCar.showColor(); 

不过建议避免使用此方法定义，因为于上述的工厂模式一样，它存在重复声明的问题。

选用何种模式？
其实通过上面的描述已经有所结果，通常使用的是混合模式与动态原型模式（我个人投动态原型模式一票）。不过不要单独使用工厂模式与构造模式（或者其两者的结合体），因为这样会造成不必要的浪费。

测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>声明一个 Javascript 小类玩玩</title> <script type="text/javascript"> // <![CDATA[ /* var oCar = new Object; oCar.color = "red"; oCar.showColor = function() { alert(this.color); } oCar.showColor(); */ /* function createCar() { var oCar = new Object; oCar.color = "red"; oCar.showColor = function() { alert(this.color); } return oCar; } oCar = createCar(); oCar.showColor(); */ /* function Car(sColor) { this.color = sColor; this.showColor = function () { alert(this.color); } } oCar = new Car("red"); oCar.showColor(); */ /* function Car() {} Car.prototype.color = "red"; Car.prototype.showColor = function() { alert(this.color); } oCar = new Car("red"); oCar.showColor(); */ /* function Car(sColor) { this.color = sColor; } Car.prototype.showColor = function() { alert(this.color); } oCar = new Car("red"); oCar.showColor(); */ /* function Car() { this.color = "red"; if (typeof Car._initialized == "undefined") { Car.prototype.showColor = function() { alert(this.color); }; Car._initialized = true; } } oCar = new Car("red"); oCar.showColor(); */ /* function Car() { var oCar = new Object; oCar.color = "red"; oCar.showColor = function() { alert(this.color); } return oCar; } oCar = new Car(); oCar.showColor(); */ // ]]> </script> </head> <body></body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

用JavaScript实现单继承和多继承的简单方法
JavaScript是一种强大的多泛型编程语言，其融合了面向过程、面向对象和函数式编程于一身，具备强大的表现能力。
2009-03-03
关于js类的定义
这两天帮同学做秒杀网，打算将前台和后台彻底分离，仅用ajax通信。这样就免不了大量的使用javascript，于是发现，js果然是难学难用。
2011-06-06
JavaScript 基于原型的对象（创建、调用）
在我们写js代码的时候，内部对象是不可避免的要引用，但是光靠这些对象是不够的，所以需要我们自己定义对象，这个时候通常用到的对象是第三种，即基于原型的对象，下面就如何创建自己的对象，定义对象的方法、属性，调用对象给出详细的说明。
2009-10-10
javascript面向对象入门基础详细介绍
本文章介绍了js中常用的对象包括有JavaScript对象简介字符串对象 date() 数组数学对象函数对象应用介绍，有需要了解的同学可参考一下
2012-09-09
JavaScript定义类或函数的几种方式小结
js中不论是定义类或者函数，很多朋友想将代码写的更专业，更方便扩展等，那么就可以参考这篇文章了，最好是总结，建议大家收藏下。
2011-01-01
JavaScript 面向对象编程（2）定义类
最近这一段时间事情太多了，没有时间再继续写，幸好这两天有点小闲，先小写一下JavaScript中面向对象一中推荐的方法。
2010-05-05
javascript 对象入门实例教程
学习javascript 对象操作的朋友可以参考下，这个是入门级教程。
2010-04-04
手把手教你自己写一个js表单验证框架的方法
其实我自己也就能简单用用js而已，但是呢，相对很多初学者来说多懂了点Know How所以斗胆孟浪一下，将一些所得记录下来，以供更多的初学者能够知道一个东西的实现过程，省去在源码里摸索的过程。
2010-09-09
javascript类式继承新的尝试
研究javascript是很有意思的事情，以前我说过，在javascript中的继承，在于维持prototype指向同一object就行了，确实这样
2012-01-01
javascript最常用与实用的创建类的代码
组合构造函数模式和原型模式
2010-08-08