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

转：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;
}

_loopInterval 属性中的数字

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

Gallery 对象的属性如下：CurrentIndex、Images 和 _loopInterval。要将它们定义为Gallery 对象的属性，您只需将它们赋予 Gallery 对象，方法是使用 “点语法” — 附加一个点，然后是变量名，最后给变量赋值。清单 2 中使用的方法是 Next、Prev 和 Display。要将它们定义为 Gallery 对象的方法，可以使用 “点语法” 并为每个方法指定一个函数。

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

本文使用的 HTML 示例

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

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 对象
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 包含一个名为 GetIndex 的Images 数组，它可以获取数组中特定图像的索引。

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

时间： 2024-10-02 16:54:21

开始使用面向对象的 JavaScript 代码的相关文章

如何编写可维护的面向对象JavaScript代码

能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地球人都知道,时间就是金钱.同样的,你也会因为帮某人省去了头疼的过程而获得他的偏爱.但是,在开始探索如何编写可维护的面向对象JavaScript代码之前,我们先来快速看看什么是面向对象.如果已经了解面向对象的概念了,就可以直接跳过下一节. 什么是面向对象?  面向对象编程主要通过代码代表现实世界中的实

全面理解面向对象的JavaScript

转载:http://justcoding.iteye.com/blog/2019293 原文:http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/index.html?ca=drs-#major6 前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解.所以,经常出现的情况是,

前端开发：面向对象与javascript中的面向对象实现（一）

前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“找不到对象!”,他:“就你那样也能找得到对象?”.我一脸黑线...... 废话不多说,今天博主要跟大家聊的是<面向对象与javascript中的面向对象实现>”. 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理

深入全面理解面向对象的 JavaScript

深入全面理解面向对象的 JavaScript (原著: 曾 滢, 软件工程师, IBM,2013 年 4 月 17 日) JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征.本文将回归面向对象本意,从对语言感悟的角度阐述为什么 JavaScript 是一门彻底的面向对象的语言,以及如何正确地使用这一特性. 前言 当今 JavaScript 大行其道,各种应用

以优美方式编写JavaScript代码

英文原文:CoffeeScript: The beautiful way to write JavaScript 我用 JavaScript 编程很多年了,写了大量的 JavaScript 代码,即便是我这样的经历,但我仍然还在努力地去写出更优美的 JavaScript 代码,在这篇文章中,我将探索为什么写出漂亮的 JavaScript 代码是如此困难,如何使用CoffeScript(一种简约且能编译成 JavaScript 的语言)改善它. 什么是优美的代码? 我想从个人观点来声明如何定义优美

JavaScript Oriented[探究面向对象的JavaScript高级语言特性]

JavaScript Oriented 探究面向对象的JavaScript高级语言特性 Prologue . JavaScript Introduce 1.  JS Abstract JavaScript是由Netscape公司工程师Brendan Eich研发的脚本语言,经过推广和流行,兼容ECMA-262标准,至今用于描述HTML网页行为.(前端验证,检测,响应,触发,控制等动态行为) Knowledge Tree 2.     About Document 本文涉及到的概念有JavaScr

一个简单的、面向对象的javascript基础框架

如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有完整的思考过我到底该如何去写这个框架,所以事后对于这个框架我有很多遗憾之处,当我重构过一次代码后我就没再做过任何重构操作的工作,因为我根本不想再去给它修修补补了,之所以有这个想法,就是我对我写的那个框架的基础架构不满意. 为什么不满意这个基础架构了?我们先来看看我当时封装框架的方式: (functi

Javascript代码规范

1. 前言 JavaScript一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对JavaScript设计的,但是在使用各种JavaScript的预编译语言时(如TypeScript等)时,适用的部分也应尽量遵循本文档的约定. 任何问题或建议,欢迎跟我们讨论 2. 代码风格 2.1. 文件 ·[建议] JavaScript 文件使用无 BOM 的 UTF-8 编码. 解释 UTF-8 编码具有更广泛的适应性

引爆你的Javascript代码进化

方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语言的理解,对JS编程能力提高必是极好的.说人话:丫代码写的太乱,看的窝火! 最近闲暇无事,准备对自己JS学习做一个总结.众所周知,JS是一种语法极其灵活的语言,一千个人会有一千种JS书写方式.这造成的结果往往就是给项目日后的开发及维护留下一个不小的隐患,也对你和团队再次开发及阅读代码造成一定困难,个人认为良好的书写规范是应该首当其冲的.所以参考一些优秀前端开发团队的代码规范后,总结了几点,希望能让你的Java