开始使用面向对象的 JavaScript 代码

学习如何使用 JavaScript 语言创建对象

随着当今高度互动网站的流行,JavaScript 语言有着很高的需求。真正想写出复杂的 JavaScript 代码的设计人员需要对创建自定义对象的不同方法以及如何使用这些对象有一个基本的了解。本文讲解了使用 JavaScript 语言创建自定义对象的各种方法,并通过大量代码示例展示如何在真实环境中使用自定义对象。

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

//www.ibm.com/developerworks/i/p-khadlock.jpgKris Hadlock 从 1996 年起就是一个签约 web 开发人员和设计师。他为很多公司开发过项目,比如,SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software 和 Fire Mountain Gems。他也是 Ajax for Web Application Developers (Sams) 和 The ActionScript Migration Guide (New Riders) 的作者,还是各种网站和设计杂志的专栏作者,包括 Peachpit.com、InformIT.com 和 Practical Web Design 杂志。Kris 也是 www.studiosedition.com 的创始人,这是一个网站设计和软件开发工作室,一家专门从事形式和功能融合的工作室。



2012 年 5 月 17 日

JavaScript 语言包含好几种内嵌式对象,仅举几例,如 ArrayStringDate。但是,如果您想创建自定义函数,您可以使用可用方法中的一种来创建您自己的自定义对象。使用 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;
}

_loopInterval 属性中的数字

您可以通过修改 _loopInterval 属性中的数字来增加或减少图像之间的时间。

Gallery 对象的属性如下:CurrentIndexImages_loopInterval。要将它们定义为 Gallery 对象的属性,您只需将它们赋予 Gallery 对象,方法是使用 “点语法” — 附加一个点,然后是变量名,最后给变量赋值。清单 2 中使用的方法是 NextPrevDisplay。要将它们定义为 Gallery 对象的方法,可以使用 “点语法” 并为每个方法指定一个函数。

NextPrev 方法都使用这个对象中的属性。 CurrentIndex 属性能识别 Images 数组的当前索引,因此,当您增加或减少索引时,它会引用不同的数组项。Images 属性是一个数组,用于存储库中正在显示的图像。 _loopInterval 属性每 2.5 秒将库中的图像自动循环一次。

本文使用的 HTML 示例

本文其他示例都使用清单 4 中的 HTML 文件。只有 Gallery 对象基于您使用的对象类型改变。

Gallery 对象中的 NextPrev 方法相似 — 前者增加 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 对象
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 对象的另一个实例
var Gallery2 = new GalleryObj();

如您所见,自定义构造函数非常强大,因为它可以让您创建一个对象的无数实例。原型化也非常强大,因为它可以使您在运行时添加方法,之后这个方法可以链接到那个对象的所有实例。


原型化核心 JavaScript 对象

既然您了解了原型化,现在可以查看如何把自定义方法添加到核心 JavaScript 对象。有时您需要额外的功能,但并不一定是自定义对象。例如,假设您需要获取您的库的 Images 数组中的一个特定项目的索引。您可以通过使用 prototype 关键字向对象中添加新的方法来扩展 Array 对象,而不是写一个随机的不可重用的函数(见清单 13)。

清单 13. 清单 13. 使用 prototype 关键字向 JavaScript 语言中的核心 Array 对象添加方法
Array.prototype.GetIndex = function(item)
{
    for(var i=0; i<this.length; i++)
    {
        if(this[i] == item) return i;
    }
}

要使用您添加到 Array 对象中的新方法,您可以轻松调用它,就像从您创建的任何数组调用其他任何函数一样。清单 14 包含一个名为 GetIndexImages 数组,它可以获取数组中特定图像的索引。

清单 14. 清单 14. 使用 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 项目中使用自定义项目创建复杂的交互性的想法。


下载

描述名字大小
本文样例代码oojs.zip197KB

参考资料

学习

获得产品和技术

  • 在实现对 JavaScript 语言的基本理解之后,jQuery 库是帮助您加速 JavaScript 语言开发的一种好方法。
  • 以最适合您的方式 IBM 产品评估试用版软件:下载产品试用版,在线试用产品,在云环境下试用产品,或者在 IBM SOA 人员沙箱 中花费几个小时来学习如何高效实现面向服务架构。

讨论

  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=816371
ArticleTitle=开始使用面向对象的 JavaScript 代码
publish-date=05172012