JavaScript 中的有限状态机，第 2 部分: 实现组件

核心提示： 一个包罗万象的对象Web 设计人员常常将一些简短的 JavaScript 代码片段复制并粘贴到 HTML 页面中，FadingTooltip 部件的编程过程比这要复杂一些，JavaScript 中的有限状态机，第 2 部分: 实现组件(3)，软件工程师喜欢将部件的变量和方法分组在一个对象中

一个包罗万象的对象

Web 设计人员常常将一些简短的 JavaScript 代码片段复制并粘贴到 HTML 页面中，FadingTooltip 部件的编程过程比这要复杂一些。软件工程师喜欢将部件的变量和方法分组在一个对象中，但是 JavaScript 对象模型在 Java™ 和 C++ 程序员看来可能有点儿奇怪。一个 JavaScript 对象就能够完全满足需要：它可以将变量和方法分组在一个对象中，然后为每个工具提示创建单独的数据实例。这些对象实例将共享同样的代码，并独立运行。

在 JavaScript 中，对象构造方法（constructor） 仅仅是一个函数 —— 这个函数的名称是对象的名称。这个部件需要知道它自己要连接到哪个 HTML 元素，以及要在工具提示中显示什么内容，所以要作为构造方法的参数指定这些，并将它们保存在对象中。（还需要有办法设置与工具提示的行为和外观相关的参数，所以也为此指定一个参数，并在本文后面使用它。）变量是无类型的，所以对象构造方法可能以清单 1 这样的代码开头。

清单 1. FadingTooltip 对象构造方法的 JavaScript 代码

function FadingTooltip(htmlElement, tooltipContent, parameters) {
　　this.htmlElement = htmlElement; // save pointer to HTML element whose mouse events
　　　　　　　　　　　　　　　　　　// are hooked to this object
　　this.tooltipContent = tooltipContent; // save text and HTML tags for the tooltip's
　　　　　　　　　　　　　　　　　　　　　// HTML Division element
　　...

在 JavaScript 中，可以在创建对象时或者在以后任何时候，给对象添加属性（property），属性可以是变量或方法；创建属性的办法是将一个值赋给它们，就像这个构造方法对 this.htmlElement 和 this.tooltipContent 属性所做的。