转：http://www.ibm.com/developerworks/cn/web/wa-oojavascript/
JavaScript 语言包含好几种内嵌式对象，仅举几例，如 Array、String 和 Date。但是，如果您想创建自定义函数，您可以使用可用方法中的一种来创建您自己的自定义对象。使用 JavaScript 语言来开发您的自定义对象有很多好处，其中一个就是在多个项目中可以轻松重用这些自定义对象而不用进行修改。并且，自定义对象可以连接到 JavaScript 语言提供的预建对象之外的函数。可以结合这个自定义对象和其他的自定义对象构建一个库，用来发给其他 web 开发人员。
属性和方法使得对象具有功能和作用。理解对象概念的最简单方法就是想象现实生活中的事物。比如，把狗当做您的对象。一条狗具有诸如腿、耳朵、尾巴、可能还有颈圈等属性。一条狗还具有诸如吠叫、吃东西、睡觉等方法。这些方法可以改变狗的属性。例如，如果一条狗在叫，它的耳朵是竖起来的，如果狗在睡觉，它的耳朵应该是下垂的（当然，除非这条狗是大丹犬）。设想在您的项目中使用狗这个对象。如果您有兴趣创建多条狗的对象，您将会节省很多时间，因为它们都有一些共同的基本属性和方法。并且，如果您想在另一个项目中使用狗这个对象的话，您可以轻松重用您已经创建过的对象。
以下是使用 JavaScript 语言创建对象的不同方法：
Object函数- 文本符号（Literal notation）
- 对象构造函数和原型化
本文涵盖了使用 JavaScript 语言创建自定义对象全部的三种方法。同时本文还演示了如何使用每种方法创建一个简单的图像库对象。
要开始阅读本文，您需要对 JavaScript 语言有个基本的了解。从 下载 部分下载示例代码来运行这些示例。如果您想了解更多 JavaScript 语言的基础知识，请参阅 参考资料 部分引用的文章。
Object 函数
Object 函数是使用 JavaScript 语言创建对象的最简单方法之一。JavaScript 语言包含一个名为 Object 的函数，可以与 new 运算符联用来创建对象。 Object 函数是您通过创建对象想要得到的任何自定义功能的起点。要想引用一个使用 new 运算符和 Object 函数创建的对象，您只需给它指定一个变量名（见清单 1）。
清单 1. 清单 1. 使用 Object 函数创建一个自定义对象
var Gallery = new Object();
要使 Gallery 对象起作用，您可以通过添加属性和方法来给予它功能。清单 2 包含了已经添加到 Gallery 对象中的三个属性和三个方法。
清单 2. 清单 2. 一个包含属性和方法的自定义 Gallery 对象
var Gallery = new Object();
Gallery.CurrentIndex = 0;
Gallery.Images = new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg');
Gallery._loopInterval = setInterval('Gallery.Next()', 2500);
Gallery.Next = function()
{
if(Gallery.CurrentIndex < (Gallery.Images.length-1))
{
Gallery.CurrentIndex++;
}
else Gallery.CurrentIndex=0;
Gallery.Display();
}
Gallery.Prev = function()
{
if(Gallery.CurrentIndex > 0)
{
Gallery.CurrentIndex--;
}
else Gallery.CurrentIndex=(Gallery.Images.length-1);
Gallery.Display();
}
Gallery.Display = function()
{
var photoGallery = document.getElementById('photo-gallery');
var currentImage = Gallery.Images[Gallery.CurrentIndex];
photoGallery.src = "../assets/img/"+currentImage;
}
Gallery 对象的属性如下：CurrentIndex、Images 和 _loopInterval。要将它们定义为Gallery 对象的属性，您只需将它们赋予 Gallery 对象，方法是使用 “点语法” — 附加一个点，然后是变量名，最后给变量赋值。清单 2 中使用的方法是 Next、Prev 和 Display。要将它们定义为 Gallery 对象的方法，可以使用 “点语法” 并为每个方法指定一个函数。
Next 和 Prev 方法都使用这个对象中的属性。 CurrentIndex 属性能识别 Images 数组的当前索引，因此，当您增加或减少索引时，它会引用不同的数组项。Images 属性是一个数组，用于存储库中正在显示的图像。 _loopInterval 属性每 2.5 秒将库中的图像自动循环一次。
Gallery 对象中的 Next 和 Prev 方法相似 — 前者增加 Images 数组的当前索引，而后者相反，这使得 Display 方法每次被调用时都会显示不同的图像。
要调用这个对象中的一个方法，比如 Next方法，您只需引用 Gallery 对象，然后是一个点，然后是方法的名称（Next），最后是圆括号（见清单 3）。
清单 3. 清单 3. 调用自定义 Gallery 对象中的 Next 方法
Gallery.Next();
要实际应用这个对象，您可以轻松创建一些控件，浏览 Images 数组中的图像。首先，您需要包含 JavaScript 文件，这里是一个名为 Gallery.js 的外部文件。然后您只需添加一个 HTML img 标记，显示图像的 并添加控制前后导航的链接（见清单 4）。
清单 4. 清单 4. 包含自定义 Gallery 对象和 Gallery 函数的 HTML 示例文件
<html>
<head>
<title>Getting Started with Object-Oriented JavaScript</title>
<script type="text/javascript" src="js/Gallery.js"></script>
</head>
<body>
<img src="../assets/img/istockphoto_14149033.jpg" id="photo-gallery" />
<p>
<a href="#" onClick="Gallery.Prev();">< Previous</a>
<a href="#" onClick="Gallery.Next();">Next ></a>
</p>
</body>
</html>
文本符号
使用 JavaScript 语言创建对象的另一种方法是通过文本符号（literal notation），这需要 JavaScript 1.2 及以上版本的支持。与使用 Object 函数创建的对象一样，文本符号可以包含属性和方法。
使用文本符号创建自定义 JavaScript 对象和使用其他编程语言创建关联数组类似。要使用文本符号创建对象，只需将一个变量赋予一个大括号，如清单 5 所示。
清单 5. 清单 5. 使用文本符号创建自定义对象
var Gallery = {};
要定义使用文本符号创建的对象的属性，您需要在变量名和变量值之间加一个冒号，并且用逗号把所有的属性分开，如清单 6 所示。
清单 6. 清单 6. 使用文本符号给自定义对象添加属性
var Gallery = {
Images: new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg'),
CurrentIndex: 0,
_loopInterval: setInterval('Gallery.Next()', 2500)
};
使用由文本符号创建的对象进行方法定义的方式与定义属性的方式类似：首先声明变量，然后加一个冒号，然后是函数。要在对象中定义不同的方法，需要用逗号将它们分开（见清单 7）。
清单 7. 清单 7. 使用文本符号将方法添加到自定义对象中
var Gallery = {
Next: function()
{
if(Gallery.CurrentIndex < (Gallery.Images.length-1)) Gallery.CurrentIndex++;
else Gallery.CurrentIndex=0;
this.Display();
},
Prev: function()
{
if(Gallery.CurrentIndex > 0) Gallery.CurrentIndex--;
else Gallery.CurrentIndex=(Gallery.Images.length-1);
this.Display();
},
Display: function()
{
var photoGallery = document.getElementById('photo-gallery');
var currentImage = this.Images[this.CurrentIndex];
photoGallery.src = "../assets/img/"+currentImage;
}
};
使用 Object 函数和文本符号的另一个不同点是不用在每次定义属性和方法时提供对象名。清单 8 演示了使用文本符号的 Gallery 对象的完整示例。
清单 8. 清单 8. 一个使用文本符号的自定义 Gallery 对象
var Gallery = {
Images: new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg'),
CurrentIndex: 0,
_loopInterval: setInterval('Gallery.Next()', 2500),
Next: function()
{
if(Gallery.CurrentIndex < (Gallery.Images.length-1))
{
Gallery.CurrentIndex++;
}
else Gallery.CurrentIndex=0;
this.Display();
},
Prev: function()
{
if(Gallery.CurrentIndex > 0)
{
Gallery.CurrentIndex--;
}
else Gallery.CurrentIndex=(Gallery.Images.length-1);
this.Display();
},
Display: function()
{
var photoGallery = document.getElementById('photo-gallery');
var currentImage = this.Images[this.CurrentIndex];
photoGallery.src = "../assets/img/"+currentImage;
}
};
要想使用这个对象，您可以把它放到您在清单 4 中使用的 HTML 文件中。其余的代码，包括函数调用，也是一样的。
使用 Object 函数或文本符号的惟一缺点是您不可以多次实例化它们。例如，在对象被创建的初始时间里，对这两种对象类型您只能使用 new运算符，这意味着您不可以重用对象来创建其他的实例。对于本文中的示例来说，如果您想在单个的 HTML 文件中创建多个库，您需要多次包含 JavaScript 文件并且每次给库起一个不同的名称，这样会导致很多的重复的对象有着不同的名称。因此，对于这种情况，这些对象类型不是好的选择。从另一方面来说，如果您只需使用一次对象的话，这些对象类型是非常适用的。创建一个可以多次实例化的对象，您需要使用对象构造函数和原型化。
对象构造函数和原型化
当您需要一个可以多次实例化的对象时，对象构造函数和原型化就是答案。对象构造函数就像其他任何函数一样，但给函数命名时，您需要将函数命名为您在此函数中创建的对象名。在本例中，对象名为 Gallery。然而，由于您想使库对象具有创建多个实例的能力，在这里，我把它命名为 GalleryObj。
当您开始给对象构造函数添加属性和方法时，它就开始变得不同。我个人不把方法添加到构造函数中，因为虽然可以这么做，但这不是好的形式。向对象函数中添加属性或方法时，您可以在属性或方法名之前使用这个关键字来将它们指定给对象本身（见清单 9）。
清单 9. 清单 9. 在对象构造函数中定义属性
function GalleryObj()
{
this.Images = new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg');
this.CurrentIndex = 0;
}
与向对象构造函数中添加方法比起来，我更喜欢使用 prototype 关键字。 prototype 关键字提供了在 JavaScript 语言中创建继承性的能力。例如，当您想要一个对象在被对象构造函数定义后继承方法时，使用 prototype 关键字基本上可以让您将方法连接到一个对象，然后允许该对象的所有实例都使用该方法（见清单 10）。
清单 10. 清单 10. 使用 prototype 关键字向对象中添加方法
GalleryObj.prototype.Next = function()
{
if(this.CurrentIndex < (this.Images.length-1))
{
this.CurrentIndex++;
}
else this.CurrentIndex=0;
this.Display();
}
在清单 11 中，您可以看到使用构造函数和原型化的 Gallery 对象。
清单 11. 清单 11. 一个使用对象构造函数和原型化的自定义 GalleryObj 对象
GalleryObj 对象function GalleryObj()
{
this.Images = new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg');
this.CurrentIndex = 0;
}
GalleryObj.prototype.Next = function()
{
if(this.CurrentIndex < (this.Images.length-1))
{
this.CurrentIndex++;
}
else this.CurrentIndex=0;
this.Display();
}
GalleryObj.prototype.Prev = function()
{
if(this.CurrentIndex > 0) this.CurrentIndex--;
else this.CurrentIndex=(this.Images.length-1);
this.Display();
}
GalleryObj.prototype.Display = function()
{
var photoGallery = document.getElementById('photo-gallery');
var currentImage = this.Images[this.CurrentIndex];
photoGallery.src = "../assets/img/"+currentImage;
}
var Gallery = new GalleryObj();
setInterval('Gallery.Next()', 2500);为了使用相同的 HTML 文件，我把对象命名为 GalleryObj，这样当您把它初始化时，您可以把实例命名为 Gallery。另一个不同点是自动推进库图像的间隔在每个实例中而不是对象中定义，这使您可以单独控制每个库实例的间隔。
现在如果您有兴趣创建其他 GalleryObj 对象的实例，您可以轻松定义一个新实例，如清单 12 所示。
清单 12. 清单 12. 创建自定义 GalleryObj 对象的另一个实例
GalleryObj 对象的另一个实例var Gallery2 = new GalleryObj();如您所见，自定义构造函数非常强大，因为它可以让您创建一个对象的无数实例。原型化也非常强大，因为它可以使您在运行时添加方法，之后这个方法可以链接到那个对象的所有实例。
原型化核心 JavaScript 对象
既然您了解了原型化，现在可以查看如何把自定义方法添加到核心 JavaScript 对象。有时您需要额外的功能，但并不一定是自定义对象。例如，假设您需要获取您的库的 Images 数组中的一个特定项目的索引。您可以通过使用 prototype 关键字向对象中添加新的方法来扩展 Array 对象，而不是写一个随机的不可重用的函数（见清单 13）。
清单 13. 清单 13. 使用 prototype 关键字向 JavaScript 语言中的核心 Array 对象添加方法
prototype 关键字向 JavaScript 语言中的核心 Array 对象添加方法Array.prototype.GetIndex = function(item)
{
for(var i=0; i<this.length; i++)
{
if(this[i] == item) return i;
}
}要使用您添加到 Array 对象中的新方法，您可以轻松调用它，就像从您创建的任何数组调用其他任何函数一样。清单 14 包含一个名为 GetIndex 的Images 数组，它可以获取数组中特定图像的索引。
清单 14. 清单 14. 使用 prototype 关键字向核心 Array 对象中添加方法
prototype 关键字向核心 Array 对象中添加方法 <html>
<head>
<title>Getting Started with Object-Oriented JavaScript</title>
<script type="text/javascript" src="js/Array.js"></script>
<script type="text/javascript">
var Images = new Array('istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg');
var index = Images.GetIndex('istockphoto_14232771.jpg');
alert("Index: "+ index);
</script>
</head>
<body>
</body>
</html>扩展 JavaScript 语言中的核心对象可以使您给已经存在的对象添加功能。当您想到自己能扩展 Array 对象的功能，然后在您的任何项目中重用扩展的功能时，那感觉一定棒极了！
结束语
本文所涉及的每种方法都有自己的作用。 Object 函数和文本符号相似，至于选择使用哪个确实基于开发人员的个人爱好。对于不需要被多次实例化的对象来说，两者都是很好的选择。当需要创建可以被多次实例化的对象时，对象构造函数和原型化是比较理想的。
在 JavaScript 语言中创建自定义对象使您在保持代码简单有序的同时还能够创建更复杂的功能。我希望本文可以激发您在 JavaScript 项目中使用自定义项目创建复杂的交互性的想法。