书名：JavaScript高级程序设计（第3版）

作者：Nicholas C.Zakas

译者：李松峰，曹力

ISBN：978-7-115-27579-0

您购买的图灵电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版权声明

Original edition, entitled Professional JavaScript for Web Developers 3rd Edition , by Nicholas C. Zakas，ISBN 978-1-118-02669-4, published by John Wiley & Sons, Inc.

Copies of this book sold without a Wiley sticker on the cover are unauthorized and illegal.

本书简体中文版由John Wiley & Sons, Inc.授权人民邮电出版社独家出版。

本书封底贴有John Wiley & Sons, Inc.激光防伪标签，无标签者不得销售。

序

20多年的职业生涯，我也长出了白头发。回首往事，曾经对我的职业道路产生过重要影响的技术和人历历在目。如果让我只说一种技术，一种对我产生了最大正面影响的技术，那么就是JavaScript。说实话，我也并非一直都是JavaScript的信徒。跟许多人一样，我以前也把它当作一门玩具语言，认为它只能用来做一些旋转的横幅广告，或者在页面中添加一些有意思的交互效果作为装饰。我原来是做服务器端开发的，我们都对这种玩具语言不感冒，该死的！可是，后来Ajax出现了。

永远也忘不了当时无孔不入的Ajax，大家都认为它是一种非常酷、非常新，同时极具创造性的技术。我也开始了解它，阅读相关资料。知道这门曾被我嗤之以鼻的玩具语言如今被每一位专业Web开发人员津津乐道之后，我感到很震惊。突然，我的看法就转变了。随着探索Ajax的继续深入，我认识到JavaScript的强大威力，急切地想了解它能提供的所有“法宝”。于是，我全身心地投入到学习JavaScript之中，不仅努力学习这门语言，还加入了jQuery项目团队，专门从事客户端开发。我的日子过得很爽。

对JavaScript了解得越深，接触的开发人员就越多，其中不乏今天在我眼里依然是巨星和导师级的人物。尼古拉斯·泽卡斯（本书作者）就是这样一位开发人员。我一直记得在读本书第2版时心中油然而生的喜悦之情，虽然我也有多年的积累，但仍然从中学到了很多新东西。这本书实实在在、深入浅出，读来就好像尼古拉斯对不同层次的读者都了如指掌，所以他的风格才那么贴切自然。对于技术书来说，这是非常突出的一个特色。多数作者都想靠坚深的技术给人留下印象，但这本书不同。所以，它很快就成为了我案头必备的书，我也会向那些有志全面掌握JavaScritp的开发人员推荐这本书。我希望每个人对这本书都能有跟我一样的体会，认识到它的价值所在。

后来，在一次jQuery大会上，我荣幸地见到了尼古拉斯本人。站在我面前的是一位世界顶级的JavaScript开发人员，而且正负责世界上最重要的一个Web站点（雅虎）。尼古拉斯是我见过的最随和的人之一。真的，见到他的时候我有一种追星族的幻觉。但他就是那么一个活生生的人，一个想帮助开发人员成就梦想的人。不仅他的书改变了我对JavaScript的认识，而且尼古拉斯这个人，也让我愿意接近，愿意了解。

听说尼古拉斯要请我作序，我激动得不知道说什么才好。在此，我代表大牛来为本书暖场。这个序也是他本人有多么令人景仰的一个明证。不过，更重要的是，这也给了我一个机会，让我能跟大家分享自己为什么觉得这本书如此重要。我看过很多JavaScript图书，的确也有很多令人叹服的佳作。但在我看来，这本书为读者成为全方位的JavaScript高手提供了“一揽子方案”。

这本书从介绍表达式和变量声明开始，平滑地过渡到了闭包、面向对象开发等高级主题。与那些把大量篇幅花在讲解背景知识上的书，以及那些让人感觉好像是要使用JavaScript开发导弹制导系统的书相比，这本书让人感觉细致周到、亲切自然。这是一本写给“普通人”的书，它能让你编写出引以为荣的代码，构建出令人叫绝的网站。

雷·邦戈（Rey Bango）

微软公司高级布道师，jQuery项目团队核心成员

前言

献给我的父母，是他们永远给我支持和鼓励。

从驱动全球商业、贸易及管理领域不计其数的复杂应用程序的角度来看，说JavaScript已经成为当今世界上最流行的编程语言一点儿都不为过。

JavaScript是基于Java的一种非常松散的面向对象语言，也是Web开发中极受欢迎的一门语言。JavaScript，尽管它的语法和编程风格与Java都很相似，但它却不是Java的“轻量级”版本。JavaScript是一种全新的动态语言，它植根于全球数亿网民都在使用的Web浏览器之中，致力于增强网站和Web应用程序的交互性。

在本书中，我们将对JavaScript追根溯源，从它在最早的Netscape浏览器中诞生谈起，一直谈到今天的它对DOM和Ajax的强大支持。读者将通过本书掌握如何运用和扩展这门语言，从而更好地满足自己的需求，以及如何实现客户端与服务器的无缝通信，而又不必求助于Java或隐藏的网页框架（frame元素）。一言以蔽之，本书将教会你在面对各种常见的Web开发问题时，如何拿出自己的JavaScript解决方案。

本书读者对象

本书将下列三类人员作为目标读者：

熟悉面向对象编程、经验丰富而又打算学习JavaScript的开发人员，JavaScript毕竟与Java、C++等传统OO语言存在着诸多联系；
有意提升自己网站和Web应用程序易用性的Web开发人员；
希望全面深入地理解这门语言的初级JavaScript开发人员。

此外，本书也适合熟悉下列相关技术的读者阅读：

Java
PHP
ASP.NET
HTML
CSS
XML

本书不适合没有计算机基础知识的初学者，也不适合只想为网站添加简单交互功能的读者。建议这些朋友学习阅读Beginning JavaScript, 3rd Edition （Wiley, 2007）一书¹ 。

¹ 本书中文版《JavaScript入门经典（第3版）》已经由清华大学出版社出版。——译者注（以下脚注如无特殊说明，均为译者注）

本书内容

本书提供了JavaScript开发人员必须掌握的内容，全面涵盖了JavaScript的各种高级、有用的特性。

本书首先介绍了JavaScript的起源及其发展现状，随后讨论了构成JavaScript实现的各个组成部分，重点讲解了ECMAScript和DOM标准。此外，还对不同Web浏览器的JavaScript实现之间存在的差异，给出了相应的说明。

在此基础上，本书从讲解JavaScript的基本概念入手，探讨了JavaScript面向对象程序设计和继承的方式，以及如何在HTML等标记语言中使用它。在深入剖析了事件和事件处理之后，又解释了各种浏览器检测技术。本书还探讨了HTML5、Selectors API和File API等一系列新API。

本书最后一部分专门讨论了高级主题，涉及性能和内存优化、最佳实践以及对JavaScript未来的展望。

本书结构

本书共25章，各章简介如下。

第1章“JavaScript简介” ，讲述了JavaScript的起源：因何而生，如何发展，现状如何。涉及的概念主要有JavaScript与ECMAScript之间的关系、DOM（Document Object Model，文档对象模型）、BOM（Browser Object Model，浏览器对象模型）。此外，还将讨论ECMA（European Computer Manufacturer's Association，欧洲计算机制造商协会）和W3C（World Wide Web Consortium，万维网联盟）制定的一些相关标准。

第2章“在HTML中使用JavaScript” ，介绍了如何在HTML中使用JavaScript创建动态网页。这一章不仅展示了在网页中嵌入JavaScript的各种方式，还讨论了JavaScript内容类型（content-type）及其与<script> 元素的关系。

第3章“基本概念” ，讨论了JavaScript语言的基本概念，包括语法和流控制语句。这一章也分析了JavaScript与其他基于C的语言在语法上的相同和不同之处，还介绍了与内置操作符有关的类型转换问题。

第4章“变量、作用域和内存问题” ，探讨了JavaScript如何处理其松散类型的变量。这一章还讨论了原始值和引用值之间的差别，以及与变量有关的执行环境的相应内容。最后，通过介绍JavaScript的垃圾收集机制，解释了变量在退出作用域时释放其内存的问题。

第5章“引用类型” ，详尽介绍了JavaScript内置的所有引用类型，如Object 和Array 。这一章对ECMA-262规范中描述的每一种引用类型既做了理论上的阐释，又从浏览器实现的角度给出了介绍。

第6章“面向对象的程序设计” ，讲述了在JavaScript中如何实现面向对象的程序设计。由于JavaScript没有类的概念，因此这一章从对象创建和继承的层面上展示了一些流行的技术。此外，这一章还讲解了函数原型的概念，并对函数原型与整个面向对象方法的关系进行了探讨。

第7章“函数表达式” ，集中介绍了JavaScript中最为强大的一个特性——函数表达式。相关的内容涉及闭包、this 对象的角色、模块模式和创建私有对象成员等。

第8章“BOM” ，介绍BOM（Browser Object Model，浏览器对象模型），即负责处理与浏览器自身有关的交互操作的对象集合。这一章全面介绍了每一个BOM对象，包括window 、document 、location 、navigator 和screen 。

第9章“客户端检测” ，讨论了检测客户端机器及其支持特性的各种手段，包括特性检测及用户代理字符串检测的不同技术。这一章还就每种手段的优缺点及适用情形给出了详细说明。

第10章“DOM” ，介绍DOM（Document Object Model，文档对象模型），即DOM1规定的JavaScript中的DOM对象。这一章也简要介绍了XML及其与DOM的关系，为深入探讨所有DOM规范及其定义的操作网页的方式奠定了基础。

第11章“DOM扩展” ，介绍了其他API以及浏览器本身为DOM添加的各种功能。涉及内容包括Selectors API、Element Traversal API和HTML5扩展。

第12章“DOM2和DOM3” ，在前两章的基础上继续探讨了DOM2和DOM3中新增的DOM属性、方法和对象。这一章还讨论了IE与其他浏览器的兼容性问题。

第13章“事件” ，解释了JavaScript中事件的本质，对遗留机制的支持，以及DOM对事件机制的重新定义。这一章讨论了多种设备，包括Wii和iPhone。

第14章“表单脚本” ，讲述如何使用JavaScript增强表单的交互性，突破浏览器的局限性。这一章的讨论主要围绕单个表单元素如文本框、选择框，以及围绕数据验证和操作展开。

第15章“使用Canvas绘图” ，讨论了<canvas> 标签以及如何通过它来动态绘图。不仅涵盖2D上下文，也将讨论WebGL（3D）上下文，可以为创建动画和游戏夯实基础。

第16章“HTML5脚本编程” ，介绍了HTML5规定的JavaScript API，涉及跨文档传递消息、拖放API和以编程方式控制<audio> 和<video> 元素，以及管理历史状态。

第17章“错误处理与调试” ，讨论浏览器如何处理JavaScript代码错误，并展示了一些处理错误的方式。这一章针对每种浏览器分别讨论了相应的调试工具和技术，还给出了简化调试工作的建议。

第18章“JavaScript与XML” ，展示了JavaScript中用于读取和操作XML（eXtensible Markup Language，可扩展标记语言）的特性。这一章分析了不同浏览器提供的XML支持和对象的差异，给出了编写跨浏览器代码的简易方法。此外，这一章还介绍了用于在客户端转换XML数据的XSLT（eXtensible Stylesheet Language Transformations，可扩展样式表语言转换）技术。

第19章“E4X” ，讨论了E4X（ECMAScript for XML，ECMAScript中的XML扩展）；设计E4X的出发点是简化XML处理任务。这一章探讨了在处理XML时，使用E4X与使用DOM相比有哪些优势。

第20章“JSON” ，介绍了作为XML替代格式的JSON，包含浏览器原生支持的JSON解析和序列化，以及使用JSON时要注意的安全问题。

第21章“Ajax与Comet” ，讲解了常用的Ajax技术，包括使用XMLHttpRequest 对象及CORS（Cross-Origin Resource Sharing，跨来源资源共享）API实现跨域Ajax通信。这一章展示了浏览器在实现与支持方面存在的差异，同时也给出了一些使用建议。

第22章“高级技巧” ，深入讲解了一些JavaScript中较复杂的模式，包括函数科里化（currying）、部分函数应用和动态函数。这一章还讨论了如何创建自定义的事件框架和使用ECMAScript 5创建防篡改对象。

第23章“离线应用与客户端存储” ，讨论了如何检测应用离线以及在客户端机器中存储数据的各种技术。先从受到最广泛支持的特性cookie谈起，继而介绍了新兴的客户端存储技术，如Web Storage和IndexedDB。

第24章“最佳实践” ，探讨了在企业级环境中使用JavaScript的各种方式。其中，着眼于提高可维护性的内容包括编码技巧、格式化和通用编程实践。这一章还介绍了改善代码执行性能及速度优化的一些技术。最后讨论了部署问题，包括如何创建构建过程。

第25章“新兴的API” ，介绍了为增强浏览器中的JavaScript而创建的新API。虽然这些API还没有得到完整或全面的支持，但它们已经崭露头角，有些浏览器也已经部分地实现了这些API。这一章的内容主要是Web计时和文件API。

使用示例

要运行本书中的示例，需要安装下列软件：

Windows XP、Windows 7或Mac OS X；
Internet Explorer 6 及更高版本、Firefox 2及更高版本、Opera 9及更高的版本、Chrome、 Safari 2及更高版本。

完整的示例源代码可以从http://www.wrox.com/ 中下载（下载步骤见“源代码”一节）² 。

² 读者也可以在图灵社区（http://www.ituring.com.cn/ ）本书的页面中免费注册下载。

排版约定

为了让读者更好地理解本书内容，同时把握住全书的重点，本书将采用以下排版约定。

这种带警告图标的方框样式，表示与上下文相关的重要的、需要牢记的内容。

这种带钢笔图标的方框样式，表示与上下文相关的说明、提示、技巧、窍门和背景知识。

正文中的样式说明如下。

新术语及重要的词汇在首次出现时使用加粗字体 以示强调；
表示键盘命令组合的方式是Ctrl+A；
正文中的代码使用等宽字体，如persistence.properties ；

代码有两种样式：

var obj = new Object();         // 大多数示例代码都没有加粗

var obj = new Object();        // 加粗的代码表示在上下文中特别重要

源代码

在学习本书示例代码时，可以手工敲入所有代码，也可以使用随书的源代码文件。本书所有源代码都可以到www.wrox.com 中下载。登录该站点后，先找到本书（通过搜索或者图书列表），打开本书页面后，单击其中的Download Code链接，就可以下载本书的源代码了³ 。对于包含在下载文件中的源代码，书中会添加以下图标：

³ 翻译本书时，wrox.com中下载本书代码的短地址为：http://tinyurl.com/projs-3nd-code 。

本书代码示例旁边会附有文件名，从中可以找到对应的代码片段。文件名的格式如下：

代码片段所在的文件名

由于很多书的书名看起来类似，所以更好的方式是通过书的ISBN来搜索它。本书原版的ISBN是978-1-118-02669-4。

下载完代码后，请使用解压缩软件将其解压缩。此外，读者也可以登录Wrox代码下载主页www.wrox.com/dynamic/books/download.aspx ，查找并下载本书及其他Wrox图书的示例代码。

勘误信息 ⁴

⁴ 您也可以登录图灵社区（http://www.ituring.com.cn/ ），在本书页面中提交您发现的错误。

我们尽最大努力确保正文和代码没有错误。可是，金无足赤，错误在所难免。如果读者发现我们书中的任何错误，例如错别字或代码片段无法运行等，希望您能及时给我们反馈。您提交的勘误不仅能让其他读者受益，而且也能帮助我们进一步提高图书质量。

本书原版的勘误页面位于www.wrox.com 中，登录该站点后可以通过搜索或查询图书列表找到本书页面，然后单击页面中的Errata（勘误）链接。然后可以看到其他读者已经提交并由Wrox的编辑发布的勘误信息。另外，在www.wrox.com/misc-pages/booklist.shtml 页面中也可以找到本书及勘误页面的链接。

如果读者在本书勘误页面中没有发现“你的”错误，麻烦打开www.wrox.com/contact/techsupport.shtml 页面，填写其中的表单并将错误发送给我们。我们会认真核对您提交的错误，如果错误确实存在，我们将把它补充到本书勘误页面中。同时，也将根据您提供的信息对本书后续版本加以改正。

p2p.wrox.com

如果您想与本书作者或者其他读者沟通，请加入P2P论坛（p2p.wrox.com ）。该论坛是基于Web的系统，您可以在其中发表与Wrox图书及相关技术有关的帖子，并同其他读者或者技术用户交流。论坛提供了一个订阅功能，您可以选择当发表您感兴趣的帖子时通过邮件通知您。Wrox的作者、编辑、其他行业的专家以及与您正在读同一本书的读者都会出现在这个论坛中。

在http://p2p.wrox.com 中，有很多论坛不仅对您理解本书有帮助，而且还会对开发应用程序有帮助。要加入这个论坛，请按下面几个步骤进行：

登录到p2p.wrox.com ，单击Register（注册）链接；
阅读使用条款并单击 Agree（同意）；
完成必填信息和您愿意提供的可选信息，然后单击 Submit（提交）；
随后，您会收到一封电子邮件，其中包含如何验证账号和完成注册过程的信息。

如果不加入P2P论坛，虽然也可以阅读其中的帖子，但却不能发表帖子，只有注册后才能发表。

在加入论坛后，既可以发表新帖子也可以回复其他用户的帖子。可以在任何时间上网浏览论坛中的帖子。如果希望将某个论坛中的新帖子通过电子邮件发送给您，请在论坛列表中单击与论坛名相关的Subscribe to this Forum（订阅这个论坛）图标。

如果想了解有关如何使用Wrox P2P的更多信息，请阅读包含论坛规则、P2P及Wrox图书常见问题的P2P FAQ；要阅读 FAQ，可以在任何P2P页面中单击FAQ链接。

致谢

虽然作者的名字被印在了封面上，但一个人是不可能完成这本书的，我想感谢与出版本书有关的一些人。

首先，感谢John Wiley & Sons继续给我写作的机会。当时，出版本书第1版时，他们是唯一愿意承担风险的一家出版社。对此，我将永远铭记于心。

感谢John Wiley & Sons的编辑人员，特别是Kevin Kent和John Peloquin，他们卓有成效的工作使我保持了坦诚直率的风格，也解决了我在写作期间不断变更内容的问题。

还要感谢对本书草稿给出反馈意见的所有人：Rob Friesel、Sergey Ilinsky、Dan Kielp、Peter-Paul Koch、Jeremy McPeak、Alex Petrescu、Dmitry Soshnikov和Juriy “Kangax” Zaytsev。你们的宝贵意见让我自己都为本书感到骄傲。

我想特别感谢Brendan Eich，感谢他纠正了第1章中有关JavaScript历史的细节问题。

最后，当然也是非常重要的，感谢Rey Bango为本书作序。很高兴在与Rey通过网络认识几年之后，终于在2010年有缘相见。他是这个行业里真正出色的人，我非常荣幸能请到他为本书作序。

关于技术编辑

John Peloquin是一位有十多年JavaScript经验的前端工程师，开发过各种规模的应用。John拥有加州大学伯克利分校的数学学士学位，目前在一家致力于卫生保健的创业公司担任开发主管。在编辑本书之前，John编辑过Jeremy McPeak的JavaScript 24-Hour Trainer （Wiley，2010）。编写代码和收集勘误之余，John经常沉迷于数学、哲学和魔术。

第1章　JavaScript简介

本章内容

JavaScript历史回顾
JavaScript是什么
JavaScript与ECMAScript的关系
JavaScript的不同版本

JavaScript诞生于1995年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。在JavaScript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator希望通过JavaScript来解决这个问题。在人们普遍使用电话拔号上网的年代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，拨号上网的速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。

自此以后，JavaScript逐渐成为市面上常见浏览器必备的一项特色功能。如今，JavaScript的用途早已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的JavaScript已经成为一门功能全面的编程语言，能够处理复杂的计算和交互，拥有了闭包、匿名（lamda，拉姆达）函数，甚至元编程等特性。作为Web的一个重要组成部分，JavaScript的重要性是不言而喻的，就连手机浏览器，甚至那些专为残障人士设计的浏览器等非常规浏览器都支持它。当然，微软的例子更为典型。虽然有自己的客户端脚本语言VBScript，但微软仍然在Internet Explorer的早期版本中加入了自己的JavaScript实现¹ 。

¹ 对IE而言，当我们提到JavaScript时，实际上就是指IE对JavaScript（ECMAScript）的实现——JScript。最早的JScript基于Netscape JavaScript 1.0开发，于1996年8月随同Internet Explorer 3.0发布。

JavaScript从一个简单的输入验证器发展成为一门强大的编程语言，完全出乎人们的意料。应该说，它既是一门非常简单的语言，又是一门非常复杂的语言。说它简单，是因为学会使用它只需片刻功夫；而说它复杂，是因为要真正掌握它则需要数年时间。要想全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史和局限性。

1.1　JavaScript简史

在Web日益流行的同时，人们对客户端脚本语言的需求也越来越强烈。那个时候，绝大多数因特网用户都使用速度仅为28.8kbit/s的“猫”（调制解调器）上网，但网页的大小和复杂性却不断增加。为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担。想象一下：用户填写完一个表单，单击“提交”按钮，然后等待30秒钟，最终服务器返回消息说有一个必填字段没有填好……当时走在技术革新最前沿的Netscape公司，决定着手开发一种客户端语言，用来处理这种简单的验证。

当时就职于Netscape公司的布兰登·艾奇（Brendan Eich），开始着手为计划于1995年2月发布的Netscape Navigator 2开发一种名为LiveScript的脚本语言——该语言将同时在浏览器和服务器中使用（它在服务器上的名字叫LiveWire）。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司建立了一个开发联盟。在Netscape Navigator 2正式发布前夕，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript。

由于JavaScript 1.0获得了巨大成功，Netscape随即在Netscape Navigator 3中又发布了JavaScript 1.1。Web虽然羽翼未丰，但用户关注度却屡创新高。在这样的背景下，Netscape把自己定位为市场领袖型公司。与此同时，微软决定向与Navigator竞争的自家产品Internet Explorer浏览器投入更多资源。Netscape Navigator 3发布后不久，微软就在其Internet Explorer 3中加入了名为JScript的JavaScript实现（命名为JScript是为了避开与Netscape有关的授权问题）。以现在的眼光来看，微软1996年8月为进入Web浏览器领域而实施的这个重大举措，是导致Netscape日后蒙羞的一个标志性事件。然而，这个重大举措同时也标志着JavaScript作为一门语言，其开发向前迈进了一大步。

微软推出其JavaScript实现意味着有了3个不同的JavaScript版本：Netscape Navigator中的JavaScript、Internet Explorer中的Jscript和ScriptEase中的CEnvi。与C及其他编程语言不同，当时还没有标准规定JavaScript的语法和特性，3个不同版本并存的局面已经完全暴露了这个问题。随着业界担心的日益加剧，JavaScript的标准化问题被提上了议事日程。

1997年，以JavaScript 1.1为蓝本的建议被提交给了欧洲计算机制造商协会（Ecma，European Computer Manufacturers Association）。该协会指定39号技术委员会（TC39，Technical Committee #39）负责“标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”（http://www.ecma-international.org/memento/TC39.htm ）。TC39由来自Netscape、Sun、微软、Borland及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了ECMA-262——定义一种名为ECMAScript（发音为“ek-ma-script”）的新脚本语言的标准。

第二年，ISO/IEC（International Organization for Standardization and International Electrotechnical Commission，国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）。自此以后，浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础，也在不同程度上取得了成功。

1.2　JavaScript实现

虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。没错，一个完整的JavaScript实现应该由下列三个不同的部分组成（见图1-1）。

图　1-1

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

1.2.1　ECMAScript

由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系。实际上，这门语言本身并不包含输入和输出定义。ECMA-262定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。我们常见的Web浏览器只是ECMAScript实现可能的宿主环境 之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如DOM，则利用ECMAScript的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作。前面介绍过的Node以及众所周知的Adobe Flash也都是宿主环境。

既然ECMA-262标准没有参照Web浏览器，那它都规定了些什么内容呢？大致说来，它规定了这门语言的下列组成部分：

语法
类型
语句
关键字
保留字
操作符
对象

ECMAScript就是对实现该标准规定的各个方面内容的语言的描述。JavaScript实现了ECMAScript，Adobe ActionScript同样也实现了ECMAScript。

1. ECMAScript的版本

ECMAScript的不同版本又称为版次，以第x 版表示（意即描述特定实现的ECMA-262规范的第x 个版本）。ECMA-262的最近一版是第5版，发布于2009年。而ECMA-262的第1版本质上与Netscape的JavaScript 1.1相同——只不过删除了所有针对浏览器的代码并作了一些较小的改动：ECMA-262要求支持Unicode标准（从而支持多语言开发），而且对象也变成了平台无关的（Netscape JavaScript 1.1的对象在不同平台中的实现不一样，例如Date 对象）。这也是JavaScript 1.1和1.2与ECMA-262第1版不一致的主要原因。

ECMA-262第2版主要是编辑加工的结果。这一版中内容的更新是为了与ISO/IEC-16262保持严格一致，没有作任何新增、修改或删节处理。因此，一般不使用第2版来衡量ECMAScript实现的兼容性。

ECMA-262第3版才是对该标准第一次真正的修改。修改的内容涉及字符串处理、错误定义和数值输出。这一版还新增了对正则表达式、新控制语句、try-catch 异常处理的支持，并围绕标准的国际化做出了一些小的修改。从各方面综合来看，第3版标志着ECMAScript成为了一门真正的编程语言。

ECMA-262第4版对这门语言进行了一次全面的检核修订。由于JavaScript在Web上日益流行，开发人员纷纷建议修订ECMAScript，以使其能够满足不断增长的Web开发需求。作为回应，ECMA TC39重新召集相关人员共同谋划这门语言的未来。结果，出台后的标准几乎在第3版基础上完全定义了一门新语言。第4版不仅包含了强类型变量、新语句和新数据结构、真正的类和经典继承，还定义了与数据交互的新方式。

与此同时，TC39下属的一个小组也提出了一个名为ECMAScript 3.1的替代性建议，该建议只对这门语言进行了较少的改进。这个小组认为第4版给这门语言带来的跨越太大了。因此，该小组建议对这门语言进行小幅修订，能够在现有JavaScript引擎基础上实现。最终，ES3.1附属委员会获得的支持超过了TC39，ECMAS-262第4版在正式发布前被放弃。

ECMAScript 3.1成为ECMA-262第5版，并于2009年12月3日正式发布。第5版力求澄清第3版中已知的歧义并增添了新的功能。新功能包括原生JSON对象（用于解析和序列化JSON数据）、继承的方法和高级属性定义，另外还包含一种严格模式，对ECMAScript引擎解释和执行代码进行了补充说明。

2. 什么是ECMAScript兼容

ECMA-262给出了ECMAScript兼容的定义。要想成为ECMAScript的实现，则该实现必须做到：

支持ECMA-262描述的所有“类型、值、对象、属性、函数以及程序句法和语义”（ECMA-262第1页）；
支持Unicode字符标准。

此外，兼容的实现还可以进行下列扩展。

添加ECMA-262没有描述的“更多类型、值、对象、属性和函数”。ECMA-262所说的这些新增特性，主要是指该标准中没有规定的新对象和对象的新属性。
支持ECMA-262没有定义的“程序和正则表达式语法”。（也就是说，可以修改和扩展内置的正则表达式语法。）

上述要求为兼容实现的开发人员基于ECMAScript开发一门新语言提供了广阔的空间和极大的灵活性，这也从另一个侧面说明了ECMAScript受开发人员欢迎的原因。

3. Web浏览器对ECMAScript的支持

1996年，Netscape Navigator 3捆绑发布了JavaScript 1.1。而相同的JavaScript 1.1设计规范随后作为对新标准（ECMA-262）的建议被提交给Ecma。伴随着JavaScript的迅速走红，Netscape豪情满怀地着手开发JavaScript 1.2。然而，问题是Ecma当时还没有接受Netscape的建议。

Netscape Navigator 3发布后不久，微软也推出了Internet Explorer 3。微软在IE的这一版中捆绑了JScript 1.0，很多人都认为JScript 1.0与JavaScript 1.1应该是一样的。但是，由于没有文档依据，加之不适当的特性模仿，JScript 1.0还是很难与JavaScript 1.1相提并论。

1997年，内置JavaScript 1.2的Netscape Navigator 4发布；而到这一年年底，ECMA-262第1版也被接受并实现了标准化。结果，虽然ECMAScript被认为是基于JavaScript 1.1制定的，但JavaScript 1.2与ECMAScript的第1版并不兼容。

JScript的升级版是Internet Explorer 4中内置的JScript 3.0（随同微软IIS 3.0发布的JScript 2.0从来也没有移植到浏览器中）。微软通过媒体大肆宣传JScript 3.0是世界上第一个ECMA兼容的脚本语言，但当时的ECMA-262尚未定稿。于是，JScript 3.0与JavaScript 1.2都遭遇了相同的尴尬局面——谁都没有按照最终的ECMAScript标准来实现。

Netscape决定更新其JavaScript实现，即在Netscape Navigator 4.06中发布JavaScript 1.3，从而做到了与ECMA-262的第一个版本完全兼容。在JavaScript 1.3中，Netscape增加了对Unicode标准的支持，并在保留JavaScript 1.2新增特性的同时实现了所有对象的平台中立化。

在Netscape以Mozilla项目的名义开放其源代码时，预期JavaScript 1.4将随同Netscape Navigator 5一道发布。然而，一个激进的决定，彻底重新设计Netscape代码，打乱了原有计划。后来，JavaScript 1.4只发布了针对Netscape Enterprise Server的服务器版，而没有内置于Web浏览器中。

到了2008年，五大主流Web浏览器（IE、Firefox、Safari、Chrome和Opera）全部做到了与ECMA-262兼容。IE8是第一个着手实现ECMA-262第5版的浏览器，并在IE9中提供了完整的支持。Firefox 4也紧随其后做到兼容。下表列出了ECMAScript受主流Web浏览器支持的情况。

浏　览　器	ECMAScript兼容性	浏　览　器	ECMAScript兼容性
Netscape Navigator 2	—	Opera 6～7.1	第2版
Netscape Navigator 3	—	Opera 7.2+	第3版
Netscape Navigator 4～4.05	—	Safari 1～2.0.x	第3版*
Netscape Navigator 4.06～4.79	第1版	Safari 3.x	第3版
Netscape 6+（Mozilla 0.6.0+）	第3版	Safari　4.x～5.x	第5版*
IE3	—	Chrome 1+	第3版
IE4	—	Firefox 1～2	第3版
IE5	第1版	Firefox 3.0.x	第3版
IE5.5～IE7	第3版	Firefox 3.5～3.6	第5版*
IE8	第5版*	Firefox 4.0 +	第5版
IE9+	第5版

* 不完全兼容的实现

1.2.2　文档对象模型（DOM）

文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（API，Application Programming Interface）。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。看下面这个HTML页面：

<html>
    <head> 
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

在DOM中，这个页面可以通过见图1-2所示的分层节点图表示。

通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

1. 为什么要使用DOM

在Internet Explorer 4和Netscape Navigator 4分别支持的不同形式的DHTML（Dynamic HTML）基础上，开发人员首次无需重新加载网页，就可以修改其外观和内容了。然而，DHTML在给Web技术发展带来巨大进步的同时，也带来了巨大的问题。由于Netscape和微软在开发DHTML方面各持己见，过去那个只编写一个HTML页面就能够在任何浏览器中运行的时代结束了。

对开发人员而言，如果想继续保持Web跨平台的天性，就必须额外多做一些工作。而人们真正担心的是，如果不对Netscapet和微软加以控制，Web开发领域就会出现技术上两强割据，浏览器互不兼容的局面。此时，负责制定Web通信标准的W3C（World Wide Web Consortium，万维网联盟）开始着手规划DOM。

图　1-2

2. DOM级别

DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

请读者注意，DOM并不只是针对JavaScript的，很多别的语言也都实现了DOM。不过，在Web浏览器中，基于ECMAScript实现的DOM的确已经成为JavaScript这门语言的一个重要组成部分。

如果说DOM1级的目标主要是映射文档的结构，那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了（DHTML一直都支持的）鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading Style Sheets，层叠样式表）的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。

DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；
DOM事件（DOM Events）：定义了事件和事件处理的接口；
DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；
DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法——在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法——在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。

在阅读DOM标准的时候，读者可能会看到DOM0级（DOM Level 0）的字眼。实际上，DOM0级标准是不存在的；所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。

3. 其他DOM标准

除了DOM核心和DOM HTML接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，每种语言的DOM标准都添加了与特定语言相关的新方法和新接口：

SVG（Scalable Vector Graphic，可伸缩矢量图）1.0；
MathML（Mathematical Markup Language，数学标记语言）1.0；
SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。

还有一些语言也开发了自己的DOM实现，例如Mozilla的XUL（XML User Interface Language，XML用户界面语言）。但是，只有上面列出的几种语言是W3C的推荐标准。

4. Web浏览器对DOM的支持

在DOM标准出现了一段时间之后，Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM，但直到IE5.5才算是真正支持DOM1级。在随后的IE6和IE7中，微软都没有引入新的DOM功能，而到了IE8才对以前DOM实现中的bug进行了修复。

Netscape直到Netscape 6（Mozilla 0.6.0）才开始支持DOM。在Netscape 7之后，Mozilla把开发重心转向了Firefox浏览器。Firefox 3完全支持DOM1级，几乎完全支持DOM2级，甚至还支持DOM3级的一部分。（Mozilla开发团队的目标是构建与标准100%兼容的浏览器，而他们的努力也得到了回报。）

目前，支持DOM已经成为浏览器开发商的首要目标，主流浏览器每次发布新版本都会改进对DOM的支持。下表列出了主流浏览器对DOM标准的支持情况。

浏览器	DOM兼容性
Netscape Navigator 1. ～ 4.x	—
Netscape 6+ （Mozilla 0.6.0+）	1级、2级（几乎全部）、3级（部分）
IE2～IE4.x	—
IE5	1级（最小限度）
IE5.5～IE8	1级（几乎全部）
IE9+	1级、2级、3级
Opera 1～6	—
Opera 7～8.x	1级（几乎全部）、2级（部分）
Opera 9～9.9	1级、2级（几乎全部）、3级（部分）
Opera 10+	1级、2级、3级（部分）
Safari 1.0.x	1级
Safari 2+	1级、2级（部分）
Chrome 1+	1级、2级（部分）
Firefox 1+	1级、2级（几乎全部）、3级（部分）

1.2.3　浏览器对象模型（BOM）

Internet Explorer 3和Netscape Navigator 3有一个共同的特色，那就是支持可以访问和操作浏览器窗口的浏览器对象模型（BOM，Browser Object Model）。开发人员使用BOM可以控制浏览器显示的页面以外的部分。而BOM真正与众不同的地方（也是经常会导致问题的地方），还是它作为JavaScript实现的一部分但却没有相关的标准。这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入正式规范。HTML5发布后，很多关于BOM的困惑烟消云散。

从根本上讲，BOM只处理浏览器窗口和框架；但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分。下面就是一些这样的扩展：

弹出新浏览器窗口的功能；
移动、缩放和关闭浏览器窗口的功能；
提供浏览器详细信息的navigator 对象；
提供浏览器所加载页面的详细信息的location 对象；
提供用户显示器分辨率详细信息的screen 对象；
对cookies的支持；
像XMLHttpRequest 和IE的ActiveXObject 这样的自定义对象。

由于没有BOM标准可以遵循，因此每个浏览器都有自己的实现。虽然也存在一些事实标准，例如要有window 对象和navigator 对象等，但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。现在有了HTML5，BOM实现的细节有望朝着兼容性越来越高的方向发展。第8章将深入讨论BOM。

1.3　JavaScript版本

作为Netscape“继承人”的Mozilla公司，是目前唯一还在沿用最初的JavaScript版本编号序列的浏览器开发商。在Netscape将源代码提交给开源的Mozilla项目的时候，JavaScript在浏览器中的最后一个版本号是1.3。（如前所述，1.4版是只针对服务器的实现。）后来，随着Mozilla基金会继续开发JavaScript，添加新的特性、关键字和语法，JavaScript的版本号继续递增。下表列出了Netscape/Mozilla浏览器中JavaScript版本号的递增过程：

浏览器	JavaScript版本	浏览器	JavaScript版本
Netscape Navigator 2	1.0	Firefox 1.5	1.6
Netscape Navigator 3	1.1	Firefox 2	1.7
Netscape Navigator 4	1.2	Firefox 3	1.8
Netscape Navigator 4.06	1.3	Firefox 3.5	1.8.1
Netscape 6+（Mozilla 0.6.0+）	1.5	Firefox 3.6	1.8.2
Firefox 1	1.5

实际上，上表中的编号方案源自Firefox 4将内置JavaScript 2.0这一共识。因此，2.0版之前每个递增的版本号，表示的是相应实现与JavaScript 2.0开发目标还有多大的距离。虽然原计划是这样，但JavaScript的这种发展速度让这个计划成为不再可行。目前，JavaScript 2.0还没有目标实现。

请注意，只有Netscape/Mozilla浏览器才遵循这种编号模式。例如，IE的JScript就采用了另一种版本命名方案。换句话说，JScript的版本号与上表中JavaScript的版本号之间不存在任何对应关系。而且，大多数浏览器在提及对JavaScript的支持情况时，一般都以ECMAScript兼容性和对DOM的支持情况为准。

1.4　小结

JavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

ECMAScript，由ECMA-262定义，提供核心语言功能；
文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

JavaScript的这三个组成部分，在当前五个主要浏览器（IE、Firefox、Chrome、Safari和Opera）中都得到了不同程度的支持。其中，所有浏览器对ECMAScript第3版的支持大体上都还不错，而对ECMAScript 5的支持程度越来越高，但对DOM的支持则彼此相差比较多。对HTML5已经正式纳入标准的BOM来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。

第2章　在HTML中使用JavaScript

本章内容

使用<script> 元素
嵌入脚本与外部脚本
文档模式对JavaScript的影响
考虑禁用JavaScript的场景

只要一提到把JavaScript放到网页中，就不得不涉及Web的核心语言——HTML。在当初开发JavaScript的时候，Netscape要解决的一个重要问题就是如何做到让JavaScript既能与HTML页面共存，又不影响那些页面在其他浏览器中的呈现效果。经过尝试、纠错和争论，最终的决定就是为Web增加统一的脚本支持。而Web诞生早期的很多做法也都保留了下来，并被正式纳入HTML规范当中。

2.1　<script>元素

向HTML页面中插入JavaScript的主要方法，就是使用<script> 元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的HTML规范中。HTML 4.01为<script> 定义了下列6个属性。

async ：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset ：可选。表示通过src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language ：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript 、JavaScript1.2 或VBScript ）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
src ：可选。表示包含要执行代码的外部文件。
type ：可选。可以看成是language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。虽然text/javascript 和text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是text/javascript 。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x–javascript ，但在type 中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript 和application/ ecmascript 。考虑到约定俗成和最大限度的浏览器兼容性，目前type 属性的值依旧还是text/javascript 。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript 。

使用<script> 元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。

在使用<script> 元素嵌入JavaScript代码时，只须为<script> 指定type 属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：

<script type="text/javascript">
    function sayHi(){ 
        alert("Hi!");
    }
</script>

包含在<script> 元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释到一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script> 元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script> 嵌入JavaScript代码时，记住不要在代码中的任何地方出现"</script>" 字符串。例如，浏览器在加载下面所示的代码时就会产生一个错误：

<script type="text/javascript">
    function sayScript(){
        alert("</script>");


    }

因为按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>" 时，就会认为那是结束的</script> 标签。而通过把这个字符串分隔为两部分可以解决这个问题，例如：

<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");


    }

像这样分成两部分来写就不会造成浏览器的误解，因而也就不会导致错误了。

如果要通过<script> 元素来包含外部JavaScript文件，那么src 属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接，例如：

<script type="text/javascript" src="example.js"></script>

在这个例子中，外部文件example.js 将被加载到当前页面中。外部文件只须包含通常要放在开始的<script> 和结束的</script> 之间的那些JavaScript代码即可。与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script> 标签，例如：

<script type="text/javascript" src="example.js" />

但是，不能在HTML文档使用这种语法。原因是这种语法不符合HTML规范，而且也得不到某些浏览器（尤其是IE）的正确解析。

按照惯例，外部JavaScript文件带有.js扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含JavaScript的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端语言动态生成JavaScript代码也就成为了可能。但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不使用.js扩展名，请确保服务器能返回正确的MIME类型。

需要注意的是，带有src 属性的<script> 元素不应该在其<script> 和</script> 标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行脚本文件，嵌入的代码会被忽略。

另外，通过<script> 元素的src 属性还可以包含来自外部域的JavaScript文件。这一点既使<script> 元素倍显强大，又让它备受争议。在这一点上，<script> 与<img> 元素非常相似，即它的src属性可以是指向当前HTML页面所在域之外的某个域中的URL，例如：

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点就可以在必要时通过不同的域来提供JavaScript文件。不过，在访问自己不能控制的服务器上的JavaScript文件时则要多加小心。如果不幸遇到了怀有恶意的程序员，那他们随时都可能替换该文件中的代码。因此，如果想包含来自不同域的代码，则要么你是那个域的所有者，要么那个域的所有者值得信赖。

无论如何包含代码，只要不存在defer 和async 属性，浏览器都会按照<script> 元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script> 元素包含的代码解析完成后，第二个<script> 包含的代码才会被解析，然后才是第三个、第四个……

2.1.1　标签的位置

按照惯例，所有<script> 元素都应该放在页面的<head> 元素中，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

这种做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文档的<head> 元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body> 标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body> 元素中，放在页面的内容后面，如下例所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
    <!-- 这里放内容 -->
    <script type="text/javascript" src="example1.js"></script>


    <script type="text/javascript" src="example2.js"></script>


  </body>
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

2.1.2　延迟脚本

HTML 4.01为<script> 标签定义了defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script> 元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>


    <script type="text/javascript" defer="defer" src="example2.js"></script>


  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

在这个例子中，虽然我们把<script> 元素放在了文档的<head> 元素中，但其中包含的脚本将延迟到浏览器遇到</html> 标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded 事件（详见第13章）执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本。

前面提到过，defer 属性只适用于外部脚本文件。这一点在HTML5中已经明确规定，因此支持HTML5的实现会忽略给嵌入脚本设置的defer 属性。IE4～IE7还支持对嵌入脚本的defer 属性，但IE8及之后版本则完全支持HTML5规定的行为。

IE4、Firefox 3.5、Safari 5和Chrome是最早支持defer 属性的浏览器。其他浏览器会忽略这个属性，像平常一样处理脚本。为此，把延迟脚本放在页面底部仍然是最佳选择。

在XHTML文档中，要把defer 属性设置为defer="defer" 。

2.1.3　异步脚本

HTML5为<script> 元素定义了async 属性。这个属性与defer 属性类似，都用于改变处理脚本的行为。同样与defer 类似，async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer 不同的是，标记为async 的脚本并不保证按照指定它们的先后顺序执行。例如：

<!DOCTYPE html>
<html>  
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" async src="example1.js"></script>


    <script type="text/javascript" async src="example2.js"></script>


  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。

异步脚本一定会在页面的load 事件前执行，但可能会在DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5和Chrome。

在XHTML文档中，要把async 属性设置为async="async" 。

2.1.4　在XHTML中的用法 ¹

¹ HTML5正快速地被前端开发人员采用，建议读者在学习和开发中遵循HTML5标准，本节内容可以跳过。

可扩展超文本标记语言，即XHTML（Extensible HyperText Markup Language），是将HTML作为XML的应用而重新定义的一个标准。编写XHTML代码的规则要比编写HTML严格得多，而且直接影响能否在嵌入JavaScript代码时使用<script/> 标签。以下面的代码块为例，虽然它们在HTML中是有效的，但在XHTML中则是无效的。

<script type="text/javascript">
    function compare(a, b) {
        if (a < b) {
            alert("A is less than B");
        } else if (a > b) {
            alert("A is greater than B");
        } else {
            alert("A is equal to B");
        }
    }
</script>

在HTML中，有特殊的规则用以确定<script> 元素中的哪些内容可以被解析，但这些特殊的规则在XHTML中不适用。这里比较语句a < b 中的小于号（<）在XHTML中将被当作开始一个新标签来解析。但是作为标签来讲，小于号后面不能跟空格，因此就会导致语法错误。

避免在XHTML中出现类似语法错误的方法有两个。一是用相应的HTML实体（< ）替换代码中所有的小于号（<），替换后的代码类似如下所示：

<script type="text/javascript">
    function compare(a, b) {
        if (a &lt; b) {


            alert("A is less than B");
        } else if (a > b) {
            alert("A is greater than B");
        } else {
            alert("A is equal to B");
        }
    }
</script>

虽然这样可以让代码在XHTML中正常运行，但却导致代码不好理解了。为此，我们可以考虑采用另一个方法。

保证让相同代码在XHTML中正常运行的第二个方法，就是用一个CData片段来包含JavaScript代码。在XHTML（XML）中，CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。因此，在CData片段中就可以使用任意字符——小于号当然也没有问题，而且不会导致语法错误。引入CData片段后的JavaScript代码块如下所示：

<script type="text/javascript"><![CDATA[


    function compare(a, b) {
        if (a < b) {
            alert("A is less than B");
        } else if (a > b) {
            alert("A is greater than B");
        } else {
            alert("A is equal to B");
        }
    }
]]></script>

在兼容XHTML的浏览器中，这个方法可以解决问题。但实际上，还有不少浏览器不兼容XHTML，因而不支持CData片段。怎么办呢？再使用JavaScript注释将CData标记注释掉就可以了：

<script type="text/javascript">
//<![CDATA[


    function compare(a, b) {
        if (a < b) {
            alert("A is less than B");
        } else if (a > b) {
            alert("A is greater than B");
        } else {
            alert("A is equal to B");
        }
    }
//]]>


</script>

这种格式在所有现代浏览器中都可以正常使用。虽然有几分hack的味道，但它能通过XHTML验证，而且对XHTML之前的浏览器也会平稳退化。

在将页面的MIME类型指定为"application/xhtml+xml" 的情况下会触发XHTML模式。并不是所有浏览器都支持以这种方式提供XHTML文档。

2.1.5　不推荐使用的语法

在最早引入<script> 元素的时候，该元素与传统HTML的解析规则是有冲突的。由于要对这个元素应用特殊的解析规则，因此在那些不支持JavaScript的浏览器（最典型的是Mosaic）中就会导致问题。具体来说，不支持JavaScript的浏览器会把<script> 元素的内容直接输出到页面中，因而会破坏页面的布局和外观。

Netscape与Mosaic协商并提出了一个解决方案，让不支持<script> 元素的浏览器能够隐藏嵌入的JavaScript代码。这个方案就是把JavaScript代码包含在一个HTML注释中，像下面这样：

<script><!--


    function sayHi(){
        alert("Hi!");
    }
//--></script>

给脚本加上HTML注释后，Mosaic等浏览器就会忽略<script> 标签中的内容；而那些支持JavaScript的浏览器在遇到这种情况时，则必须进一步确认其中是否包含需要解析的JavaScript代码。

虽然这种注释JavaScript代码的格式得到了所有浏览器的认可，也能被正确解释，但由于所有浏览器都已经支持JavaScript，因此也就没有必要再使用这种格式了。在XHTML模式下，因为脚本包含在XML注释中，所以脚本会被忽略。

2.2　嵌入代码与外部文件

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调如下优点。

可维护性 ：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
可缓存 ：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
适应未来 ：通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

2.3　文档模式

IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型（doctype）切换实现的。最初的两种文档模式是：混杂模式 （quirks mode）² 和标准模式 （standards mode）。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。本书将在必要时再讨论这些因文档模式而影响JavaScript执行的情况。

² 这里quirks mode的译法源自Firefox 3.5.5中文版。

在IE引入文档模式的概念后，其他浏览器也纷纷效仿。在此之后，IE又提出一种所谓的准标准模式 （almost standards mode）。这种模式下的浏览器特性有很多都是符合标准的，但也不尽然。不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。

对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE html>

而对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，如下所示：

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
< !DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。因此，当有人提到“标准模式”时，有可能是指这两种模式中的任何一种。而且，检测文档模式（本书后面将会讨论）时也不会发现什么不同。本书后面提到标准模式时，指的是除混杂模式之外的其他模式。

2.4　<noscript>元素

早期浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript> 元素，用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body> 中的任何HTML元素——<script> 元素除外。包含在<noscript> 元素中的内容只有在下列情况下才会显示出来：

浏览器不支持脚本；
浏览器支持脚本，但脚本被禁用。

符合上述任何一个条件，浏览器都会显示<noscript> 中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript> 中的内容。

请看下面这个简单的例子：

<html> 
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
  </head>
  <body>
    <noscript>


      <p>本页面需要浏览器支持（启用）JavaScript。


    </noscript>


  </body>
</html>

这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。

2.5　小结

把JavaScript插入到HTML页面中要使用<script> 元素。使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript文件。而我们需要注意的地方有：

在包含外部JavaScript文件时，必须将src 属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
所有<script> 元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer 和async 属性的情况下，只有在解析完前面<script> 元素中的代码之后，才会开始解析后面<script> 元素中的代码。
由于浏览器会先解析完不使用defer 属性的<script> 元素中的代码，然后再解析后面的内容，所以一般应该把<script> 元素放在页面最后，即主要内容后面，</body> 标签前面。
使用defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
使用async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

另外，使用<noscript> 元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript> 元素中的任何内容。

第3章　基本概念

本章内容

语法
数据类型
流控制语句
理解函数

任何语言的核心都必然会描述这门语言最基本的工作原理。而描述的内容通常都要涉及这门语言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念。如前所述，ECMA-262通过叫做ECMAScript的“伪语言”为我们描述了JavaScript的所有这些基本概念。

目前，ECMA-262第3版中定义的ECMAScript是各浏览器实现最多的一个版本。ECMA-262第5版是浏览器接下来实现的版本，但截止到2011年底，还没有浏览器完全实现了这个版本。为此，本章将主要按照第3版定义的ECMAScript介绍这门语言的基本概念，并就第5版的变化给出说明。

3.1　语法

ECMAScript的语法大量借鉴了C及其他类C语言（如Java和Perl）的语法。因此，熟悉这些语言的开发人员在接受ECMAScript更加宽松的语法时，一定会有一种轻松自在的感觉。

3.1.1　区分大小写

要理解的第一个概念就是ECMAScript中的一切（变量、函数名和操作符）都区分大小写。这也就意味着，变量名test 和变量名Test 分别表示两个不同的变量，而函数名不能使用typeof ，因为它是一个关键字（3.2节介绍关键字），但typeOf 则完全可以是一个有效的函数名。

3.1.2　标识符

所谓标识符 ，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（_ ）或一个美元符号（$ ）；
其他字符可以是字母、下划线、美元符号或数字。

标识符中的字母也可以包含扩展的ASCII或Unicode字母字符（如À和Æ），但我们不推荐这样做。

按照惯例，ECMAScript标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个有意义的单词的首字母大写，例如：

firstSecond 
myCar
doSomethingImportant

虽然没有谁强制要求必须采用这种格式，但为了与ECMAScript内置的函数和对象命名格式保持一致，可以将其当作一种最佳实践。

不能把关键字、保留字、 true 、 false 和 null 用作标识符。3.2节将介绍更多相关内容。

3.1.3　注释

ECMAScript使用C风格的注释，包括单行注释和块级注释。单行注释以两个斜杠开头，如下所示：

// 单行注释

块级注释以一个斜杠和一个星号（/* ）开头，以一个星号和一个斜杠（*/ ）结尾，如下所示：

/*
 *  这是一个多行
 *  （块级）注释
 */

虽然上面注释中的第二和第三行都以一个星号开头，但这不是必需的。之所以添加那两个星号，纯粹是为了提高注释的可读性（这种格式在企业级应用程序中极其常见）。

3.1.4　严格模式

ECMAScript 5引入了严格模式（strict mode）的概念。严格模式是为JavaScript定义了一种不同的解析与执行模型。在严格模式下，ECMAScript 3中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误。要在整个脚本中启用严格模式，可以在顶部添加如下代码：

"use strict";

这行代码看起来像是字符串，而且也没有赋值给任何变量，但其实它是一个编译指示（pragma），用于告诉支持的JavaScript引擎切换到严格模式。这是为不破坏ECMAScript 3语法而特意选定的语法。

在函数内部的上方包含这条编译指示，也可以指定函数在严格模式下执行：

function doSomething(){
    "use strict"; 
    //函数体
}

严格模式下，JavaScript的执行结果会有很大不同，因此本书将会随时指出严格模式下的区别。支持严格模式的浏览器包括IE10+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。

3.1.5　语句

ECMAScript中的语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾，如下例所示：

var sum = a + b                 // 即使没有分号也是有效的语句——不推荐
var diff = a - b;               // 有效的语句——推荐

虽然语句结尾的分号不是必需的，但我们建议任何时候都不要省略它。因为加上这个分号可以避免很多错误（例如不完整的输入），开发人员也可以放心地通过删除多余的空格来压缩ECMAScript代码（代码行结尾处没有分号会导致压缩错误）。另外，加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了。

可以使用C风格的语法把多条语句组合到一个代码块中，即代码块以左花括号（{ ）开头，以右花括号（} ）结尾：

if (test){
    test = false;
    alert(test);
}

虽然条件控制语句（如if 语句）只在执行多条语句的情况下才要求使用代码块，但最佳实践是始终在控制语句中使用代码块——即使代码块中只有一条语句，例如：

if (test)
    alert(test);       // 有效但容易出错，不要使用

if (test){             // 推荐使用
    alert(test);
}

在控制语句中使用代码块可以让编码意图更加清晰，而且也能降低修改代码时出错的几率。

3.2　关键字和保留字

ECMA-262描述了一组具有特定用途的关键字 ，这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是ECMAScript的全部关键字（带* 号上标的是第5版新增的关键字）：

break         do           instanceof        typeof
case          else         new               var
catch         finally      return            void
continue      for          switch            while
debugger*     function     this              with
default       if           throw
delete        in           try

ECMA-262还描述了另外一组不能用作标识符的保留字 。尽管保留字在这门语言中还没有任何特定的用途，但它们有可能在将来被用作关键字。以下是ECMA-262第3版定义的全部保留字：

abstract      enum            int            short
boolean       export          interface      static
byte          extends         long           super
char          final           native         synchronized
class         float           package        throws
const         goto            private        transient
debugger      implements      protected      volatile
double        import          public

第5版把在非严格模式下运行时的保留字缩减为下列这些：

class          enum          extends         super
const          export        import

在严格模式下，第5版还对以下保留字施加了限制：

implements     package       public
interface      private       static
let            protected     yield

注意，let 和yield 是第5版新增的保留字；其他保留字都是第3版定义的。为了最大程度地保证兼容性，建议读者将第3版定义的保留字外加let 和yield 作为编程时的参考。

在实现ECMAScript 3的JavaScript引擎中使用关键字作标识符，会导致“Identifier Expected”错误。而使用保留字作标识符可能会也可能不会导致相同的错误，具体取决于特定的引擎。

第5版对使用关键字和保留字的规则进行了少许修改。关键字和保留字虽然仍然不能作为标识符使用，但现在可以用作对象的属性名。一般来说，最好都不要使用关键字和保留字作为标识符和属性名，以便与将来的ECMAScript版本兼容。

除了上面列出的保留字和关键字，ECMA-262第5版对eval 和arguments 还施加了限制。在严格模式下，这两个名字也不能作为标识符或属性名，否则会抛出错误。

3.3　变量

ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用var 操作符（注意var 是一个关键字），后跟变量名（即一个标识符），如下所示：

var message;

这行代码定义了一个名为message 的变量，该变量可以用来保存任何值（像这样未经过初始化的变量，会保存一个特殊的值——undefined ，相关内容将在3.4节讨论）。ECMAScript也支持直接初始化变量，因此在定义变量的同时就可以设置变量的值，如下所示：

var message = "hi";

在此，变量message 中保存了一个字符串值"hi" 。像这样初始化变量并不会把它标记为字符串类型；初始化的过程就是给变量赋一个值那么简单。因此，可以在修改变量值的同时修改值的类型，如下所示：

var message = "hi";
message = 100;         // 有效，但不推荐

在这个例子中，变量message 一开始保存了一个字符串值"hi" ，然后该值又被一个数字值100取代。虽然我们不建议修改变量所保存值的类型，但这种操作在ECMAScript中完全有效。

有一点必须注意，即使用var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用var 定义一个变量，那么这个变量在函数退出后就会被销毁，例如：

function test(){
    var message = "hi"; // 局部变量
}
test();
alert(message); // 错误！

这里，变量message 是在函数中使用var 定义的。当函数被调用时，就会创建该变量并为其赋值。而在此之后，这个变量又会立即被销毁，因此例子中的下一行代码就会导致错误。不过，可以像下面这样省略var 操作符，从而创建一个全局变量：

function test(){
    message = "hi"; // 全局变量


}
test();
alert(message); // "hi"

这个例子省略了var 操作符，因而message 就成了全局变量。这样，只要调用过一次test() 函数，这个变量就有了定义，就可以在函数外部的任何地方被访问到。

虽然省略 var 操作符可以定义全局变量，但这也不是我们推荐的做法。因为在局部作用域中定义的全局变量很难维护，而且如果有意地忽略了 var 操作符，也会由于相应变量不会马上就有定义而导致不必要的混乱。给未经声明的变量赋值在严格模式下会导致抛出ReferenceError 错误。

可以使用一条语句定义多个变量，只要像下面这样把每个变量（初始化或不初始化均可）用逗号分隔开即可：

var message = "hi",
    found = false,
    age = 29;

这个例子定义并初始化了3个变量。同样由于ECMAScript是松散类型的，因而使用不同类型初始化变量的操作可以放在一条语句中来完成。虽然代码里的换行和变量缩进不是必需的，但这样做可以提高可读性。

在严格模式下，不能定义名为eval 或arguments 的变量，否则会导致语法错误。

3.4　数据类型

ECMAScript中有5种简单数据类型（也称为基本数据类型）：Undefined 、Null 、Boolean 、Number 和String 。还有1种复杂数据类型——Object ，Object 本质上是由一组无序的名值对组成的。ECMAScript不支持任何创建自定义类型的机制，而所有值最终都将是上述6种数据类型之一。乍一看，好像只有6种数据类型不足以表示所有数据；但是，由于ECMAScript数据类型具有动态性，因此的确没有再定义其他数据类型的必要了。

3.4.1　`typeof` 操作符

鉴于ECMAScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符。对一个值使用typeof 操作符可能返回下列某个字符串：

"undefined" ——如果这个值未定义；
"boolean" ——如果这个值是布尔值；
"string" ——如果这个值是字符串；
"number" ——如果这个值是数值；
"object" ——如果这个值是对象或null ；
"function" ——如果这个值是函数。

下面是几个使用typeof 操作符的例子：

var message = "some string";
alert(typeof message);     // "string"
alert(typeof(message));    // "string"
alert(typeof 95);          // "number"

TypeofExample01.htm

这几个例子说明，typeof 操作符的操作数可以是变量（message ），也可以是数值字面量。注意，typeof 是一个操作符而不是函数，因此例子中的圆括号尽管可以使用，但不是必需的。

有些时候，typeof 操作符会返回一些令人迷惑但技术上却正确的值。比如，调用typeof null 会返回"object" ，因为特殊值null 被认为是一个空的对象引用。Safari 5及之前版本、Chrome 7及之前版本在对正则表达式调用typeof 操作符时会返回"function" ，而其他浏览器在这种情况下会返回"object" 。

从技术角度讲，函数在ECMAScript中是对象，不是一种数据类型。然而，函数也确实有一些特殊的属性，因此通过 typeof 操作符来区分函数和其他对象是有必要的。

3.4.2　`Undefined` 类型

Undefined 类型只有一个值，即特殊的undefined 。在使用var 声明变量但未对其加以初始化时，这个变量的值就是undefined ，例如：

var message;
alert(message == undefined); //true

UndefinedExample01.htm

这个例子只声明了变量message ，但未对其进行初始化。比较这个变量与undefined 字面量，结果表明它们是相等的。这个例子与下面的例子是等价的：

var message = undefined;


alert(message == undefined); //true

UndefinedExample02.htm

这个例子使用undefined 值显式初始化了变量message 。但我们没有必要这么做，因为未经初始化的值默认就会取得undefined 值。

一般而言，不存在需要显式地把一个变量设置为 undefined 值的情况。字面值 undefined 的主要目的是用于比较，而ECMA-262第3版之前的版本中并没有规定这个值。第3版引入这个值是为了正式区分空对象指针与未经初始化的变量。

不过，包含undefined 值的变量与尚未定义的变量还是不一样的。看看下面这个例子：

var message; // 这个变量声明之后默认取得了undefined值

// 下面这个变量并没有声明
// var age

alert(message);     // "undefined"
alert(age);         // 产生错误

UndefinedExample03.htm

运行以上代码，第一个警告框会显示变量message 的值，即"undefined" 。而第二个警告框——由于传递给alert() 函数的是尚未声明的变量age ——则会导致一个错误。对于尚未声明过的变量，只能执行一项操作，即使用typeof 操作符检测其数据类型（对未经声明的变量调用delete 不会导致错误，但这样做没什么实际意义，而且在严格模式下确实会导致错误）。

然而，令人困惑的是：对未初始化的变量执行typeof 操作符会返回undefined 值，而对未声明的变量执行typeof 操作符同样也会返回undefined 值。来看下面的例子：

var message; // 这个变量声明之后默认取得了undefined值

// 下面这个变量并没有声明
// var age

alert(typeof message);     // "undefined"


alert(typeof age);         // "undefined"

UndefinedExample04.htm

结果表明，对未初始化和未声明的变量执行typeof 操作符都返回了undefined 值；这个结果有其逻辑上的合理性。因为虽然这两种变量从技术角度看有本质区别，但实际上无论对哪种变量也不可能执行真正的操作。

即便未初始化的变量会自动被赋予 undefined 值，但显式地初始化变量依然是明智的选择。如果能够做到这一点，那么当 typeof 操作符返回 "undefined" 值时，我们就知道被检测的变量还没有被声明，而不是尚未初始化。

3.4.3　`Null` 类型

Null 类型是第二个只有一个值的数据类型，这个特殊的值是null 。从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用typeof 操作符检测null 值时会返回"object" 的原因，如下面的例子所示：

var car = null;
alert(typeof car);     // "object"

NullExample01.htm

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null 而不是其他值。这样一来，只要直接检查null 值就可以知道相应的变量是否已经保存了一个对象的引用了，如下面的例子所示：

if (car != null){
    // 对car对象执行某些操作
}

实际上，undefined 值是派生自null 值的，因此ECMA-262规定对它们的相等性测试要返回true ：

alert(null == undefined);    //true

NullExample02.htm

这里，位于null 和undefined 之间的相等操作符（== ）总是返回true ，不过要注意的是，这个操作符出于比较的目的会转换其操作数（本章后面将详细介绍相关内容）。

尽管null 和undefined 有这样的关系，但它们的用途完全不同。如前所述，无论在什么情况下都没有必要把一个变量的值显式地设置为undefined ，可是同样的规则对null 却不适用。换句话说，只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存null 值。这样做不仅可以体现null 作为空对象指针的惯例，而且也有助于进一步区分null 和undefined 。

3.4.4　`Boolean` 类型

Boolean 类型是ECMAScript中使用得最多的一种类型，该类型只有两个字面值：true 和false 。这两个值与数字值不是一回事，因此true 不一定等于1，而false 也不一定等于0。以下是为变量赋Boolean 类型值的例子：

var found = true;
var lost = false;

需要注意的是，Boolean 类型的字面值true 和false 是区分大小写的。也就是说，True 和False （以及其他的混合大小写形式）都不是Boolean 值，只是标识符。

虽然Boolean 类型的字面值只有两个，但ECMAScript中所有类型的值都有与这两个Boolean 值等价的值。要将一个值转换为其对应的Boolean 值，可以调用转型函数Boolean() ，如下例所示：

var message = "Hello world!";
var messageAsBoolean = Boolean(message);

BooleanExample01.htm

在这个例子中，字符串message 被转换成了一个Boolean 值，该值被保存在messageAsBoolean 变量中。可以对任何数据类型的值调用Boolean() 函数，而且总会返回一个Boolean 值。至于返回的这个值是true 还是false ，取决于要转换值的数据类型及其实际值。下表给出了各种数据类型及其对应的转换规则。

数据类型	转换为true的值	转换为false的值
`Boolean`	`true`	`false`
`String`	任何非空字符串	`""` （空字符串）
`Number`	任何非零数字值（包括无穷大）	0和`NaN` （参见本章后面有关NaN的内容）
`Object`	任何对象	`bull`
`Undefined`	n/a¹	`undefined`

¹ n/a（或N/A），是not applicable的缩写，意思是“不适用”。

这些转换规则对理解流控制语句（如if 语句）自动执行相应的Boolean 转换非常重要，请看下面的代码：

var message = "Hello world!";
if (message){
    alert("Value is true");
}

BooleanExample02.htm

运行这个示例，就会显示一个警告框，因为字符串message 被自动转换成了对应的Boolean 值（true ）。由于存在这种自动执行的Boolean 转换，因此确切地知道在流控制语句中使用的是什么变量至关重要。错误地使用一个对象而不是一个Boolean 值，就有可能彻底改变应用程序的流程。

3.4.5　`Number` 类型

Number 类型应该是ECMAScript中最令人关注的数据类型了，这种类型使用IEEE754格式来表示整数和浮点数值（浮点数值在某些语言中也被称为双精度数值）。为支持各种数值类型，ECMA-262定义了不同的数值字面量格式。

最基本的数值字面量格式是十进制整数，十进制整数可以像下面这样直接在代码中输入：

var intNum = 55;                // 整数

除了以十进制表示外，整数还可以通过八进制（以8为基数）或十六进制（以16为基数）的字面值来表示。其中，八进制字面值的第一位必须是零（0），然后是八进制数字序列（0～7）。如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析。请看下面的例子：

var octalNum1 = 070;            // 八进制的56
var octalNum2 = 079;            // 无效的八进制数值——解析为79
var octalNum3 = 08;             // 无效的八进制数值——解析为8

八进制字面量在严格模式下是无效的，会导致支持的JavaScript引擎抛出错误。

十六进制字面值的前两位必须是0x，后跟任何十六进制数字（0～9及A～F）。其中，字母A～F可以大写，也可以小写。如下面的例子所示：

var hexNum1 = 0xA;              // 十六进制的10
var hexNum2 = 0x1f;             // 十六进制的31

在进行算术计算时，所有以八进制和十六进制表示的数值最终都将被转换成十进制数值。

鉴于JavaScript中保存数值的方式，可以保存正零（+0）和负零（-0）。正零和负零被认为相等，但为了读者更好地理解上下文，这里特别做此说明。

1. 浮点数值

所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。虽然小数点前面可以没有整数，但我们不推荐这种写法。以下是浮点数值的几个例子：

var floatNum1 = 1.1;
var floatNum2 = 0.1;
var floatNum3 = .1;             // 有效，但不推荐

由于保存浮点数值需要的内存空间是保存整数值的两倍，因此ECMAScript会不失时机地将浮点数值转换为整数值。显然，如果小数点后面没有跟任何数字，那么这个数值就可以作为整数值来保存。同样地，如果浮点数值本身表示的就是一个整数（如1.0），那么该值也会被转换为整数，如下面的例子所示：

var floatNum1 = 1.;             // 小数点后面没有数字——解析为1
var floatNum2 = 10.0;           // 整数——解析为10

对于那些极大或极小的数值，可以用e表示法（即科学计数法）表示的浮点数值表示。用e表示法表示的数值等于e前面的数值乘以10的指数次幂。ECMAScript中e表示法的格式也是如此，即前面是一个数值（可以是整数也可以是浮点数），中间是一个大写或小写的字母E，后面是10的幂中的指数，该幂值将用来与前面的数相乘。下面是一个使用e表示法表示数值的例子：

var floatNum = 3.125e7;         // 等于31250000

在这个例子中，使用e表示法表示的变量floatNum 的形式虽然简洁，但它的实际值则是31250000。在此，e表示法的实际含义就是“3.125乘以107”。

也可以使用e表示法表示极小的数值，如0.00000000000000003，这个数值可以使用更简洁的3e-17表示。在默认情况下，ECMASctipt会将那些小数点后面带有6个零以上的浮点数值转换为以e表示法表示的数值（例如，0.0000003会被转换成3e-7）。

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1加0.2的结果不是0.3，而是0.30000000000000004。这个小小的舍入误差会导致无法测试特定的浮点数值。例如：

if (a + b == 0.3){          // 不要做这样的测试！
    alert("You got 0.3.");
}

在这个例子中，我们测试的是两个数的和是不是等于0.3。如果这两个数是0.05和0.25，或者是0.15和0.15都不会有问题。而如前所述，如果这两个数是0.1和0.2，那么测试将无法通过。因此，永远不要测试某个特定的浮点数值。

关于浮点数值计算会产生舍入误差的问题，有一点需要明确：这是使用基于IEEE754数值的浮点计算的通病，ECMAScript并非独此一家；其他使用相同数值格式的语言也存在这个问题。

2. 数值范围

由于内存的限制，ECMAScript并不能保存世界上所有的数值。ECMAScript能够表示的最小数值保存在Number.MIN_VALUE 中——在大多数浏览器中，这个值是5e-324；能够表示的最大数值保存在Number.MAX_VALUE 中——在大多数浏览器中，这个值是1.7976931348623157e+308。如果某次计算的结果得到了一个超出JavaScript数值范围的值，那么这个数值将被自动转换成特殊的Infinity 值。具体来说，如果这个数值是负数，则会被转换成-Infinity （负无穷），如果这个数值是正数，则会被转换成Infinity （正无穷）。

如上所述，如果某次计算返回了正或负的Infinity 值，那么该值将无法继续参与下一次的计算，因为Infinity 不是能够参与计算的数值。要想确定一个数值是不是有穷的（换句话说，是不是位于最小和最大的数值之间），可以使用isFinite() 函数。这个函数在参数位于最小与最大数值之间时会返回true ，如下面的例子所示：

var result = Number.MAX_VALUE + Number.MAX_VALUE;
alert(isFinite(result));   //false

尽管在计算中很少出现某些值超出表示范围的情况，但在执行极小或极大数值的计算时，检测监控这些值是可能的，也是必需的。

访问 Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY 也可以得到负和正 Infinity 的值。可以想见，这两个属性中分别保存着 -Infinity 和 Infinity 。

3. NaN

NaN ，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以0都会导致错误，从而停止代码执行。但在ECMAScript中，任何数值除以0会返回NaN ，因此不会影响其他代码的执行。

NaN 本身有两个非同寻常的特点。首先，任何涉及NaN 的操作（例如NaN /10）都会返回NaN ，这个特点在多步计算中有可能导致问题。其次，NaN 与任何值都不相等，包括NaN 本身。例如，下面的代码会返回false ：

alert(NaN == NaN);      //false

针对NaN 的这两个特点，ECMAScript定义了isNaN() 函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN() 在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串"10" 或Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回true 。请看下面的例子：

alert(isNaN(NaN));              //true
alert(isNaN(10));               //false（10是一个数值）
alert(isNaN("10"));             //false（可以被转换成数值10）
alert(isNaN("blue"));           //true（不能转换成数值）
alert(isNaN(true));             //false（可以被转换成数值1）

NumberExample03.htm

这个例子测试了5个不同的值。测试的第一个值是NaN 本身，结果当然会返回true 。然后分别测试了数值10和字符串"10" ，结果这两个测试都返回了false ，因为前者本身就是数值，而后者可以被转换成数值。但是，字符串"blue" 不能被转换成数值，因此函数返回了true 。由于Boolean 值true 可以转换成数值1，因此函数返回false 。

尽管有点儿不可思议，但 isNaN() 确实也适用于对象。在基于对象调用 isNaN() 函数时，会首先调用对象的 valueOf() 方法，然后确定该方法返回的值是否可以转换为数值。如果不能，则基于这个返回值再调用 toString() 方法，再测试返回值。而这个过程也是ECMAScript中内置函数和操作符的一般执行流程，更详细的内容请参见3.5节。

4. 数值转换

有3个函数可以把非数值转换为数值：Number() 、parseInt() 和parseFloat() 。第一个函数，即转型函数Number() 可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值。这3个函数对于同样的输入会有返回不同的结果。

Number() 函数的转换规则如下。

如果是Boolean 值，true 和false 将分别被转换为1和0。
如果是数字值，只是简单的传入和返回。
如果是null 值，返回0。
如果是undefined ，返回NaN 。
如果是字符串，遵循下列规则：
- 如果字符串中只包含数字（包括前面带加号或头号的情况），则将其转换为十进制数值，即"1" 会变成1，"123" 会变成123，而"011" 会变成11（注意：前导的零被忽略了）；
- 如果字符串中包含有效的浮点格式，如"1.1" ，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
- 如果字符串中包含有效的十六进制格式，例如"0xf" ，则将其转换为相同大小的十进制整数值；
- 如果字符串是空的（不包含任何字符），则将其转换为0；
- 如果字符串中包含除上述格式之外的字符，则将其转换为NaN 。
如果是对象，则调用对象的valueOf() 方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN ，则调用对象的toString() 方法，然后再次依照前面的规则转换返回的字符串值。

根据这么多的规则使用Number() 把各种数据类型转换为数值确实有点复杂。下面还是给出几个具体的例子吧。

var num1 = Number("Hello world!");      //NaN
var num2 = Number("");                  //0
var num3 = Number("000011");            //11
var num4 = Number(true);                //1

NumberExample04.htm

首先，字符串"Hello world!" 会被转换为NaN ，因为其中不包含任何有意义的数字值。空字符串会被转换为0。字符串"000011" 会被转换为11，因为忽略了其前导的零。最后，true 值被转换为1。

一元加操作符（3.5.1节将介绍）的操作与Number() 函数相同。

由于Number() 函数在转换字符串时比较复杂而且不够合理，因此在处理整数的时候更常用的是parseInt() 函数。parseInt() 函数在转换字符串时，更多的是看其是否符合数值模式。它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt() 就会返回NaN ；也就是说，用parseInt() 转换空字符串会返回NaN （Number() 对空字符返回0）。如果第一个字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。例如，"1234blue" 会被转换为1234，因为"blue" 会被完全忽略。类似地，"22.5" 会被转换为22，因为小数点并不是有效的数字字符。

如果字符串中的第一个字符是数字字符，parseInt() 也能够识别出各种整数格式（即前面讨论的十进制、八进制和十六进制数）。也就是说，如果字符串以"0x" 开头且后跟数字字符，就会将其当作一个十六进制整数；如果字符串以"0" 开头且后跟数字字符，则会将其当作一个八进制数来解析。

为了更好地理解parseInt() 函数的转换规则，下面给出一些例子：

var num1 = parseInt("1234blue");        // 1234
var num2 = parseInt("");                // NaN
var num3 = parseInt("0xA");             // 10（十六进制数）
var num4 = parseInt(22.5);              // 22
var num5 = parseInt("070");             // 56（八进制数）
var num6 = parseInt("70");              // 70（十进制数）
var num7 = parseInt("0xf");             // 15（十六进制数）

NumberExample05.htm

在使用parseInt() 解析像八进制字面量的字符串时，ECMAScript 3和5存在分歧。例如：

//ECMAScript 3认为是56（八进制），ECMAScript 5认为是0（十进制）
var num = parseInt("070");

在ECMAScript 3 JavaScript引擎中，"070" 被当成八进制字面量，因此转换后的值是十进制的56。而在ECMAScript 5 JavaScript引擎中，parseInt() 已经不具有解析八进制值的能力，因此前导的零会被认为无效，从而将这个值当成"0" ，结果就得到十进制的0。在ECMAScript 5中，即使是在严格模式下也会如此。

为了消除在使用parseInt() 函数时可能导致的上述困惑，可以为这个函数提供第二个参数：转换时使用的基数（即多少进制）。如果知道要解析的值是十六进制格式的字符串，那么指定基数16作为第二个参数，可以保证得到正确的结果，例如：

var num = parseInt("0xAF", 16);         //175

实际上，如果指定了16作为第二个参数，字符串可以不带前面的"0x" ，如下所示：

var num1 = parseInt("AF", 16);          //175
var num2 = parseInt("AF");              //NaN

NumberExample06.htm

这个例子中的第一个转换成功了，而第二个则失败了。差别在于第一个转换传入了基数，明确告诉parseInt() 要解析一个十六进制格式的字符串；而第二个转换发现第一个字符不是数字字符，因此就自动终止了。

指定基数会影响到转换的输出结果。例如：

var num1 = parseInt("10", 2);           //2   （按二进制解析）
var num2 = parseInt("10", 8);           //8   （按八进制解析）
var num3 = parseInt("10", 10);          //10  （按十进制解析）
var num4 = parseInt("10", 16);          //16  （按十六进制解析）

NumberExample07.htm

不指定基数意味着让parseInt() 决定如何解析输入的字符串，因此为了避免错误的解析，我们建议无论在什么情况下都明确指定基数。

多数情况下，我们要解析的都是十进制数值，因此始终将10作为第二个参数是非常必要的。

与parseInt() 函数类似，parseFloat() 也是从第一个字符（位置0）开始解析每个字符。而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。也就是说，字符串中的第一个小数点是有效的，而第二个小数点就是无效的了，因此它后面的字符串将被忽略。举例来说，"22.34.5" 将会被转换为22.34。

除了第一个小数点有效之外，parseFloat() 与parseInt() 的第二个区别在于它始终都会忽略前导的零。parseFloat() 可以识别前面讨论过的所有浮点数值格式，也包括十进制整数格式。但十六进制格式的字符串则始终会被转换成0。由于parseFloat() 只解析十进制值，因此它没有用第二个参数指定基数的用法。最后还要注意一点：如果字符串包含的是一个可解析为整数的数（没有小数点，或者小数点后都是零），parseFloat() 会返回整数。以下是使用parseFloat() 转换数值的几个典型示例。

var num1 = parseFloat("1234blue");              //1234 （整数）
var num2 = parseFloat("0xA");                   //0
var num3 = parseFloat("22.5");                  //22.5
var num4 = parseFloat("22.34.5");               //22.34
var num5 = parseFloat("0908.5");                //908.5
var num6 = parseFloat("3.125e7");               //31250000

NumberExample08.htm

3.4.6　`String` 类型

String 类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号（"）或单引号（'）表示，因此下面两种字符串的写法都是有效的：

var firstName = "Nicholas";
var lastName = 'Zakas';

与PHP中的双引号和单引号会影响对字符串的解释方式不同，ECMAScript中的这两种语法形式没有什么区别。用双引号表示的字符串和用单引号表示的字符串完全相同。不过，以双引号开头的字符串也必须以双引号结尾，而以单引号开头的字符串必须以单引号结尾。例如，下面这种字符串表示法会导致语法错误：

var firstName = 'Nicholas"; // 语法错误（左右引号必须匹配）

1. 字符字面量

String 数据类型包含一些特殊的字符字面量，也叫转义序列，用于表示非打印字符，或者具有其他用途的字符。这些字符字面量如下表所示：

字　面　量	含　　义
`\n`	换行
`\t`	制表
`\b`	空格
`\r`	回车
`\f`	进纸
`\\`	斜杠
`\'`	单引号（`'` ），在用单引号表示的字符串中使用。例如：`'He said, \'hey.\''`
`\"`	双引号（`"` ），在用双引号表示的字符串中使用。例如：`"He said, \"hey.\""`
`\xnn`	以十六进制代码`nn` 表示的一个字符（其中`n` 为0～F）。例如，`\x41` 表示`"A"`
`\unnnn`	以十六进制代码`nnnn` 表示的一个Unicode字符（其中`n` 为0～F）。例如，\u03a3表示希腊字符Σ

这些字符字面量可以出现在字符串中的任意位置，而且也将被作为一个字符来解析，如下面的例子所示：

var text = "This is the letter sigma: \u03a3.";

这个例子中的变量text 有28个字符，其中6个字符长的转义序列表示1个字符。

任何字符串的长度都可以通过访问其length 属性取得，例如：

alert(text.length); // 输出28

这个属性返回了这个字符串中16位字符的数目。如果字符串中包含双字节字符，那么length 属性可能不会精确地返回字符串中的字符数目。

2. 字符串的特点

ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，例如：

var lang = "Java";
lang = lang + "Script";

以上示例中的变量lang 开始时包含字符串"Java" 。而第二行代码把lang 的值重新定义为"Java" 与"Script" 的组合，即"JavaScript" 。实现这个操作的过程如下：首先创建一个能容纳10个字符的新字符串，然后在这个字符串中填充"Java" 和"Script" ，最后一步是销毁原来的字符串"Java" 和字符串"Script" ，因为这两个字符串已经没用了。这个过程是在后台发生的，而这也是在某些旧版本的浏览器（例如版本低于1.0的Firefox、IE6等）中拼接字符串时速度很慢的原因所在。但这些浏览器后来的版本已经解决了这个低效率问题。

3. 转换为字符串

要把一个值转换为一个字符串有两种方式。第一种是使用几乎每个值都有的toString() 方法（第5章将讨论这个方法的特点）。这个方法唯一要做的就是返回相应值的字符串表现。来看下面的例子：

var age = 11;
var ageAsString = age.toString();         // 字符串"11"
var found = true;
var foundAsString = found.toString();     // 字符串"true"

StringExample01.htm

数值、布尔值、对象和字符串值（没错，每个字符串也都有一个toString() 方法，该方法返回字符串的一个副本）都有toString() 方法。但null 和undefined 值没有这个方法。

多数情况下，调用toString() 方法不必传递参数。但是，在调用数值的toString() 方法时，可以传递一个参数：输出数值的基数。默认情况下，toString() 方法以十进制格式返回数值的字符串表示。而通过传递基数，toString() 可以输出以二进制、八进制、十六进制，乃至其他任意有效进制格式表示的字符串值。下面给出几个例子：

var num = 10;
alert(num.toString());          // "10"
alert(num.toString(2));         // "1010"
alert(num.toString(8));         // "12"
alert(num.toString(10));        // "10"
alert(num.toString(16));        // "a"

StringExample02.htm

通过这个例子可以看出，通过指定基数，toString() 方法会改变输出的值。而数值10根据基数的不同，可以在输出时被转换为不同的数值格式。注意，默认的（没有参数的）输出值与指定基数10时的输出值相同。

在不知道要转换的值是不是null 或undefined 的情况下，还可以使用转型函数String() ，这个函数能够将任何类型的值转换为字符串。String() 函数遵循下列转换规则：

如果值有toString() 方法，则调用该方法（没有参数）并返回相应的结果；
如果值是null ，则返回"null" ；
如果值是undefined ，则返回"undefined" 。

下面再看几个例子：

var value1 = 10;
var value2 = true;
var value3 = null;
var value4;

alert(String(value1));     // "10"
alert(String(value2));     // "true"
alert(String(value3));     // "null"
alert(String(value4));     // "undefined"

StringExample03.htm

这里先后转换了4个值：数值、布尔值、null 和undefined 。数值和布尔值的转换结果与调用toString() 方法得到的结果相同。因为null 和undefined 没有toString() 方法，所以String() 函数就返回了这两个值的字面量。

要把某个值转换为字符串，可以使用加号操作符（3.5节讨论）把它与一个字符串（"" ）加在一起。

3.4.7　`Object` 类型

ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new 操作符后跟要创建的对象类型的名称来创建。而创建Object 类型的实例并为其添加属性和（或）方法，就可以创建自定义对象，如下所示：

var o = new Object();

这个语法与Java中创建对象的语法相似；但在ECMAScript中，如果不给构造函数传递参数，则可以省略后面的那一对圆括号。也就是说，在像前面这个示例一样不传递参数的情况下，完全可以省略那对圆括号（但这不是推荐的做法）：

var o = new Object; // 有效，但不推荐省略圆括号

仅仅创建Object 的实例并没有什么用处，但关键是要理解一个重要的思想：即在ECMAScript中，（就像Java中的java.lang.Object 对象一样）Object 类型是所有它的实例的基础。换句话说，Object 类型所具有的任何属性和方法也同样存在于更具体的对象中。

Object 的每个实例都具有下列属性和方法。

Constructor ：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object() 。
hasOwnProperty(propertyName ) ：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName ）必须以字符串形式指定（例如：o.hasOwnProperty("name") ）。
isPrototypeOf(object) ：用于检查传入的对象是否是另一个对象的原型（第5章将讨论原型）。
propertyIsEnumerable(propertyName ) ：用于检查给定的属性是否能够使用for-in 语句（本章后面将会讨论）来枚举。与hasOwnProperty() 方法一样，作为参数的属性名必须以字符串形式指定。
toLocaleString() ：返回对象的字符串表示，该字符串与执行环境的地区对应。
toString() ：返回对象的字符串表示。
valueOf() ：返回对象的字符串、数值或布尔值表示。通常与toString() 方法的返回值

相同。

由于在ECMAScript中Object 是所有对象的基础，因此所有对象都具有这些基本的属性和方法。第5章和第6章将详细介绍Object 与其他对象的关系。

从技术角度讲，ECMA-262中对象的行为不一定适用于JavaScript中的其他对象。浏览器环境中的对象，比如BOM和DOM中的对象，都属于宿主对象，因为它们是由宿主实现提供和定义的。ECMA-262不负责定义宿主对象，因此宿主对象可能会也可能不会继承 Object 。

3.5　操作符

ECMA-262描述了一组用于操作数据值的操作符 ，包括算术操作符（如加号和减号）、位操作符、关系操作符和相等操作符。ECMAScript操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的valueOf() 和（或）toString() 方法，以便取得可以操作的值。

3.5.1　一元操作符

只能操作一个值的操作符叫做一元操作符 。一元操作符是ECMAScript中最简单的操作符。

1. 递增和递减操作符

递增和递减操作符直接借鉴自C，而且各有两个版本：前置型和后置型。顾名思义，前置型应该位于要操作的变量之前，而后置型则应该位于要操作的变量之后。因此，在使用前置递增操作符给一个数值加1时，要把两个加号（++）放在这个数值变量前面，如下所示：

var age = 29;
++age;

在这个例子中，前置递增操作符把age 的值变成了30（为29加上了1）。实际上，执行这个前置递增操作与执行以下操作的效果相同：

var age = 29;
age = age + 1;

执行前置递减操作的方法也类似，结果会从一个数值中减去1。使用前置递减操作符时，要把两个减号（-- ）放在相应变量的前面，如下所示：

var age = 29;
--age;

这样，age 变量的值就减少为28（从29中减去了1）。

执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。（在计算机科学领域，这种情况通常被称作副效应 。）请看下面这个例子。

var age = 29;
var anotherAge = --age + 2;

alert(age);             // 输出28
alert(anotherAge);      // 输出30

IncrementDecrementExample01.htm

这个例子中变量anotherAge 的初始值等于变量age 的值前置递减之后加2。由于先执行了减法操作，age 的值变成了28，所以再加上2的结果就是30。

由于前置递增和递减操作与执行语句的优先级相等，因此整个语句会从左至右被求值。再看一个例子：

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;       // 等于21
var num4 = num1 + num2;         // 等于21

IncrementDecrementExample02.htm

在这里，num3 之所以等于21是因为num1 先减去了1才与num2 相加。而变量num4 也等于21是因为相应的加法操作使用了num1 减去1之后的值。

后置型递增和递减操作符的语法不变（仍然分别是++ 和-- ），只不过要放在变量的后面而不是前面。后置递增和递减与前置递增和递减有一个非常重要的区别，即递增和递减操作是在包含它们的语句被求值之后才执行的。这个区别在某些情况下不是什么问题，例如：

var age = 29;
age++;

把递增操作符放在变量后面并不会改变语句的结果，因为递增是这条语句的唯一操作。但是，当语句中还包含其他操作时，上述区别就会非常明显了。请看下面的例子：

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;       // 等于22


var num4 = num1 + num2;         // 等于21

IncrementDecrementExample03.htm

这里仅仅将前置递减改成了后置递减，就立即可以看到差别。在前面使用前置递减的例子中，num3 和num4 最后都等于21。而在这个例子中，num3 等于22，num4 等于21。差别的根源在于，这里在计算num3 时使用了num1 的原始值（2）完成了加法计算，而num4 则使用了递减后的值（1）。

所有这4个操作符对任何值都适用，也就是它们不仅适用于整数，还可以用于字符串、布尔值、浮点数值和对象。在应用于不同的值时，递减和递减操作符遵循下列规则。

在应用于一个包含有效数字字符的字符串时，先将其转换为数字值，再执行加减1的操作。字符串变量变成数值变量。
在应用于一个不包含有效数字字符的字符串时，将变量的值设置为NaN （第4章将详细讨论）。字符串变量变成数值变量。
在应用于布尔值false 时，先将其转换为0再执行加减1的操作。布尔值变量变成数值变量。
在应用于布尔值true 时，先将其转换为1再执行加减1的操作。布尔值变量变成数值变量。
在应用于浮点数值时，执行加减1的操作。
在应用于对象时，先调用对象的valueOf() 方法（第5章将详细讨论）以取得一个可供操作的值。然后对该值应用前述规则。如果结果是NaN ，则在调用toString() 方法后再应用前述规则。对象变量变成数值变量。

以下示例展示了上面的一些规则：

var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var o = { 
    valueOf: function() {
        return -1;
    }
};

s1++;     // 值变成数值3
s2++;     // 值变成NaN
b++;      // 值变成数值1
f--;      // 值变成0.10000000000000009（由于浮点舍入错误所致）
o--;      // 值变成数值-2

IncrementDecrementExample04.htm

2. 一元加和减操作符

绝大多数开发人员对一元加和减操作符都不会陌生，而且这两个ECMAScript操作符的作用与数学书上讲的完全一样。一元加操作符以一个加号（+）表示，放在数值前面，对数值不会产生任何影响，如下面的例子所示：

var num = 25;
num = +num;     // 仍然是25

不过，在对非数值应用一元加操作符时，该操作符会像Number() 转型函数一样对这个值执行转换。换句话说，布尔值false 和true 将被转换为0和1，字符串值会被按照一组特殊的规则进行解析，而对象是先调用它们的valueOf() 和（或）toString() 方法，再转换得到的值。

下面的例子展示了对不同数据类型应用一元加操作符的结果：

var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
    valueOf: function() {
        return -1;
    }
};

s1 = +s1;       // 值变成数值1
s2 = +s2;       // 值变成数值1.1
s3 = +s3;       // 值变成NaN
b = +b;         // 值变成数值0
f = +f;         // 值未变，仍然是1.1
o = +o;         // 值变成数值-1

UnaryPlusMinusExample01.htm

一元减操作符主要用于表示负数，例如将1转换成-1。下面的例子演示了这个简单的转换过程：

var num = 25;
num = -num;     // 变成了-25

在将一元减操作符应用于数值时，该值会变成负数（如上面的例子所示）。而当应用于非数值时，一元减操作符遵循与一元加操作符相同的规则，最后再将得到的数值转换为负数，如下面的例子所示：

var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
    valueOf: function() {
        return -1;
    }
};

s1 = -s1;         // 值变成了数值-1
s2 = -s2;         // 值变成了数值-1.1
s3 = -s3;         // 值变成了NaN
b = -b;           // 值变成了数值0
f = -f;           // 变成了-1.1
o = -o;           // 值变成了数值1

UnaryPlusMinusExample02.htm

一元加和减操作符主要用于基本的算术运算，也可以像前面示例所展示的一样用于转换数据类型。

3.5.2　位操作符

位操作符用于在最基本的层次上，即按内存中表示数值的位来操作数值。ECMAScript中的所有数值都以IEEE-754 64位格式存储，但位操作符并不直接操作64位的值。而是先将64位的值转换成32位的整数，然后执行操作，最后再将结果转换回64位。对于开发人员来说，由于64位存储格式是透明的，因此整个过程就像是只存在32位的整数一样。

对于有符号的整数，32位中的前31位用于表示整数的值。第32位用于表示数值的符号：0表示正数，1表示负数。这个表示符号的位叫做符号位 ，符号位的值决定了其他位数值的格式。其中，正数以纯二进制格式存储，31位中的每一位都表示2的幂。第一位（叫做位0）表示2⁰ ，第二位表示2¹ ，以此类推。没有用到的位以0填充，即忽略不计。例如，数值18的二进制表示是00000000000000000000000000010010，或者更简洁的10010。这是5个有效位，这5位本身就决定了实际的值（如图3-1所示）。

图　3-1

负数同样以二进制码存储，但使用的格式是二进制补码 。计算一个数值的二进制补码，需要经过下列3个步骤：

求这个数值绝对值的二进制码（例如，要求-18的二进制补码，先求18的二进制码）；
求二进制反码，即将0替换为1，将1替换为0；
得到的二进制反码加1。

要根据这3个步骤求得-18的二进制码，首先就要求得18的二进制码，即：

0000 0000 0000 0000 0000 0000 0001 0010

然后，求其二进制反码，即0和1互换：

1111 1111 1111 1111 1111 1111 1110 1101

最后，二进制反码加1：

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

这样，就求得了-18的二进制表示，即11111111111111111111111111101110。要注意的是，在处理有符号整数时，是不能访问位31的。

ECMAScript会尽力向我们隐藏所有这些信息。换句话说，在以二进制字符串形式输出一个负数时，我们看到的只是这个负数绝对值的二进制码前面加上了一个负号。如下面的例子所示：

var num = -18;
alert(num.toString(2));    // "-10010"

要把数值-18转换成二进制字符串时，得到的结果是"-10010" 。这说明转换过程理解了二进制补码并将其以更合乎逻辑的形式展示了出来。

默认情况下，ECMAScript中的所有整数都是有符号整数。不过，当然也存在无符号整数。对于无符号整数来说，第32位不再表示符号，因为无符号整数只能是正数。而且，无符号整数的值可以更大，因为多出的一位不再表示符号，可以用来表示数值。

在ECMAScript中，当对数值应用位操作符时，后台会发生如下转换过程：64位的数值被转换成32位数值，然后执行位操作，最后再将32位的结果转换回64位数值。这样，表面上看起来就好像是在操作32位数值，就跟在其他语言中以类似方式执行二进制操作一样。但这个转换过程也导致了一个严重的副效应，即在对特殊的NaN 和Infinity 值应用位操作时，这两个值都会被当成0来处理。

如果对非数值应用位操作符，会先使用Number() 函数将该值转换为一个数值（自动完成），然后再应用位操作。得到的结果将是一个数值。

1. 按位非（NOT）

按位非操作符由一个波浪线（~）表示，执行按位非的结果就是返回数值的反码。按位非是ECMAScript操作符中少数几个与二进制计算有关的操作符之一。下面看一个例子：

var num1 = 25;                  // 二进制00000000000000000000000000011001
var num2 = ~num1;               // 二进制11111111111111111111111111100110
alert(num2);                    // -26

BitwiseNotExample01.htm

这里，对25执行按位非操作，结果得到了-26。这也验证了按位非操作的本质：操作数的负值减1。因此，下面的代码也能得到相同的结果：

var num1 = 25;
var num2 = -num1 - 1;
alert(num2);            // "-26"

虽然以上代码也能返回同样的结果，但由于按位非是在数值表示的最底层执行操作，因此速度更快。

2. 按位与（AND）

按位与操作符由一个和号字符（& ）表示，它有两个操作符数。从本质上讲，按位与操作就是将两个数值的每一位对齐，然后根据下表中的规则，对相同位置上的两个数执行AND操作：

第一个数值的位	第二个数值的位	结　　果
1	1	1
1	0	0
0	1	0
0	0	0

简而言之，按位与操作只在两个数值的对应位都是1时才返回1，任何一位是0，结果都是0。

下面看一个对25和3执行按位与操作的例子：

var result = 25 & 3;
alert(result);     //1

BitwiseAndExample01.htm

可见，对25和3执行按位与操作的结果是1。为什么呢？请看其底层操作：

25  = 0000 0000 0000 0000 0000 0000 0001 1001
 3  = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001

原来，25和3的二进制码对应位上只有一位同时是1，而其他位的结果自然都是0，因此最终结果等于1。

3. 按位或（OR）

按位或操作符由一个竖线符号（|）表示，同样也有两个操作数。按位或操作遵循下面这个真值表。

第一个数值的位	第二个数值的位	结　　果
1	1	1
1	0	1
0	1	1
0	0	0

由此可见，按位或操作在有一个位是1的情况下就返回1，而只有在两个位都是0的情况下才返回0。

如果在前面按位与的例子中对25和3执行按位或操作，则代码如下所示：

var result = 25 | 3;
alert(result);       //27

BitwiseOrExample01.htm

25与3按位或的结果是27：

25 = 0000 0000 0000 0000 0000 0000 0001 1001
3  = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011

这两个数值的都包含4个1，因此可以把每个1直接放到结果中。二进制码11011等于十进制值27。

4. 按位异或（XOR）

按位异或操作符由一个插入符号（^）表示，也有两个操作数。以下是按位异或的真值表。

第一个数值的位	第二个数值的位	结　　果
1	1	0
1	0	1
0	1	1
0	0	0

按位异或与按位或的不同之处在于，这个操作在两个数值对应位上只有一个1时才返回1，如果对应的两位都是1或都是0，则返回0。

对25和3执行按位异或操作的代码如下所示：

var result = 25 ^ 3;
alert(result);    //26

BitwiseXorExample01.htm

25与3按位异或的结果是26，其底层操作如下所示：

25  = 0000 0000 0000 0000 0000 0000 0001 1001
 3  = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

这两个数值都包含4个1，但第一位上则都是1，因此结果的第一位变成了0。而其他位上的1在另一个数值中都没有对应的1，可以直接放到结果中。二进制码11010等于十进制值26（注意这个结果比执行按位或时小1）。

5. 左移

左移操作符由两个小于号（<<）表示，这个操作符会将数值的所有位向左移动指定的位数。例如，如果将数值2（二进制码为10）向左移动5位，结果就是64（二进制码为1000000），代码如下所示：

var oldValue = 2;                       // 等于二进制的10
var newValue = oldValue << 5;           // 等于二进制的1000000，十进制的64

LeftShiftExample01.htm

注意，在向左移位后，原数值的右侧多出了5个空位。左移操作会以0来填充这些空位，以便得到的结果是一个完整的32位二进制数（见图3-2）。

图　3-2

注意，左移不会影响操作数的符号位。换句话说，如果将-2向左移动5位，结果将是-64，而非64。

6. 有符号的右移

有符号的右移操作符由两个大于号（>>）表示，这个操作符会将数值向右移动，但保留符号位（即正负号标记）。有符号的右移操作与左移操作恰好相反，即如果将64向右移动5位，结果将变回2：

var oldValue = 64;                      // 等于二进制的1000000
var newValue = oldValue >> 5;           // 等于二进制的10 ，即十进制的2

SignedRightShiftExample01.htm

同样，在移位过程中，原数值中也会出现空位。只不过这次的空位出现在原数值的左侧、符号位的右侧（见图3-3）。而此时ECMAScript会用符号位的值来填充所有空位，以便得到一个完整的值。

图　3-3

7. 无符号右移

无符号右移操作符由3个大于号（>>>）表示，这个操作符会将数值的所有32位都向右移动。对正数来说，无符号右移的结果与有符号右移相同。仍以前面有符号右移的代码为例，如果将64无符号右移5位，结果仍然还是2：

var oldValue = 64;                      // 等于二进制的1000000
var newValue = oldValue >>> 5;          // 等于二进制的10 ，即十进制的2

UnsignedRightShiftExample01.htm

但是对负数来说，情况就不一样了。首先，无符号右移是以0来填充空位，而不是像有符号右移那样以符号位的值来填充空位。所以，对正数的无符号右移与有符号右移结果相同，但对负数的结果就不一样了。其次，无符号右移操作符会把负数的二进制码当成正数的二进制码。而且，由于负数以其绝对值的二进制补码形式表示，因此就会导致无符号右移后的结果非常之大，如下面的例子所示：

var oldValue = -64;                     // 等于二进制的11111111111111111111111111000000


var newValue = oldValue >>> 5;          // 等于十进制的134217726

UnsignedRightShiftExample02.htm

这里，当对-64执行无符号右移5位的操作后，得到的结果是134217726。之所以结果如此之大，是因为-64的二进制码为11111111111111111111111111000000，而且无符号右移操作会把这个二进制码当成正数的二进制码，换算成十进制就是4294967232。如果把这个值右移5位，结果就变成了00000111111111111111111111111110，即十进制的134217726。

3.5.3　布尔操作符

在一门编程语言中，布尔操作符的重要性堪比相等操作符。如果没有测试两个值关系的能力，那么诸如if...else 和循环之类的语句就不会有用武之地了。布尔操作符一共有3个：非（NOT）、与（AND）和或（OR）。

1. 逻辑非

逻辑非操作符由一个叹号（！）表示，可以应用于ECMAScript中的任何值。无论这个值是什么数据类型，这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反。也就是说，逻辑非操作符遵循下列规则：

如果操作数是一个对象，返回false ；
如果操作数是一个空字符串，返回true ；
如果操作数是一个非空字符串，返回false ；
如果操作数是数值0，返回true ；
如果操作数是任意非0数值（包括Infinity ），返回false ；
如果操作数是null ，返回true ；
如果操作数是NaN ，返回true ；
如果操作数是undefined ，返回true 。

下面几个例子展示了应用上述规则的结果：

alert(!false);          // true
alert(!"blue");         // false
alert(!0);              // true
alert(!NaN);            // true
alert(!"");             // true
alert(!12345);          // false

LogicalNotExample01.htm

逻辑非操作符也可以用于将一个值转换为与其对应的布尔值。而同时使用两个逻辑非操作符，实际上就会模拟Boolean() 转型函数的行为。其中，第一个逻辑非操作会基于无论什么操作数返回一个布尔值，而第二个逻辑非操作则对该布尔值求反，于是就得到了这个值真正对应的布尔值。当然，最终结果与对这个值使用Boolean() 函数相同，如下面的例子所示：

alert(!!"blue");        //true
alert(!!0);             //false
alert(!!NaN);           //false
alert(!!"");            //false
alert(!!12345);         //true

LogicalNotExample02.htm

2. 逻辑与

逻辑与操作符由两个和号（&& ）表示，有两个操作数，如下面的例子所示：

var result = true && false;

逻辑与的真值表如下：

第一个操作数	第二个操作数	结　　果
`true`	`true`	`true`
`true`	`false`	`false`
`false`	`true`	`false`
`false`	`false`	`false`

逻辑与操作可以应用于任何类型的操作数，而不仅仅是布尔值。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值；此时，它遵循下列规则：

如果第一个操作数是对象，则返回第二个操作数；
如果第二个操作数是对象，则只有在第一个操作数的求值结果为true 的情况下才会返回该对象；
如果两个操作数都是对象，则返回第二个操作数；
如果有一个操作数是null ，则返回null ；
如果有一个操作数是NaN ，则返回NaN ；
如果有一个操作数是undefined ，则返回undefined 。

逻辑与操作属于短路操作，即如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值。对于逻辑与操作而言，如果第一个操作数是false ，则无论第二个操作数是什么值，结果都不再可能是true 了。来看下面的例子：

var found = true;
var result = (found && someUndefinedVariable);    // 这里会发生错误
alert(result);    // 这一行不会执行

LogicalAndExample01.htm

在上面的代码中，当执行逻辑与操作时会发生错误，因为变量someUndefinedVariable 没有声明。由于变量found 的值是true ，所以逻辑与操作符会继续对变量someUndefinedVariable 求值。但someUndefinedVariable 尚未定义，因此就会导致错误。这说明不能在逻辑与操作中使用未定义的值。如果像下面这个例中一样，将found 的值设置为false ，就不会发生错误了：

var found = false;


var result = (found && someUndefinedVariable);     // 不会发生错误
alert(result);    // 会执行（"false"）

LogicalAndExample02.htm

在这个例子中，警告框会显示出来。无论变量someUndefinedVariable 有没有定义，也永远不会对它求值，因为第一个操作数的值是false 。而这也就意味着逻辑与操作的结果必定是false ，根本用不着再对&& 右侧的操作数求值了。在使用逻辑与操作符时要始终铭记它是一个短路操作符。

3. 逻辑或

逻辑或操作符由两个竖线符号（|| ）表示，有两个操作数，如下面的例子所示：

var result = true || false;

逻辑或的真值表如下：

第一个操作数	第二个操作数	结　　果
`True`	`true`	`true`
`True`	`false`	`true`
`false`	`true`	`true`
`false`	`false`	`false`

与逻辑与操作相似，如果有一个操作数不是布尔值，逻辑或也不一定返回布尔值；此时，它遵循下列规则：

如果第一个操作数是对象，则返回第一个操作数；
如果第一个操作数的求值结果为false ，则返回第二个操作数；
如果两个操作数都是对象，则返回第一个操作数；
如果两个操作数都是null ，则返回null ；
如果两个操作数都是NaN ，则返回NaN ；
如果两个操作数都是undefined ，则返回undefined 。

与逻辑与操作符相似，逻辑或操作符也是短路操作符。也就是说，如果第一个操作数的求值结果为true ，就不会对第二个操作数求值了。下面看一个例子：

var found = true;
var result = (found || someUndefinedVariable);     // 不会发生错误
alert(result);    // 会执行（"true"）

LogicalOrExample01.htm

这个例子跟前面的例子一样，变量someUndefinedVariable 也没有定义。但是，由于变量found 的值是true ，而变量someUndefinedVariable 永远不会被求值，因此结果就会输出"true" 。如果像下面这个例子一样，把found 的值改为false ，就会导致错误：

var found = false;


var result = (found || someUndefinedVariable);     // 这里会发生错误
alert(result);    // 这一行不会执行

LogicalOrExample02.htm

我们可以利用逻辑或的这一行为来避免为变量赋null 或undefined 值。例如：

var myObject = preferredObject || backupObject;

在这个例子中，变量myObject 将被赋予等号后面两个值中的一个。变量preferredObject 中包含优先赋给变量myObject 的值，变量backupObject 负责在preferredObject 中不包含有效值的情况下提供后备值。如果preferredObject 的值不是null ，那么它的值将被赋给myObject ；如果是null ，则将backupObject 的值赋给myObject 。ECMAScript程序的赋值语句经常会使用这种模式，本书也将采用这种模式。

3.5.4　乘性操作符

ECMAScript定义了3个乘性操作符：乘法、除法和求模。这些操作符与Java、C或者Perl中的相应操作符用途类似，只不过在操作数为非数值的情况下会执行自动的类型转换。如果参与乘法计算的某个操作数不是数值，后台会先使用Number() 转型函数将其转换为数值。也就是说，空字符串将被当作0，布尔值true 将被当作1。

1. 乘法

乘法操作符由一个星号（* ）表示，用于计算两个数值的乘积。其语法类似于C，如下面的例子所示：

var result = 34 * 56;

在处理特殊值的情况下，乘法操作符遵循下列特殊的规则：

如果操作数都是数值，执行常规的乘法计算，即两个正数或两个负数相乘的结果还是正数，而如果只有一个操作数有符号，那么结果就是负数。如果乘积超过了ECMAScript数值的表示范围，则返回Infinity 或-Infinity ；
如果有一个操作数是NaN ，则结果是NaN ；
如果是Infinity 与0相乘，则结果是NaN ；
如果是Infinity 与非0数值相乘，则结果是Infinity 或-Infinity ，取决于有符号操作数的符号；
如果是Infinity 与Infinity 相乘，则结果是Infinity ；
如果有一个操作数不是数值，则在后台调用Number() 将其转换为数值，然后再应用上面的

规则。

2. 除法

除法操作符由一个斜线符号（/）表示，执行第二个操作数除第一个操作数的计算，如下面的例子所示：

var result = 66 / 11;

与乘法操作符类似，除法操作符对特殊的值也有特殊的处理规则。这些规则如下：

如果操作数都是数值，执行常规的除法计算，即两个正数或两个负数相除的结果还是正数，而如果只有一个操作数有符号，那么结果就是负数。如果商超过了ECMAScript数值的表示范围，则返回Infinity 或-Infinity ；
如果有一个操作数是NaN ，则结果是NaN ；
如果是Infinity 被Infinity 除，则结果是NaN ；
如果是零被零除，则结果是NaN ；
如果是非零的有限数被零除，则结果是Infinity 或-Infinity ，取决于有符号操作数的符号；
如果是Infinity 被任何非零数值除，则结果是Infinity 或-Infinity ，取决于有符号操作数的符号；
如果有一个操作数不是数值，则在后台调用Number() 将其转换为数值，然后再应用上面的规则。

3. 求模

求模（余数）操作符由一个百分号（% ）表示，用法如下：

var result = 26 % 5;     // 等于1

与另外两个乘性操作符类似，求模操作符会遵循下列特殊规则来处理特殊的值：

如果操作数都是数值，执行常规的除法计算，返回除得的余数；
如果被除数是无穷大值而除数是有限大的数值，则结果是NaN ；
如果被除数是有限大的数值而除数是零，则结果是NaN ；
如果是Infinity 被Infinity 除，则结果是NaN ；
如果被除数是有限大的数值而除数是无穷大的数值，则结果是被除数；
如果被除数是零，则结果是零；
如果有一个操作数不是数值，则在后台调用Number() 将其转换为数值，然后再应用上面的规则。

3.5.5　加性操作符

加法和减法这两个加性操作符应该说是编程语言中最简单的算术操作符了。但是在ECMAScript中，这两个操作符却都有一系列的特殊行为。与乘性操作符类似，加性操作符也会在后台转换不同的数据类型。然而，对于加性操作符而言，相应的转换规则还稍微有点复杂。

1. 加法

加法操作符（+）的用法如下所示：

var result = 1 + 2;

如果两个操作符都是数值，执行常规的加法计算，然后根据下列规则返回结果：

如果有一个操作数是NaN ，则结果是NaN ；
如果是Infinity 加Infinity ，则结果是Infinity ；
如果是-Infinity 加-Infinity ，则结果是-Infinity ；
如果是Infinity 加-Infinity ，则结果是NaN ；
如果是+0加+0，则结果是+0；
如果是-0加-0，则结果是-0；
如果是+0加-0，则结果是+0。

不过，如果有一个操作数是字符串，那么就要应用如下规则：

如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来；
如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接起来。

如果有一个操作数是对象、数值或布尔值，则调用它们的toString() 方法取得相应的字符串值，然后再应用前面关于字符串的规则。对于undefined 和null ，则分别调用String() 函数并取得字符串"undefined" 和"null" 。

下面来举几个例子：

var result1 = 5 + 5;            // 两个数值相加
alert(result1);                 // 10

var result2 = 5 + "5";          // 一个数值和一个字符串相加
alert(result2);                 // "55"

AddExample01.htm

以上代码演示了加法操作符在两种模式下的差别。第一行代码演示了正常的情况，即5+5等于10（数值）。但是，如果将一个操作数改为字符串"5" ，结果就变成了"55" （字符串值），因为第一个操作数也被转换成了"5" 。

忽视加法操作中的数据类型是ECMAScript编程中最常见的一个错误。再来看一个例子：

var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;
alert(message);    // "The sum of 5 and 10 is 510"

AddExample02.htm

在这个例子中，变量message 的值是执行两个加法操作之后的结果。有人可能以为最后得到的字符串是"The sum of 5 and 10 is 15" ，但实际的结果却是"The sum of 5 and 10 is 510" 。之所以会这样，是因为每个加法操作是独立执行的。第一个加法操作将一个字符串和一个数值（5）拼接了起来，结果是一个字符串。而第二个加法操作又用这个字符串去加另一个数值（10），当然也会得到一个字符串。如果想先对数值执行算术计算，然后再将结果与字符串拼接起来，应该像下面这样使用圆括号：

var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + (num1 + num2);


alert(message);    //"The sum of 5 and 10 is 15"

AddExample03.htm

在这个例子中，一对圆括号把两个数值变量括在了一起，这样就会告诉解析器先计算其结果，然后再将结果与字符串拼接起来。因此，就得到了结果"The sum of 5 and 10 is 15" 。

2. 减法

减法操作符（-）是另一个极为常用的操作符，其用法如下所示：

var result = 2 - 1;

与加法操作符类似，ECMAScript中的减法操作符在处理各种数据类型转换时，同样需要遵循一些特殊规则，如下所示：

如果两个操作符都是数值，则执行常规的算术减法操作并返回结果；
如果有一个操作数是NaN ，则结果是NaN ；
如果是Infinity 减Infinity ，则结果是NaN ；
如果是-Infinity 减-Infinity ，则结果是NaN ；
如果是Infinity 减-Infinity ，则结果是Infinity ；
如果是-Infinity 减Infinity ，则结果是-Infinity ；
如果是+0减+0，则结果是+0；
如果是+0减-0，则结果是-0；
如果是-0减-0，则结果是+0；
如果有一个操作数是字符串、布尔值、null 或undefined ，则先在后台调用Number() 函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是NaN ，则减法的结果就是NaN ；
如果有一个操作数是对象，则调用对象的valueOf() 方法以取得表示该对象的数值。如果得到的值是NaN ，则减法的结果就是NaN 。如果对象没有valueOf() 方法，则调用其toString() 方法并将得到的字符串转换为数值。

下面几个例子展示了上面的规则：

var result1 = 5 - true;         // 4，因为true被转换成了1
var result2 = NaN - 1;          // NaN
var result3 = 5 - 3;            // 2
var result4 = 5 - "";           // 5，因为"" 被转换成了0
var result5 = 5 - "2";          // 3，因为"2"被转换成了2
var result6 = 5 - null;         // 5，因为null被转换成了0

SubtractExample01.htm

3.5.6　关系操作符

小于（<）、大于（>）、小于等于（<=）和大于等于（>=）这几个关系操作符用于对两个值进行比较，比较的规则与我们在数学课上所学的一样。这几个操作符都返回一个布尔值，如下面的例子所示：

var result1 = 5 > 3;         //true
var result2 = 5 < 3;         //false

RelationalOperatorsExample01.htm 中包含本节所有的代码片段

与ECMAScript中的其他操作符一样，当关系操作符的操作数使用了非数值时，也要进行数据转换或完成某些奇怪的操作。以下就是相应的规则。

如果两个操作数都是数值，则执行数值比较。
如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。
如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。
如果一个操作数是对象，则调用这个对象的valueOf() 方法，用得到的结果按照前面的规则执行比较。如果对象没有valueOf() 方法，则调用toString() 方法，并用得到的结果根据前面的规则执行比较。
如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。

在使用关系操作符比较两个字符串时，会执行一种奇怪的操作。很多人都会认为，在比较字符串值时，小于的意思是“在字母表中的位置靠前”，而大于则意味着“在字母表中的位置靠后”，但实际上完全不是那么回事。在比较字符串时，实际比较的是两个字符串中对应位置的每个字符的字符编码值。经过这么一番比较之后，再返回一个布尔值。由于大写字母的字符编码全部小于小写字母的字符编码，因此我们就会看到如下所示的奇怪现象：

var result = "Brick" < "alphabet";    //true

在这个例子中，字符串"Brick" 被认为小于字符串"alphabet" 。原因是字母B的字符编码为66，而字母a的字符编码是97。如果要真正按字母表顺序比较字符串，就必须把两个操作数转换为相同的大小写形式（全部大写或全部小写），然后再执行比较，如下所示：

var result = "Brick".toLowerCase() < "alphabet".toLowerCase(); //false

通过将两个操作数都转换为小写形式，就可以得出"alphabet" 按字母表顺序排在"Brick" 之前的正确判断了。

另一种奇怪的现象发生在比较两个数字字符串的情况下，比如下面这个例子：

var result = "23" < "3";    //true

确实，当比较字符串"23" 是否小于"3" 时，结果居然是true 。这是因为两个操作数都是字符串，而字符串比较的是字符编码（"2" 的字符编码是50，而"3" 的字符编码是51）。不过，如果像下面例子中一样，将一个操作数改为数值，比较的结果就正常了：

var result = "23" < 3;    //false

此时，字符串"23" 会被转换成数值23，然后再与3进行比较，因此就会得到合理的结果。在比较数值和字符串时，字符串都会被转换成数值，然后再以数值方式与另一个数值比较。当然，这个规则对前面的例子是适用的。可是，如果那个字符串不能被转换成一个合理的数值呢？比如：

var result = "a" < 3;    // false，因为"a"被转换成了NaN

由于字母"a" 不能转换成合理的数值，因此就被转换成了NaN 。根据规则，任何操作数与NaN 进行关系比较，结果都是false 。于是，就出现了下面这个有意思的现象：

var result1 = NaN < 3;    //false
var result2 = NaN >= 3;   //false

按照常理，如果一个值不小于另一个值，则一定是大于或等于那个值。然而，在与NaN 进行比较时，这两个比较操作的结果都返回了false 。

3.5.7　相等操作符

确定两个变量是否相等是编程中的一个非常重要的操作。在比较字符串、数值和布尔值的相等性时，问题还比较简单。但在涉及到对象的比较时，问题就变得复杂了。最早的ECMAScript中的相等和不等操作符会在执行比较之前，先将对象转换成相似的类型。后来，有人提出了这种转换到底是否合理的质疑。最后，ECMAScript的解决方案就是提供两组操作符：相等和不相等 ——先转换再比较，全等和不全等 ——仅比较而不转换。

1. 相等和不相等

ECMAScript中的相等操作符由两个等于号（== ）表示，如果两个操作数相等，则返回true 。而不相等操作符由叹号后跟等于号（!= ）表示，如果两个操作数不相等，则返回true 。这两个操作符都会先转换操作数（通常称为强制转型 ），然后再比较它们的相等性。

在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：

如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为0，而true 转换为1；
如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf() 方法，用得到的基本类型值按照前面的规则进行比较；

这两个操作符在进行比较时则要遵循下列规则。

null 和undefined 是相等的。
要比较相等性之前，不能将null 和undefined 转换成其他任何值。
如果有一个操作数是NaN ，则相等操作符返回false ，而不相等操作符返回true 。重要提示：即使两个操作数都是NaN ，相等操作符也返回false ；因为按照规则，NaN 不等于NaN 。
如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true ；否则，返回false 。

下表列出了一些特殊情况及比较结果：

表　达　式	值	表　达　式	值
`null == undefined`	`true`	`true == 1`	`true`
`"NaN" == NaN`	`false`	`true == 2`	`false`
`5 == NaN`	`false`	`undefined == 0`	`false`
`NaN == NaN`	`false`	`null == 0`	`false`
`NaN != NaN`	`true`	`"5"==5`	`true`
`false == 0`	`true`

2. 全等和不全等

除了在比较之前不转换操作数之外，全等和不全等操作符与相等和不相等操作符没有什么区别。全等操作符由3个等于号（=== ）表示，它只在两个操作数未经转换就相等的情况下返回true ，如下面的例子所示：

var result1 = ("55" == 55);     //true，因为转换后相等
var result2 = ("55" === 55);    //false，因为不同的数据类型不相等

EqualityOperatorsExample02.htm

在这个例子中，第一个比较使用的是相等操作符比较字符串"55" 和数值55，结果返回了true 。如前所述，这是因为字符串"55" 先被转换成了数值55，然后再与另一个数值55进行比较。第二个比较使用了全等操作符以不转换数值的方式比较同样的字符串和值。在不转换的情况下，字符串当然不等于数值，因此结果就是false 。

不全等操作符由一个叹号后跟两个等于号（!== ）表示，它在两个操作数未经转换就不相等的情况下返回true 。例如：

var result1 = ("55" != 55);     //false，因为转换后相等
var result2 = ("55" !== 55);    //true，因为不同的数据类型不相等

EqualityOperatorsExample03.htm

在这个例子中，第一个比较使用了不相等操作符，而该操作符会将字符串"55" 转换成55，结果就与第二个操作数（也是55）相等了。而由于这两个操作数被认为相等，因此就返回了false 。第二个比较使用了不全等操作符。假如我们这样想：字符串55与数值55不相同吗？，那么答案一定是：是的（true ）。

记住：null == undefined 会返回true ，因为它们是类似的值；但null === undefined 会返回false ，因为它们是不同类型的值。

由于相等和不相等操作符存在类型转换问题，而为了保持代码中数据类型的完整性，我们推荐使用全等和不全等操作符。

3.5.8　条件操作符

条件操作符应该算是ECMAScript中最灵活的一种操作符了，而且它遵循与Java中的条件操作符相同的语法形式，如下面的例子所示：

variable = boolean_expression ? true_value : false_value;

本质上，这行代码的含义就是基于对boolean_expression 求值的结果，决定给变量variable 赋什么值。如果求值结果为true ，则给变量variable 赋true_value 值；如果求值结果为false ，则给变量variable 赋false_value 值。再看一个例子：

var max = (num1 > num2) ? num1 : num2;

在这个例子中，max 中将会保存一个最大的值。这个表达式的意思是：如果num1 大于num2 （关系表达式返回true ），则将num1 的值赋给max ；如果num1 小于或等于num2 （关系表达式返回false ），则将num2 的值赋给max 。

3.5.9　赋值操作符

简单的赋值操作符由等于号（= ）表示，其作用就是把右侧的值赋给左侧的变量，如下面的例子所示：

var num = 10;

如果在等于号（= ）前面再添加乘性操作符、加性操作符或位操作符，就可以完成复合赋值操作。这种复合赋值操作相当于是对下面常规表达式的简写形式：

var num = 10;
num = num + 10;

其中的第二行代码可以用一个复合赋值来代替：

var num = 10;
num += 10;

每个主要算术操作符（以及个别的其他操作符）都有对应的复合赋值操作符。这些操作符如下所示：

乘/赋值（*= ）；
除/赋值（/= ）；
模/赋值（%= ）；
加/赋值（+= ）；
减/赋值（-= ）；
左移/赋值（<<= ）；
有符号右移/赋值（>>= ）；
无符号右移/赋值（>>>= ）。

设计这些操作符的主要目的就是简化赋值操作。使用它们不会带来任何性能的提升。

3.5.10　逗号操作符

使用逗号操作符可以在一条语句中执行多个操作，如下面的例子所示：

var num1=1, num2=2, num3=3;

逗号操作符多用于声明多个变量；但除此之外，逗号操作符还可以用于赋值。在用于赋值时，逗号操作符总会返回表达式中的最后一项，如下面的例子所示：

var num = (5, 1, 4, 8, 0); // num的值为0

由于0是表达式中的最后一项，因此num 的值就是0。虽然逗号的这种使用方式并不常见，但这个例子可以帮我们理解逗号的这种行为。

3.6　语句

ECMA-262规定了一组语句（也称为流控制语句）。从本质上看，语句定义了ECMAScript中的主要语法，语句通常使用一或多个关键字来完成给定任务。语句可以很简单，例如通知函数退出；也可以比较复杂，例如指定重复执行某个命令的次数。

3.6.1　`if` 语句

大多数编程语言中最为常用的一个语句就是if 语句。以下是if 语句的语法：

if (condition) statement1 else statement2

其中的condition（条件）可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值。ECMAScript会自动调用Boolean() 转换函数将这个表达式的结果转换为一个布尔值。如果对condition求值的结果是true ，则执行statement1（语句1），如果对condition求值的结果是false ，则执行statement2（语句2）。而且这两个语句既可以是一行代码，也可以是一个代码块（以一对花括号括起来的多行代码）。请看下面的例子。

if (i > 25)
    alert("Greater than 25.");                  // 单行语句
else {
    alert("Less than or equal to 25.");         // 代码块中的语句
}

IfStatementExample01.htm

不过，业界普遍推崇的最佳实践是始终使用代码块，即使要执行的只有一行代码。因为这样可以消除人们的误解，否则可能让人分不清在不同条件下要执行哪些语句。

另外，也可以像下面这样把整个if 语句写在一行代码中：

if (condition1) statement1 else if (condition2) statement2 else statement3

但我们推荐的做法则是像下面这样：

if (i > 25) {
    alert("Greater than 25.");
} else if (i < 0) {
    alert("Less than 0.");
} else {
    alert("Between 0 and 25, inclusive.");
}

IfStatementExample02.htm

3.6.2　`do-while` 语句

do-while 语句是一种后测试循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。换句话说，在对条件表达式求值之前，循环体内的代码至少会被执行一次。以下是do-while 语句的语法：

do {
    statement
} while (expression);

下面是一个示例：

var i = 0;
do {
   i += 2;
} while (i < 10);

alert(i);

DoWhileStatementExample01.htm

在这个例子中，只要变量i 的值小于10，循环就会一直继续下去。而且变量i 的值最初为0，每次循环都会递增2。

像do-while 这种后测试循环语句最常用于循环体中的代码至少要被执行一次的情形。

3.6.3　`while` 语句

while 语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值。因引，循环体内的代码有可能永远不会被执行。以下是while 语句的语法：

while(expression) statement

下面是一个示例：

var i = 0;
while (i < 10) {
    i += 2;
}

WhileStatementExample01.htm

在这个例子中，变量i 开始时的值为0，每次循环都会递增2。而只要i 的值小于10，循环就会继续下去。

3.6.4　`for` 语句

for 语句也是一种前测试循环语句，但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。以下是for 语句的语法：

for (initialization; expression; post-loop-expression) statement

下面是一个示例：

var count = 10;
for (var i = 0; i < count; i++){
    alert(i);
}

ForStatementExample01.htm

以上代码定义了变量i 的初始值为0。只有当条件表达式（i<count ）返回true 的情况下才会进入for 循环，因此也有可能不会执行循环体中的代码。如果执行了循环体中的代码，则一定会对循环后的表达式（i++ ）求值，即递增i 的值。这个for 循环语句与下面的while 语句的功能相同：

var count = 10;
var i = 0;
while (i < count){
    alert(i);
    i++;
}

使用while 循环做不到的，使用for 循环同样也做不到。也就是说，for 循环只是把与循环有关的代码集中在了一个位置。

有必要指出的是，在for 循环的变量初始化表达式中，也可以不使用var 关键字。该变量的初始化可以在外部执行，例如：

var count = 10;
var i;


for (i = 0; i < count; i++){


    alert(i);
}

ForStatementExample02.htm

以上代码与在循环初始化表达式中声明变量的效果是一样的。由于ECMAScript中不存在块级作用域（第4章将进一步讨论这一点），因此在循环内部定义的变量也可以在外部访问到。例如：

var count = 10;
for (var i = 0; i < count; i++){
    alert(i);
}
alert(i);    //10

ForStatementExample03.htm

在这个例子中，会有一个警告框显示循环完成后变量i 的值，这个值是10。这是因为，即使i 是在循环内部定义的一个变量，但在循环外部仍然可以访问到它。

此外，for 语句中的初始化表达式、控制表达式和循环后表达式都是可选的。将这两个表达式全部省略，就会创建一个无限循环，例如：

for (;;) {     // 无限循环
    doSomething();
}

而只给出控制表达式实际上就把for 循环转换成了while 循环，例如：

var count = 10;
var i = 0;
for (; i < count; ){
    alert(i);
    i++;
}

ForStatementExample04.htm

由于for 语句存在极大的灵活性，因此它也是ECMAScript中最常用的一个语句。

3.6.5　`for-in` 语句

for-in 语句是一种精准的迭代语句，可以用来枚举对象的属性。以下是for-in 语句的语法：

for (property in expression) statement

下面是一个示例：

for (var propName in window) {
     document.write(propName);
}

ForInStatementExample01.htm

在这个例子中，我们使用for-in 循环来显示了BOM中window 对象的所有属性。每次执行循环时，都会将window 对象中存在的一个属性名赋值给变量propName 。这个过程会一直持续到对象中的所有属性都被枚举一遍为止。与for 语句类似，这里控制语句中的var 操作符也不是必需的。但是，为了保证使用局部变量，我们推荐上面例子中的这种做法。

ECMAScript对象的属性没有顺序。因此，通过for-in 循环输出的属性名的顺序是不可预测的。具体来讲，所有属性都会被返回一次，但返回的先后次序可能会因浏览器而异。

但是，如果表示要迭代的对象的变量值为null 或undefined ，for-in 语句会抛出错误。ECMAScript 5更正了这一行为；对这种情况不再抛出错误，而只是不执行循环体。为了保证最大限度的兼容性，建议在使用for-in 循环之前，先检测确认该对象的值不是null 或undefined 。

Safari 3以前版本的 for-in 语句中存在一个bug，该bug会导致某些属性被返回两次。

3.6.6　`label` 语句

使用label 语句可以在代码中添加标签，以便将来使用。以下是label 语句的语法：

label: statement

下面是一个示例：

start: for (var i=0; i < count; i++) {
    alert(i); 
}

这个例子中定义的start 标签可以在将来由break 或continue 语句引用。加标签的语句一般都要与for 语句等循环语句配合使用。

3.6.7　`break` 和`continue` 语句

break 和continue 语句用于在循环中精确地控制代码的执行。其中，break 语句会立即退出循环，强制继续执行循环后面的语句。而continue 语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行。请看下面的例子：

var num = 0;

for (var i=1; i < 10; i++) {
    if (i % 5 == 0) {
       break;
    }
    num++;
}

alert(num);    //4

BreakStatementExample01.htm

这个例子中的for 循环会将变量i 由1递增至10。在循环体内，有一个if 语句检查i 的值是否可以被5整除（使用求模操作符）。如果是，则执行break 语句退出循环。另一方面，变量num 从0开始，用于记录循环执行的次数。在执行break 语句之后，要执行的下一行代码是alert() 函数，结果显示4。也就是说，在变量i 等于5时，循环总共执行了4次；而break 语句的执行，导致了循环在num 再次递增之前就退出了。如果在这里把break 替换为continue 的话，则可以看到另一种结果：

var num = 0;

for (var i=1; i < 10; i++) {
    if (i % 5 == 0) {
        continue;


    }
    num++;
}

alert(num);    //8

ContinueStatementExample01.htm

例子的结果显示8，也就是循环总共执行了8次。当变量i 等于5时，循环会在num 再次递增之前退出，但接下来执行的是下一次循环，即i 的值等于6的循环。于是，循环又继续执行，直到i 等于10时自然结束。而num 的最终值之所以是8，是因为continue 语句导致它少递增了一次。

break 和continue 语句都可以与label 语句联合使用，从而返回代码中特定的位置。这种联合使用的情况多发生在循环嵌套的情况下，如下面的例子所示：

var num = 0;

outermost:
for (var i=0; i < 10; i++) {
     for (var j=0; j < 10; j++) {
        if (i == 5 && j == 5) {
            break outermost;
        }
        num++;
    }
}

alert(num);    //55

BreakStatementExample02.htm

在这个例子中，outermost 标签表示外部的for 语句。如果每个循环正常执行10次，则num++ 语句就会正常执行100次。换句话说，如果两个循环都自然结束，num 的值应该是100。但内部循环中的break 语句带了一个参数：要返回到的标签。添加这个标签的结果将导致break 语句不仅会退出内部的for语句（即使用变量j 的循环），而且也会退出外部的for 语句（即使用变量i 的循环）。为此，当变量i 和j 都等于5时，num 的值正好是55。同样，continue 语句也可以像这样与label 语句联用，如下面的例子所示：

var num = 0;

outermost:
for (var i=0; i < 10; i++) {
    for (var j=0; j < 10; j++) {
        if (i == 5 && j == 5) {
            continue outermost;


        }
        num++;
    }
}

alert(num);    //95

ContinueStatementExample02.htm

在这种情况下，continue 语句会强制继续执行循环——退出内部循环，执行外部循环。当j 是5时，continue 语句执行，而这也就意味着内部循环少执行了5次，因此num 的结果是95。

虽然联用break 、continue 和label 语句能够执行复杂的操作，但如果使用过度，也会给调试带来麻烦。在此，我们建议如果使用label 语句，一定要使用描述性的标签，同时不要嵌套过多的循环。

3.6.8　`with` 语句

with 语句的作用是将代码的作用域设置到一个特定的对象中。with 语句的语法如下：

with (expression) statement;

定义with 语句的目的主要是为了简化多次编写同一个对象的工作，如下面的例子所示：

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

上面几行代码都包含location 对象。如果使用with 语句，可以把上面的代码改写成如下所示：

with(location){
    var qs = search.substring(1);
    var hostName = hostname;
    var url = href;
}

WithStatementExample01.htm

在这个重写后的例子中，使用with 语句关联了location 对象。这意味着在with 语句的代码块内部，每个变量首先被认为是一个局部变量，而如果在局部环境中找不到该变量的定义，就会查询location 对象中是否有同名的属性。如果发现了同名属性，则以location 对象属性的值作为变量的值。

严格模式下不允许使用with 语句，否则将视为语法错误。

由于大量使用 with 语句会导致性能下降，同时也会给调试代码造成困难，因此在开发大型应用程序时，不建议使用 with 语句。

3.6.9　`switch` 语句

switch 语句与if 语句的关系最为密切，而且也是在其他语言中普遍使用的一种流控制语句。ECMAScript中switch 语句的语法与其他基于C的语言非常接近，如下所示：

switch (expression) {
  case value: statement
    break;
  case value: statement
    break;
  case value: statement
    break;
  case value: statement
    break;
  default: statement
}

switch 语句中的每一种情形（case）的含义是：“如果表达式等于这个值（value），则执行后面的语句（statement）”。而break 关键字会导致代码执行流跳出switch 语句。如果省略break 关键字，就会导致执行完当前case后，继续执行下一个case。最后的default 关键字则用于在表达式不匹配前面任何一种情形的时候，执行机动代码（因此，也相当于一个else 语句）。

从根本上讲，switch 语句就是为了让开发人员免于编写像下面这样的代码：

if (i == 25){
  alert("25");
} else if (i == 35) {
  alert("35");
} else if (i == 45) {
  alert("45");
} else {
  alert("Other");
}

而与此等价的switch 语句如下所示：

switch (i) {
    case 25: 
        alert("25");
        break;
    case 35: 
        alert("35");
        break;
    case 45: 
        alert("45");
        break;
    default: 
        alert("Other");
}

SwitchStatementExample01.htm

通过为每个case后面都添加一个break 语句，就可以避免同时执行多个case代码的情况。假如确实需要混合几种情形，不要忘了在代码中添加注释，说明你是有意省略了break 关键字，如下所示：

switch (i) {
    case 25: 
        /* 合并两种情形 */


    case 35: 
        alert("25 or 35");
        break;
    case 45: 
        alert("45");
        break;
    default: 
        alert("Other");
}

SwitchStatementExample02.htm

虽然ECMAScript中的switch 语句借鉴自其他语言，但这个语句也有自己的特色。首先，可以在switch 语句中使用任何数据类型（在很多其他语言中只能使用数值），无论是字符串，还是对象都没有问题。其次，每个case的值不一定是常量，可以是变量，甚至是表达式。请看下面这个例子：

switch ("hello world") {
    case "hello" + " world": 
        alert("Greeting was found.");
        break;
    case "goodbye": 
        alert("Closing was found.");
        break;
    default: 
        alert("Unexpected message was found.");
}

SwitchStatementExample03.htm

在这个例子中，switch 语句使用的就是字符串。其中，第一种情形实际上是一个对字符串拼接操作求值的表达式。由于这个字符串拼接表达式的结果与switch 的参数相等，因此结果就会显示"Greeting was found." 。而且，使用表达式作为case值还可以实现下列操作：

var num = 25;
switch (true) {
    case num < 0: 
        alert("Less than 0.");
        break;
    case num >= 0 && num <= 10: 
        alert("Between 0 and 10.");
        break;
    case num > 10 && num <= 20: 
        alert("Between 10 and 20.");
        break;
    default: 
        alert("More than 20.");
}

SwitchStatementExample04.htm

这个例子首先在switch 语句外面声明了变量num 。而之所以给switch 语句传递表达式true ，是因为每个case值都可以返回一个布尔值。这样，每个case按照顺序被求值，直到找到匹配的值或者遇到default 语句为止（这正是这个例子的最终结果）。

switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换（例如，字符串"10" 不等于数值10）。

3.7　函数

函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。ECMAScript中的函数使用function 关键字来声明，后跟一组参数以及函数体。函数的基本语法如下所示：

function functionName(arg0, arg1,...,argN) {
    statements
}

以下是一个函数示例：

function sayHi(name, message) {
    alert("Hello " + name + "," + message);
}

FunctionExample01.htm

这个函数可以通过其函数名来调用，后面还要加上一对圆括号和参数（圆括号中的参数如果有多个，可以用逗号隔开）。调用sayHi() 函数的代码如下所示：

sayHi("Nicholas", "how are you today?");

这个函数的输出结果是"Hello Nicholas,how are you today?" 。函数中定义中的命名参数name 和message 被用作了字符串拼接的两个操作数，而结果最终通过警告框显示了出来。

ECMAScript中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过return 语句后跟要返回的值来实现返回值。请看下面的例子：

function sum(num1, num2) {
    return num1 + num2;
}

FunctionExample02.htm

这个sum() 函数的作用是把两个值加起来返回一个结果。我们注意到，除了return 语句之外，没有任何声明表示该函数会返回一个值。调用这个函数的示例代码如下：

var result = sum(5, 10);

这个函数会在执行完return 语句之后停止并立即退出。因此，位于return 语句之后的任何代码都永远不会执行。例如：

function sum(num1, num2) {
    return num1 + num2;
    alert("Hello world");    // 永远不会执行


}

在这个例子中，由于调用alert() 函数的语句位于return 语句之后，因此永远不会显示警告框。

当然，一个函数中也可以包含多个return 语句，如下面这个例子中所示：

function diff(num1, num2) {
    if (num1 < num2) {
        return num2 - num1;
    } else {
        return num1 - num2;
    }
}

FunctionExample03.htm

这个例子中定义的diff() 函数用于计算两个数值的差。如果第一个数比第二个小，则用第二个数减第一个数；否则，用第一个数减第二个数。代码中的两个分支都具有自己的return 语句，分别用于执行正确的计算。

另外，return 语句也可以不带有任何返回值。在这种情况下，函数在停止执行后将返回undefined 值。这种用法一般用在需要提前停止函数执行而又不需要返回值的情况下。比如在下面这个例子中，就不会显示警告框：

function sayHi(name, message) {
    return;


    alert("Hello " + name + "," + message);    //永远不会调用
}

FunctionExample04.htm

推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。否则，如果函数有时候返回值，有时候有不返回值，会给调试代码带来不便。

严格模式对函数有一些限制：

不能把函数命名为eval 或arguments ；
不能把参数命名为eval 或arguments ；
不能出现两个命名参数同名的情况。

如果发生以上情况，就会导致语法错误，代码无法执行。

3.7.1　理解参数

ECMAScript函数的参数与大多数其他语言中函数的参数有所不同。ECMAScript函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言。之所以会这样，原因是ECMAScript中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。实际上，在函数体内可以通过arguments 对象来访问这个参数数组，从而获取传递给函数的每一个参数。

其实，arguments 对象只是与数组类似（它并不是Array 的实例），因为可以使用方括号语法访问它的每一个元素（即第一个元素是arguments[0] ，第二个元素是argumetns[1] ，以此类推），使用length 属性来确定传递进来多少个参数。在前面的例子中，sayHi() 函数的第一个参数的名字叫name ，而该参数的值也可以通过访问arguments[0] 来获取。因此，那个函数也可以像下面这样重写，即不显式地使用命名参数：

function sayHi() {
    alert("Hello " + arguments[0] + "," + arguments[1]);
}

FunctionExample05.htm

这个重写后的函数中不包含命名的参数。虽然没有使用name 和message 标识符，但函数的功能依旧。这个事实说明了ECMAScript函数的一个重要特点：命名的参数只提供便利，但不是必需的。另外，在命名参数方面，其他语言可能需要事先创建一个函数签名，而将来的调用必须与该签名一致。但在ECMAScript中，没有这些条条框框，解析器不会验证命名参数。

通过访问arguments 对象的length 属性可以获知有多少个参数传递给了函数。下面这个函数会在每次被调用时，输出传入其中的参数个数：

function howManyArgs() {
    alert(arguments.length);
}

howManyArgs("string", 45);  //2
howManyArgs();              //0
howManyArgs(12);            //1

FunctionExample06.htm

执行以上代码会依次出现3个警告框，分别显示2、0和1。由此可见，开发人员可以利用这一点让函数能够接收任意个参数并分别实现适当的功能。请看下面的例子：

function doAdd() {
    if(arguments.length == 1) {
        alert(arguments[0] + 10);
    } else if (arguments.length == 2) {
        alert(arguments[0] + arguments[1]);
    }
}

doAdd(10);         //20
doAdd(30, 20);     //50

FunctionExample07.htm

函数doAdd() 会在只有一个参数的情况下给该参数加上10；如果是两个参数，则将那个参数简单相加并返回结果。因此，doAdd(10) 会返回20，而doAdd(30,20) 则返回50。虽然这个特性算不上完美的重载，但也足够弥补ECMAScript的这一缺憾了。

另一个与参数相关的重要方面，就是arguments 对象可以与命名参数一起使用，如下面的例子所示：

function doAdd(num1, num2) {
    if(arguments.length == 1) {


       alert(num1 + 10);
    } else if (arguments.length == 2) {


        alert(arguments[0] + num2);
    }


}

FunctionExample08.htm

在重写后的这个doAdd() 函数中，两个命名参数都与arguments 对象一起使用。由于num1 的值与arguments[0] 的值相同，因此它们可以互换使用（当然，num2 和arguments[1] 也是如此）。

关于arguments 的行为，还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步。例如：

function doAdd(num1, num2) {
    arguments[1] = 10;    
    alert(arguments[0] + num2);
}

FunctionExample09.htm

每次执行这个doAdd() 函数都会重写第二个参数，将第二个参数的值修改为10。因为arguments 对象中的值会自动反映到对应的命名参数，所以修改arguments[1] ，也就修改了num2 ，结果它们的值都会变成10。不过，这并不是说读取这两个值会访问相同的内存空间；它们的内存空间是独立的，但它们的值会同步。但这种影响是单向的：修改命名参数不会改变arguments 中对应的值。另外还要记住，如果只传入了一个参数，那么为arguments[1] 设置的值不会反应到命名参数中。这是因为arguments 对象的长度是由传入的参数个数决定的，不是由定义函数时的命名参数的个数决定的。

关于参数还要记住最后一点：没有传递值的命名参数将自动被赋予undefined 值。这就跟定义了变量但又没有初始化一样。例如，如果只给doAdd() 函数传递了一个参数，则num2 中就会保存undefined 值。

严格模式对如何使用argumetns 对象做出了一些限制。首先，像前面例子中那样的赋值会变得无效。也就是说，即使把arguments[1] 设置为10 ，num2 的值仍然还是undefined 。其次，重写arguments 的值会导致语法错误（代码将不会执行）。

ECMAScript中的所有参数传递的都是值，不可能通过引用传递参数。

3.7.2　没有重载

ECMAScript函数不能像传统意义上那样实现重载。而在其他语言（如Java）中，可以为一个函数编写两个定义，只要这两个定义的签名（接受的参数的类型和数量）不同即可。如前所述，ECMAScirpt函数没有签名，因为其参数是由包含零或多个值的数组来表示的。而没有函数签名，真正的重载是不可能做到的。

如果在ECMAScript中定义了两个名字相同的函数，则该名字只属于后定义的函数。请看下面的例子：

function addSomeNumber(num){
    return num + 100;
}

function addSomeNumber(num) {
    return num + 200;
}

var result = addSomeNumber(100);    //300

FunctionExample10.htm

在此，函数addSomeNumber() 被定义了两次。第一个版本给参数加100，而第二个版本给参数加200。由于后定义的函数覆盖了先定义的函数，因此当在最后一行代码中调用这个函数时，返回的结果就是300。

如前所述，通过检查传入函数中参数的类型和数量并作出不同的反应，可以模仿方法的重载。

3.8　小结

JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的。ECMAScript中包含了所有基本的语法、操作符、数据类型以及完成基本的计算任务所必需的对象，但没有对取得输入和产生输出的机制作出规定。理解ECMAScript及其纷繁复杂的各种细节，是理解其在Web浏览器中的实现——JavaScript的关键。目前大多数实现所遵循的都是ECMA-262第3版，但很多也已经着手开始实现第5版了。以下简要总结了ECMAscript中基本的要素。

ECMAScript中的基本数据类型包括Undefined 、Null 、Boolean 、Number 和String 。
与其他语言不同，ECMScript没有为整数和浮点数值分别定义不同的数据类型，Number 类型可用于表示所有数值。
ECMAScript中也有一种复杂的数据类型，即Object类型，该类型是这门语言中所有对象的基础类型。
严格模式为这门语言中容易出错的地方施加了限制。
ECMAScript提供了很多与C及其他类C语言中相同的基本操作符，包括算术操作符、布尔操作符、关系操作符、相等操作符及赋值操作符等。
ECMAScript从其他语言中借鉴了很多流控制语句，例如if 语句、for 语句和switch 语句等。

ECMAScript中的函数与其他语言中的函数有诸多不同之处。

无须指定函数的返回值，因为任何ECMAScript函数都可以在任何时候返回任何值。
实际上，未指定返回值的函数返回的是一个特殊的undefined 值。
ECMAScript中也没有函数签名的概念，因为其函数参数是以一个包含零或多个值的数组的形式传递的。
可以向ECMAScript函数传递任意数量的参数，并且可以通过arguments 对象来访问这些参数。
由于不存在函数签名的特性，ECMAScript函数不能重载。

第4章　变量、作用域和内存问题

本章内容

理解基本类型和引用类型的值
理解执行环境
理解垃圾收集

按照ECMA-262的定义，JavaScript的变量与其他语言的变量有很大区别。JavaScript变量松散类型的本质，决定了它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要保存何种数据类型值的规则，变量的值及其数据类型可以在脚本的生命周期内改变。尽管从某种角度看，这可能是一个既有趣又强大，同时又容易出问题的特性，但JavaScript变量实际的复杂程度还远不止如此。

4.1　基本类型和引用类型的值

ECMAScript变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值 指的是简单的数据段，而引用类型值 指那些可能由多个值构成的对象。

在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。第3章讨论了5种基本数据类型：Undefined 、Null 、Boolean 、Number 和String 。这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。

引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。为此，引用类型的值是按引用访问的。

在很多语言中，字符串以对象的形式来表示，因此被认为是引用类型的。ECMAScript放弃了这一传统。

4.1.1　动态的属性

定义基本类型值和引用类型值的方式是类似的：创建一个变量并为该变量赋值。但是，当这个值保存到变量中以后，对不同类型值可以执行的操作则大相径庭。对于引用类型的值，我们可以为其添加属性和方法，也可以改变和删除其属性和方法。请看下面的例子：

var person = new Object();
person.name = "Nicholas";
alert(person.name);       //"Nicholas"

DynamicPropertiesExample01.htm

以上代码创建了一个对象并将其保存在了变量person 中。然后，我们为该对象添加了一个名为name 的属性，并将字符串值"Nicholas" 赋给了这个属性。紧接着，又通过alert() 函数访问了这个新属性。如果对象不被销毁或者这个属性不被删除，则这个属性将一直存在。

但是，我们不能给基本类型的值添加属性，尽管这样做不会导致任何错误。比如：

var name = "Nicholas";
name.age = 27;
alert(name.age);      //undefined

DynamicPropertiesExample02.htm

在这个例子中，我们为字符串name 定义了一个名为age 的属性，并为该属性赋值27。但在下一行访问这个属性时，发现该属性不见了。这说明只能给引用类型值动态地添加属性，以便将来使用。

4.1.2　复制变量值

除了保存的方式不同之外，在从一个变量向另一个变量复制基本类型值和引用类型值时，也存在不同。如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。来看一个例子：

var num1 = 5;
var num2 = num1;

在此，num1 中保存的值是5。当使用num1 的值来初始化num2 时，num2 中也保存了值5。但num2 中的5与num1 中的5是完全独立的，该值只是num1 中5的一个副本。此后，这两个变量可以参与任何操作而不会相互影响。图4-1形象地展示了复制基本类型值的过程。

图　4-1

当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一个变量，如下面的例子所示：

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name);  //"Nicholas"

首先，变量obj1 保存了一个对象的新实例。然后，这个值被复制到了obj2 中；换句话说，obj1 和obj2 都指向同一个对象。这样，当为obj1 添加name 属性后，可以通过obj2 来访问这个属性，因为这两个变量引用的都是同一个对象。图4-2展示了保存在变量对象中的变量和保存在堆中的对象之间的这种关系。

图　4-2

4.1.3　传递参数

ECMAScript中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。有不少开发人员在这一点上可能会感到困惑，因为访问变量有按值和按引用两种方式，而参数只能按值传递。

在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用ECMAScript的概念来说，就是arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。请看下面这个例子：

function addTen(num) {
    num += 10;
    return num;
}

var count = 20;
var result = addTen(count);
alert(count);    //20，没有变化
alert(result);   //30

FunctionArgumentsExample01.htm

这里的函数addTen() 有一个参数num ，而参数实际上是函数的局部变量。在调用这个函数时，变量count 作为参数被传递给函数，这个变量的值是20。于是，数值20被复制给参数num 以便在addTen() 中使用。在函数内部，参数num 的值被加上了10，但这一变化不会影响函数外部的count 变量。参数num 与变量count 互不相识，它们仅仅是具有相同的值。假如num 是按引用传递的话，那么变量count 的值也将变成30，从而反映函数内部的修改。当然，使用数值等基本类型值来说明按值传递参数比较简单，但如果使用对象，那问题就不怎么好理解了。再举一个例子：

function setName(obj) {
    obj.name = "Nicholas";
}

var person = new Object();
setName(person);
alert(person.name);    //"Nicholas"

FunctionArgumentsExample02.htm

以上代码中创建一个对象，并将其保存在了变量person 中。然后，这个对象被传递到setName() 函数中之后就被复制给了obj 。在这个函数内部，obj 和person 引用的是同一个对象。换句话说，即使这个对象是按值传递的，obj 也会按引用来访问同一个对象。于是，当在函数内部为obj 添加name 属性后，函数外部的person 也将有所反映；因为person 指向的对象在堆内存中只有一个，而且是全局对象。有很多开发人员错误地认为：在局部作用域中修改的对象会在全局作用域中反映出来，就说明参数是按引用传递的。为了证明对象是按值传递的，我们再看一看下面这个经过修改的例子：

function setName(obj) {
    obj.name = "Nicholas";
    obj = new Object();


    obj.name = "Greg";


}

var person = new Object();
setName(person);
alert(person.name);    //"Nicholas"

这个例子与前一个例子的唯一区别，就是在setName() 函数中添加了两行代码：一行代码为obj 重新定义了一个对象，另一行代码为该对象定义了一个带有不同值的name 属性。在把person 传递给setName() 后，其name 属性被设置为"Nicholas" 。然后，又将一个新对象赋给变量obj ，同时将其name 属性设置为"Greg" 。如果person 是按引用传递的，那么person 就会自动被修改为指向其name 属性值为"Greg" 的新对象。但是，当接下来再访问person.name 时，显示的值仍然是"Nicholas" 。这说明即使在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写obj 时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

可以把ECMAScript函数的参数想象成局部变量。

4.1.4　检测类型

要检测一个变量是不是基本数据类型？第3章介绍的typeof 操作符是最佳的工具。说得更具体一点，typeof 操作符是确定一个变量是字符串、数值、布尔值，还是undefined 的最佳工具。如果变量的值是一个对象或null ，则typeof 操作符会像下面例子中所示的那样返回"object" ：

var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();

alert(typeof s);   //string
alert(typeof i);   //number
alert(typeof b);   //boolean
alert(typeof u);   //undefined
alert(typeof n);   //object
alert(typeof o);   //object

DeterminingTypeExample01.htm

虽然在检测基本数据类型时typeof 是非常得力的助手，但在检测引用类型的值时，这个操作符的用处不大。通常，我们并不是想知道某个值是对象，而是想知道它是什么类型的对象。为此，ECMAScript提供了instanceof 操作符，其语法如下所示：

result = variable instanceof constructor

如果变量是给定引用类型（根据它的原型链来识别；第6章将介绍原型链）的实例，那么instanceof 操作符就会返回true 。请看下面的例子：

alert(person instanceof Object);     // 变量person是Object吗？
alert(colors instanceof Array);      // 变量colors是Array吗？
alert(pattern instanceof RegExp);    // 变量pattern是RegExp吗？

根据规定，所有引用类型的值都是Object 的实例。因此，在检测一个引用类型值和Object 构造函数时，instanceof 操作符始终会返回true 。当然，如果使用instanceof 操作符检测基本类型的值，则该操作符始终会返回false ，因为基本类型不是对象。

使用 typeof 操作符检测函数时，该操作符会返回 "function" 。在Safari 5及之前版本和Chrome 7及之前版本中使用 typeof 检测正则表达式时，由于规范的原因，这个操作符也返回 "function" 。ECMA-262规定任何在内部实现 [[Call]] 方法的对象都应该在应用 typeof 操作符时返回 "function" 。由于上述浏览器中的正则表达式也实现了这个方法，因此对正则表达式应用 typeof 会返回 "function" 。在IE和Firefox中，对正则表达式应用 typeof 会返回"object " 。

4.2　执行环境及作用域

执行环境（execution context，为简单起见，有时也称为“环境 ”）是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象 （variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

全局执行环境是最外围的一个执行环境。根据ECMAScript实现所在的宿主环境不同，表示执行环境的对象也不一样。在Web浏览器中，全局执行环境被认为是window 对象（第7章将详细讨论），因此所有全局变量和函数都是作为window 对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁）。

每个函数都有自己的执行环境 。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMAScript程序中的执行流正是由这个方便的机制控制着。

当代码在一个环境中执行时，会创建变量对象的一个作用域链 （scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象 （activation object）作为变量对象。活动对象在最开始时只包含一个变量，即arguments 对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直至找到标识符为止（如果找不到标识符，通常会导致错误发生）。

请看下面的示例代码：

var color = "blue";

function changeColor(){
    if (color === "blue"){
        color = "red";
    } else {
        color = "blue";
    }
}

changeColor();

alert("Color is now " + color);

ExecutionContextExample01.htm

在这个简单的例子中，函数changeColor() 的作用域链包含两个对象：它自己的变量对象（其中定义着arguments 对象）和全局环境的变量对象。可以在函数内部访问变量color ，就是因为可以在这个作用域链中找到它。

此外，在局部作用域中定义的变量可以在局部环境中与全局变量互换使用，如下面这个例子所示：

var color = "blue";

function changeColor(){
    var anotherColor = "red";

    function swapColors(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;

        // 这里可以访问color、anotherColor和tempColor
    }

    // 这里可以访问color和anotherColor，但不能访问tempColor
    swapColors();
}

// 这里只能访问color
changeColor();

以上代码共涉及3个执行环境：全局环境、changeColor() 的局部环境和swapColors() 的局部环境。全局环境中有一个变量color 和一个函数changeColor() 。changeColor() 的局部环境中有一个名为anotherColor 的变量和一个名为swapColors() 的函数，但它也可以访问全局环境中的变量color 。swapColors() 的局部环境中有一个变量tempColor ，该变量只能在这个环境中访问到。无论全局环境还是changeColor() 的局部环境都无权访问tempColor 。然而，在swapColors() 内部则可以访问其他两个环境中的所有变量，因为那两个环境是它的父执行环境。图4-3形象地展示了前面这个例子的作用域链。

图　4-3

图4-3中的矩形表示特定的执行环境。其中，内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。对于这个例子中的swapColors() 而言，其作用域链中包含3个对象：swapColors() 的变量对象、changeColor() 的变量对象和全局变量对象。swapColors() 的局部环境开始时会先在自己的变量对象中搜索变量和函数名，如果搜索不到则再搜索上一级作用域链。changeColor() 的作用域链中只包含两个对象：它自己的变量对象和全局变量对象。这也就是说，它不能访问swapColors() 的环境。

函数参数也被当作变量来对待，因此其访问规则与执行环境中的其他变量相同。

4.2.1　延长作用域链

虽然执行环境的类型总共只有两种——全局和局部（函数），但还是有其他办法来延长作用域链。这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。在两种情况下会发生这种现象。具体来说，就是当执行流进入下列任何一个语句时，作用域链就会得到加长：

try-catch 语句的catch 块；
with 语句。

这两个语句都会在作用域链的前端添加一个变量对象。对with 语句来说，会将指定的对象添加到作用域链中。对catch 语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。下面看一个例子。

function buildUrl() {
    var qs = "?debug=true";

    with(location){
        var url = href + qs;
    }

    return url;
}

ExecutionContextExample03.htm

在此，with 语句接收的是location 对象，因此其变量对象中就包含了location 对象的所有属性和方法，而这个变量对象被添加到了作用域链的前端。buildUrl() 函数中定义了一个变量qs 。当在with 语句中引用变量href 时（实际引用的是location.href ），可以在当前执行环境的变量对象中找到。当引用变量qs 时，引用的则是在buildUrl() 中定义的那个变量，而该变量位于函数环境的变量对象中。至于with 语句内部，则定义了一个名为url 的变量，因而url 就成了函数执行环境的一部分，所以可以作为函数的值被返回。

在IE8及之前版本的JavaScript实现中，存在一个与标准不一致的地方，即在 catch 语句中捕获的错误对象会被添加到执行环境的变量对象，而不是 catch 语句的变量对象中。换句话说，即使是在 catch 块的外部也可以访问到错误对象。IE9修复了这个问题。

4.2.2　没有块级作用域

JavaScript没有块级作用域经常会导致理解上的困惑。在其他类C的语言中，由花括号封闭的代码块都有自己的作用域（如果用ECMAScript的话来讲，就是它们自己的执行环境），因而支持根据条件来定义变量。例如，下面的代码在JavaScript中并不会得到想象中的结果：

if (true) {
    var color = "blue";
}

alert(color);    //"blue"

这里是在一个if 语句中定义了变量color 。如果是在C、C++或Java中，color 会在if 语句执行完毕后被销毁。但在JavaScript中，if 语句中的变量声明会将变量添加到当前的执行环境（在这里是全局环境）中。在使用for 语句时尤其要牢记这一差异，例如：

for (var i=0; i < 10; i++){
    doSomething(i);
}

alert(i);      //10

对于有块级作用域的语言来说，for 语句初始化变量的表达式所定义的变量，只会存在于循环的环境之中。而对于JavaScript来说，由for 语句创建的变量i 即使在for 循环执行结束后，也依旧会存在于循环外部的执行环境中。

1. 声明变量

使用var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在with 语句中，最接近的环境是函数环境。如果初始化变量时没有使用var 声明，该变量会自动被添加到全局环境。如下所示：

function add(num1, num2) {
    var sum = num1 + num2;
    return sum;
}

var result = add(10, 20);    //30
alert(sum);                  //由于sum不是有效的变量，因此会导致错误

ExecutionContextExample04.htm

以上代码中的函数add() 定义了一个名为sum 的局部变量，该变量包含加法操作的结果。虽然结果值从函数中返回了，但变量sum 在函数外部是访问不到的。如果省略这个例子中的var 关键字，那么当add() 执行完毕后，sum 也将可以访问到：

function add(num1, num2) {
    sum = num1 + num2;


    return sum;
}

var result = add(10, 20);    //30
alert(sum);                  //30

ExecutionContextExample05.htm

这个例子中的变量sum 在被初始化赋值时没有使用var 关键字。于是，当调用完add() 之后，添加到全局环境中的变量sum 将继续存在；即使函数已经执行完毕，后面的代码依旧可以访问它。

在编写JavaScript代码的过程中，不声明而直接初始化变量是一个常见的错误做法，因为这样可能会导致意外。我们建议在初始化变量之前，一定要先声明，这样就可以避免类似问题。在严格模式下，初始化未经声明的变量会导致错误。

2. 查询标识符

当在某个环境中为了读取或写入而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始，向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到了该标识符，搜索过程停止，变量就绪。如果在局部环境中没有找到该变量名，则继续沿作用域链向上搜索。搜索过程将一直追溯到全局环境的变量对象。如果在全局环境中也没有找到这个标识符，则意味着该变量尚未声明。

通过下面这个示例，可以理解查询标识符的过程：

var color = "blue";

function getColor(){
    return color;
}

alert(getColor());  //"blue"

ExecutionContextExample06.htm

调用本例中的函数getColor() 时会引用变量color 。为了确定变量color 的值，将开始一个两步的搜索过程。首先，搜索getColor() 的变量对象，查找其中是否包含一个名为color 的标识符。在没有找到的情况下，搜索继续到下一个变量对象（全局环境的变量对象），然后在那里找到了名为color 的标识符。因为搜索到了定义这个变量的变量对象，搜索过程宣告结束。图4-4形象地展示了上述搜索过程。

图　4-4

在这个搜索过程中，如果存在一个局部的变量的定义，则搜索会自动停止，不再进入另一个变量对象。换句话说，如果局部环境中存在着同名标识符，就不会使用位于父环境中的标识符，如下面的例子所示：

var color = "blue";

function getColor(){
    var color = "red";


    return color;
}

alert(getColor());  //"red"

ExecutionContextExample07.htm

修改后的代码在getColor() 函数中声明了一个名为color 的局部变量。调用函数时，该变量就会被声明。而当函数中的第二行代码执行时，意味着必须找到并返回变量color 的值。搜索过程首先从局部环境中开始，而且在这里发现了一个名为color 的变量，其值为"red" 。因为变量已经找到了，所以搜索即行停止，return 语句就使用这个局部变量，并为函数会返回"red" 。也就是说，任何位于局部变量color 的声明之后的代码，如果不使用window.color 都无法访问全局color 变量。如果有一个操作数是对象，而另一个不是，就会在对象上调用valueOf() 方法以取得基本类型的值，以便根据前面的规则进行比较。

变量查询也不是没有代价的。很明显，访问局部变量要比访问全局变量更快，因为不用向上搜索作用域链。JavaScript引擎在优化标识符查询方面做得不错，因此这个差别在将来恐怕就可以忽略不计了。

4.3　垃圾收集

JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。在编写JavaScript程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。

下面我们来分析一下函数中局部变量的正常生命周期。局部变量只在函数执行的过程中存在。而在这个过程中，会为局部变量在栈（或堆）内存上分配相应的空间，以便存储它们的值。然后在函数中使用这些变量，直至函数执行结束。此时，局部变量就没有存在的必要了，因此可以释放它们的内存以供将来使用。在这种情况下，很容易判断变量是否还有存在的必要；但并非所有情况下都这么容易就能得出结论。垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存。用于标识无用变量的策略可能会因实现而异，但具体到浏览器中的实现，则通常有两个策略。

4.3.1　标记清除

JavaScript中最常用的垃圾收集方式是标记清除 （mark-and-sweep）。当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

可以使用任何方式来标记变量。比如，可以通过翻转某个特殊的位来记录一个变量何时进入环境，或者使用一个“进入环境的”变量列表及一个“离开环境的”变量列表来跟踪哪个变量发生了变化。说到底，如何标记变量其实并不重要，关键在于采取什么策略。

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（当然，可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除 工作，销毁那些带标记的值并回收它们所占用的内存空间。

到2008年为止，IE、Firefox、Opera、Chrome和Safari的JavaScript实现使用的都是标记清除式的垃圾收集策略（或类似的策略），只不过垃圾收集的时间间隔互有不同。

4.3.2　引用计数

另一种不太常见的垃圾收集策略叫做引用计数 （reference counting）。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。

Netscape Navigator 3.0是最早使用引用计数策略的浏览器，但很快它就遇到了一个严重的问题：循环引用。循环引用 指的是对象A中包含一个指向对象B的指针，而对象B中也包含一个指向对象A的引用。请看下面这个例子：

function problem(){
    var objectA = new Object();
    var objectB = new Object();

    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

在这个例子中，objectA 和objectB 通过各自的属性相互引用；也就是说，这两个对象的引用次数都是2。在采用标记清除策略的实现中，由于函数执行之后，这两个对象都离开了作用域，因此这种相互引用不是个问题。但在采用引用计数策略的实现中，当函数执行完毕后，objectA 和objectB 还将继续存在，因为它们的引用次数永远不会是0。假如这个函数被重复多次调用，就会导致大量内存得不到回收。为此，Netscape在Navigator 4.0中放弃了引用计数方式，转而采用标记清除来实现其垃圾收集机制。可是，引用计数导致的麻烦并未就此终结。

我们知道，IE中有一部分对象并不是原生JavaScript对象。例如，其BOM和DOM中的对象就是使用C++以COM（Component Object Model，组件对象模型）对象的形式实现的，而COM对象的垃圾收集机制采用的就是引用计数策略。因此，即使IE的JavaScript引擎是使用标记清除策略来实现的，但JavaScript访问的COM对象依然是基于引用计数策略的。换句话说，只要在IE中涉及COM对象，就会存在循环引用的问题。下面这个简单的例子，展示了使用COM对象导致的循环引用问题：

var element = document.getElementById("some_element");
var myObject = new Object();
myObject.element = element;
element.someObject = myObject;

这个例子在一个DOM元素（element ）与一个原生JavaScript对象（myObject ）之间创建了循环引用。其中，变量myObject 有一个名为element 的属性指向element 对象；而变量element 也有一个属性名叫someObject 回指myObject 。由于存在这个循环引用，即使将例子中的DOM从页面中移除，它也永远不会被回收。

为了避免类似这样的循环引用问题，最好是在不使用它们的时候手工断开原生JavaScript对象与DOM元素之间的连接。例如，可以使用下面的代码消除前面例子创建的循环引用：

myObject.element = null;
element.someObject = null;

将变量设置为null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就会删除这些值并回收它们占用的内存。

为了解决上述问题，IE9把BOM和DOM对象都转换成了真正的JavaScript对象。这样，就避免了两种垃圾收集算法并存导致的问题，也消除了常见的内存泄漏现象。

导致循环引用的情况不止这些，其他一些情况将在本书中陆续介绍。

4.3.3　性能问题

垃圾收集器是周期性运行的，而且如果为变量分配的内存数量很可观，那么回收工作量也是相当大的。在这种情况下，确定垃圾收集的时间间隔是一个非常重要的问题。说到垃圾收集器多长时间运行一次，不禁让人联想到IE因此而声名狼藉的性能问题。IE的垃圾收集器是根据内存分配量运行的，具体一点说就是256个变量、4096个对象（或数组）字面量和数组元素（slot）或者64KB的字符串。达到上述任何一个临界值，垃圾收集器就会运行。这种实现方式的问题在于，如果一个脚本中包含那么多变量，那么该脚本很可能会在其生命周期中一直保有那么多的变量。而这样一来，垃圾收集器就不得不频繁地运行。结果，由此引发的严重性能问题促使IE7重写了其垃圾收集例程。

随着IE7的发布，其JavaScript引擎的垃圾收集例程改变了工作方式：触发垃圾收集的变量分配、字面量和（或）数组元素的临界值被调整为动态修正。IE7中的各项临界值在初始时与IE6相等。如果垃圾收集例程回收的内存分配量低于15%，则变量、字面量和（或）数组元素的临界值就会加倍。如果例程回收了85%的内存分配量，则将各种临界值重置回默认值。这一看似简单的调整，极大地提升了IE在运行包含大量JavaScript的页面时的性能。

事实上，在有的浏览器中可以触发垃圾收集过程，但我们不建议读者这样做。在IE中，调用 window.CollectGarbage() 方法会立即执行垃圾收集。在Opera 7及更高版本中，调用 window.opera.collect() 也会启动垃圾收集例程。

4.3.4　管理内存

使用具备垃圾收集机制的语言编写程序，开发人员一般不必操心内存管理的问题。但是，JavaScript在进行内存管理及垃圾收集时面临的问题还是有点与众不同。其中最主要的一个问题，就是分配给Web浏览器的可用内存数量通常要比分配给桌面应用程序的少。这样做的目的主要是出于安全方面的考虑，目的是防止运行JavaScript的网页耗尽全部系统内存而导致系统崩溃。内存限制问题不仅会影响给变量分配内存，同时还会影响调用栈以及在一个线程中能够同时执行的语句数量。

因此，确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式，就是为执行中的代码只保存必要的数据。一旦数据不再有用，最好通过将其值设置为null 来释放其引用——这个做法叫做解除引用 （dereferencing）。这一做法适用于大多数全局变量和全局对象的属性。局部变量会在它们离开执行环境时自动被解除引用，如下面这个例子所示：

function createPerson(name){
    var localPerson = new Object();
    localPerson.name = name;
    return localPerson;
}

var globalPerson = createPerson("Nicholas");

// 手工解除globalPerson的引用

globalPerson = null;

在这个例子中，变量globalPerson 取得了createPerson() 函数返回的值。在createPerson() 函数内部，我们创建了一个对象并将其赋给局部变量localPerson ，然后又为该对象添加了一个名为name 的属性。最后，当调用这个函数时，localPerson 以函数值的形式返回并赋给全局变量globalPerson 。由于localPerson 在createPerson() 函数执行完毕后就离开了其执行环境，因此无需我们显式地去为它解除引用。但是对于全局变量globalPerson 而言，则需要我们在不使用它的时候手工为它解除引用，这也正是上面例子中最后一行代码的目的。

不过，解除一个值的引用并不意味着自动回收该值所占用的内存。解除引用的真正作用是让值脱离执行环境，以便垃圾收集器下次运行时将其回收。

4.4　小结

JavaScript变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下5种基本数据类型：Undefined 、Null 、Boolean 、Number 和String 。基本类型值和引用类型值具有以下特点：

基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中；
从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本；
引用类型的值是对象，保存在堆内存中；
包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针；
从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象；
确定一个值是哪种基本类型可以使用typeof 操作符，而确定一个值是哪种引用类型可以使用instanceof 操作符。

所有变量（包括基本类型和引用类型）都存在于一个执行环境（也称为作用域）当中，这个执行环境决定了变量的生命周期，以及哪一部分代码可以访问其中的变量。以下是关于执行环境的几点总结：

执行环境有全局执行环境（也称为全局环境）和函数执行环境之分；
每次进入一个新执行环境，都会创建一个用于搜索变量和函数的作用域链；
函数的局部环境不仅有权访问函数作用域中的变量，而且有权访问其包含（父）环境，乃至全局环境；
全局环境只能访问在全局环境中定义的变量和函数，而不能直接访问局部环境中的任何数据；
变量的执行环境有助于确定应该何时释放内存。

JavaScript是一门具有自动垃圾收集机制的编程语言，开发人员不必关心内存分配和回收问题。可以对JavaScript的垃圾收集例程作如下总结。

离开作用域的值将被自动标记为可以回收，因此将在垃圾收集期间被删除。
“标记清除”是目前主流的垃圾收集算法，这种算法的思想是给当前不使用的值加上标记，然后再回收其内存。
另一种垃圾收集算法是“引用计数”，这种算法的思想是跟踪记录所有值被引用的次数。JavaScript引擎目前都不再使用这种算法；但在IE中访问非原生JavaScript对象（如DOM元素）时，这种算法仍然可能会导致问题。
当代码中存在循环引用现象时，“引用计数”算法就会导致问题。
解除变量的引用不仅有助于消除循环引用现象，而且对垃圾收集也有好处。为了确保有效地回收内存，应该及时解除不再使用的全局对象、全局对象属性以及循环引用变量的引用。

第5章　引用类型

本章内容

使用对象
创建并操作数组
理解基本的JavaScript类型
使用基本类型和基本包装类型

引用类型的值（对象）是引用类型 的一个实例。在ECMAScript中，引用类型 是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。尽管ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义 ，因为它们描述的是一类对象所具有的属性和方法。

虽然引用类型与类看起来相似，但它们并不是相同的概念。为避免混淆，本书将不使用类这个概念。

如前所述，对象是某个特定引用类型的实例。新对象是使用new 操作符后跟一个构造函数 来创建的。构造函数本身就是一个函数，只不过该函数是出于创建新对象的目的而定义的。请看下面这行代码：

var person = new Object();

这行代码创建了Object 引用类型的一个新实例，然后把该实例保存在了变量person 中。使用的构造函数是Object ，它只为新对象定义了默认的属性和方法。ECMAScript提供了很多原生引用类型（例如Object ），以便开发人员用以实现常见的计算任务。

5.1　Object类型

到目前为止，我们看到的大多数引用类型值都是Object 类型的实例；而且，Object 也是ECMAScript中使用最多的一个类型。虽然Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。

创建Object 实例的方式有两种。第一种是使用new 操作符后跟Object 构造函数，如下所示：

var person = new Object();
person.name = "Nicholas";
person.age = 29;

ObjectTypeExample01.htm

另一种方式是使用对象字面量 表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。下面这个例子就使用了对象字面量语法定义了与前面那个例子中相同的person 对象：

var person = {
    name : "Nicholas",
    age : 29
};

ObjectTypeExample02.htm

在这个例子中，左边的花括号（{ ）表示对象字面量的开始，因为它出现在了表达式上下文（expression context）中。ECMAScript中的表达式上下文指的是能够返回一个值（表达式）。赋值操作符表示后面是一个值，所以左花括号在这里表示一个表达式的开始。同样的花括号，如果出现在一个语句上下文（statement context）中，例如跟在if 语句条件的后面，则表示一个语句块的开始。

然后，我们定义了name 属性，之后是一个冒号，再后面是这个属性的值。在对象字面量中，使用逗号来分隔不同的属性，因此"Nicholas" 后面是一个逗号。但是，在age 属性的值29的后面不能添加逗号，因为age 是这个对象的最后一个属性。在最后一个属性后面添加逗号，会在IE7及更早版本和Opera中导致错误。

在使用对象字面量语法时，属性名也可以使用字符串，如下面这个例子所示。

var person = {
    "name" : "Nicholas",


    "age" : 29,


    5 : true


};

这个例子会创建一个对象，包含三个属性：name 、age 和5 。但这里的数值属性名会自动转换为字符串。

另外，使用对象字面量语法时，如果留空其花括号，则可以定义只包含默认属性和方法的对象，如下所示：

var person = {};         //与new Object()相同


person.name = "Nicholas";
person.age = 29;

这个例子与本节前面的例子是等价的，只不过看起来似乎有点奇怪。关于对象字面量语法，我们推荐只在考虑对象属性名的可读性时使用。

在通过对象字面量定义对象时，实际上不会调用Object 构造函数（Firefox 2及更早版本会调用Object 构造函数；但Firefox 3之后就不会了）。

虽然可以使用前面介绍的任何一种方法来定义对象，但开发人员更青睐对象字面量语法，因为这种语法要求的代码量少，而且能够给人封装数据的感觉。实际上，对象字面量也是向函数传递大量可选参数的首选方式，例如：

function displayInfo(args) {
    var output = "";

    if (typeof args.name == "string"){
        output += "Name: " + args.name + "\n";
    }

    if (typeof args.age == "number") {
        output += "Age: " + args.age + "\n";
    }

    alert(output);
}

displayInfo({ 
    name: "Nicholas", 
    age: 29
});

displayInfo({
    name: "Greg"
});

ObjectTypeExample04.htm

在这个例子中，函数displayInfo() 接受一个名为args 的参数。这个参数可能带有一个名为name 或age 的属性，也可能这两个属性都有或者都没有。在这个函数内部，我们通过typeof 操作符来检测每个属性是否存在，然后再基于相应的属性来构建一条要显示的消息。然后，我们调用了两次这个函数，每次都使用一个对象字面量来指定不同的数据。这两次调用传递的参数虽然不同，但函数都能正常执行。

这种传递参数的模式最适合需要向函数传入大量可选参数的情形。一般来讲，命名参数虽然容易处理，但在有多个可选参数的情况下就会显示不够灵活。最好的做法是对那些必需值使用命名参数，而使用对象字面量来封装多个可选参数。

一般来说，访问对象属性时使用的都是点表示法，这也是很多面向对象语言中通用的语法。不过，在JavaScript也可以使用方括号表示法来访问对象的属性。在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中，如下面的例子所示。

alert(person["name"]);          //"Nicholas"
alert(person.name);             //"Nicholas"

从功能上看，这两种访问对象属性的方法没有任何区别。但方括号语法的主要优点是可以通过变量来访问属性，例如：

var propertyName = "name";
alert(person[propertyName]);    //"Nicholas"

如果属性名中包含会导致语法错误的字符，或者属性名使用的是关键字或保留字，也可以使用方括号表示法。例如：

person["first name"] = "Nicholas";

由于"first name" 中包含一个空格，所以不能使用点表示法来访问它。然而，属性名中是可以包含非字母非数字的，这时候就可以使用方括号表示法来访问它们。

通常，除非必须使用变量来访问属性，否则我们建议使用点表示法。

5.2　Array类型

除了Object 之外，Array 类型恐怕是ECMAScript中最常用的类型了。而且，ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。虽然ECMAScript数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，ECMAScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

创建数组的基本方式有两种。第一种是使用Array 构造函数，如下面的代码所示。

var colors = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递该数量，而该数量会自动变成length 属性的值。例如，下面的代码将创建length 值为20的数组。

var colors = new Array(20);

也可以向Array 构造函数传递数组中应该包含的项。以下代码创建了一个包含3个字符串值的数组：

var colors = new Array("red", "blue", "green");

当然，给构造函数传递一个值也可以创建数组。但这时候问题就复杂一点了，因为如果传递的是数值，则会按照该数值创建包含给定项数的数组；而如果传递的是其他类型的参数，则会创建包含那个值的只有一项的数组。下面就两个例子：

var colors = new Array(3);           // 创建一个包含3项的数组
var names = new Array("Greg");       // 创建一个包含1项，即字符串"Greg"的数组

ArrayTypeExample01.htm

另外，在使用Array 构造函数时也可以省略new 操作符。如下面的例子所示，省略new 操作符的结果相同：

var colors = Array(3);               // 创建一个包含3项的数组
var names = Array("Greg");           // 创建一个包含1项，即字符串"Greg"的数组

创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开，如下所示：

var colors = ["red", "blue", "green"];   // 创建一个包含3个字符串的数组
var names = [];                          // 创建一个空数组
var values = [1,2,];                     // 不要这样！这样会创建一个包含2或3项的数组
var options = [,,,,,];                   // 不要这样！这样会创建一个包含5或6项的数组

ArrayTypeExample02.htm

以上代码的第一行创建了一个包含3个字符串的数组。第二行使用一对空方括号创建了一个空数组。第三行展示了在数组字面量的最后一项添加逗号的结果：在IE中，values 会成为一个包含3个项且每项的值分别为1、2和undefined 的数组；在其他浏览器中，values 会成为一个包含2项且值分别为1和2的数组。原因是IE8及之前版本中的ECMAScript实现在数组字面量方面存在bug。由于这个bug导致的另一种情况如最后一行代码所示，该行代码可能会创建包含5项的数组（在IE9+、Firefox、Opera、Safari和Chrome中），也可能会创建包含6项的数组（在IE8及更早版本中）。在像这种省略值的情况下，每一项都将获得undefined 值；这个结果与调用Array 构造函数时传递项数在逻辑上是相同的。但是由于IE的实现与其他浏览器不一致，因此我们强烈建议不要使用这种语法。

与对象一样，在使用数组字面量表示法时，也不会调用Array 构造函数（Firefox 3及更早版本除外）。

在读取和设置数组的值时，要使用方括号并提供相应值的基于0的数字索引，如下所示：

var colors = ["red", "blue", "green"];    // 定义一个字符串数组
alert(colors[0]);                         // 显示第一项
colors[2] = "black";                      // 修改第三项
colors[3] = "brown";                      // 新增第四项

方括号中的索引表示要访问的值。如果索引小于数组中的项数，则返回对应项的值，就像这个例子中的colors[0] 会显示"red" 一样。设置数组的值也使用相同的语法，但会替换指定位置的值。如果设置某个值的索引超过了数组现有项数，如这个例子中的colors[3] 所示，数组就会自动增加到该索引值加1的长度（就这个例子而言，索引是3，因此数组长度就是4）。

数组的项数保存在其length 属性中，这个属性始终会返回0或更大的值，如下面这个例子所示：

var colors = ["red", "blue", "green"];       // 创建一个包含3个字符串的数组
var names = [];                              // 创建一个空数组

alert(colors.length);            //3


alert(names.length);             //0

数组的length 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。请看下面的例子：

var colors = ["red", "blue", "green"];     // 创建一个包含3个字符串的数组
colors.length = 2;


alert(colors[2]);                 //undefined

ArrayTypeExample03.htm

这个例子中的数组colors 一开始有3个值。将其length 属性设置为2会移除最后一项（位置为2的那一项），结果再访问colors[2] 就会显示undefined 了。如果将其length 属性设置为大于数组项数的值，则新增的每一项都会取得undefined 值，如下所示：

var colors = ["red", "blue", "green"];    // 创建一个包含3个字符串的数组
colors.length = 4;


alert(colors[3]);                 //undefined

ArrayTypeExample04.htm

在此，虽然colors 数组包含3个项，但把它的length 属性设置成了4。这个数组不存在位置3，所以访问这个位置的值就得到了特殊值undefined 。

利用length 属性也可以方便地在数组末尾添加新项，如下所示：

var colors = ["red", "blue", "green"];        // 创建一个包含3个字符串的数组
colors[colors.length] = "black";                   //（在位置3）添加一种颜色


colors[colors.length] = "brown";                   //（在位置4）再添加一种颜色

ArrayTypeExample05.htm

由于数组最后一项的索引始终是length-1 ，因此下一个新项的位置就是length 。每当在数组末尾添加一项后，其length 属性都会自动更新以反应这一变化。换句话说，上面例子第二行中的colors[colors.length] 为位置3添加了一个值，最后一行的colors[colors.length] 则为位置4添加了一个值。当把一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，即长度值等于最后一项的索引加1，如下面的例子所示：

var colors = ["red", "blue", "green"];         // 创建一个包含3个字符串的数组
colors[99] = "black";                          // （在位置99）添加一种颜色


alert(colors.length);  // 100

ArrayTypeExample06.htm

在这个例子中，我们向colors 数组的位置99插入了一个值，结果数组新长度（length ）就是100（99+1）。而位置3到位置98实际上都是不存在的，所以访问它们都将返回undefined 。

数组最多可以包含4 294 967 295个项，这几乎已经能够满足任何编程需求了。如果想添加的项数超过这个上限值，就会发生异常。而创建一个初始大小与这个上限值接近的数组，则可能会导致运行时间超长的脚本错误。

5.2.1　检测数组

自从ECMAScript 3做出规定以后，就出现了确定某个对象是不是数组的经典问题。对于一个网页，或者一个全局作用域而言，使用instanceof 操作符就能得到满意的结果：

if (value instanceof Array){ 
    //对数组执行某些操作
}

instanceof 操作符的问题在于，它假定单一的全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array 构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

为了解决这个问题，ECMAScript 5新增了Array.isArray() 方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。

if (Array.isArray(value)){
    //对数组执行某些操作
}

支持Array.isArray() 方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。要在尚未实现这个方法中的浏览器中准确检测数组，请参考22.1.1节。

5.2.2　转换方法

如前所述，所有对象都具有toLocaleString() 、toString() 和valueOf() 方法。其中，调用数组的toString() 和valueOf() 方法会返回相同的值，即由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。实际上，为了创建这个字符串会调用数组每一项的toString() 方法。来看下面这个例子。

var colors = ["red", "blue", "green"];      // 创建一个包含3个字符串的数组
alert(colors.toString());     // red,blue,green


alert(colors.valueOf());      // red,blue,green


alert(colors);                // red,blue,green

ArrayTypeExample07.htm

在这里，我们首先显式地调用了toString() 和valueOf() 方法，以便返回数组的字符串表示，每个值的字符串表示拼接成了一个字符串，中间以逗号分隔。最后一行代码直接将数组传递给了alert() 。由于alert() 要接收字符串参数，所以它会在后台调用toString() 方法，由此会得到与直接调用toString() 方法相同的结果。

另外，toLocaleString() 方法经常也会返回与toString() 和valueOf() 方法相同的值，但也不总是如此。当调用数组的toLocaleString() 方法时，它也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于，这一次为了取得每一项的值，调用的是每一项的toLocaleString() 方法，而不是toString() 方法。请看下面这个例子。

var person1 = {
    toLocaleString : function () {
        return "Nikolaos";
    },

    toString : function() {
        return "Nicholas";
    }
};

var person2 = {
    toLocaleString : function () {
        return "Grigorios";
    },

    toString : function() {
        return "Greg";
    }
};

var people = [person1, person2];
alert(people);                           //Nicholas,Greg
alert(people.toString());                //Nicholas,Greg
alert(people.toLocaleString());          //Nikolaos,Grigorios

ArrayTypeExample08.htm

我们在这里定义了两个对象：person1 和person2 。而且还分别为每个对象定义了一个toString() 方法和一个toLocaleString() 方法，这两个方法返回不同的值。然后，创建一个包含前面定义的两个对象的数组。在将数组传递给alert() 时，输出结果是"Nicholas,Greg" ，因为调用了数组每一项的toString() 方法（同样，这与下一行显式调用toString() 方法得到的结果相同）。而当调用数组的toLocaleString() 方法时，输出结果是"Nikolaos,Grigorios" ，原因是调用了数组每一项的toLocaleString() 方法。

数组继承的toLocaleString() 、toString() 和valueOf() 方法，在默认情况下都会以逗号分隔的字符串的形式返回数组项。而如果使用join() 方法，则可以使用不同的分隔符来构建这个字符串。join() 方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。请看下面的例子：

var colors = ["red", "green", "blue"];
alert(colors.join(","));       //red,green,blue
alert(colors.join("||"));      //red||green||blue

ArrayTypeJoinExample01.htm

在这里，我们使用join() 方法重现了toString() 方法的输出。在传递逗号的情况下，得到了以逗号分隔的数组值。而在最后一行代码中，我们传递了双竖线符号，结果就得到了字符串"red||green||blue" 。如果不给join() 方法传入任何值，或者给它传入undefined ，则使用逗号作为分隔符。IE7及更早版本会错误的使用字符串"undefined" 作为分隔符。

如果数组中的某一项的值是null 或者undefined ，那么该值在join() 、toLocale-String() 、toString() 和valueOf() 方法返回的结果中以空字符串表示。

5.2.3　栈方法

ECMAScript数组也提供了一种让数组的行为类似于其他数据结构的方法。具体说来，数组可以表现得就像栈一样，后者是一种可以限制插入和删除项的数据结构。栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push() 和pop() 方法，以便实现类似栈的行为。

push() 方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而pop() 方法则从数组末尾移除最后一项，减少数组的length 值，然后返回移除的项。请看下面的例子：

var colors = new Array();                       // 创建一个数组
var count = colors.push("red", "green");        // 推入两项
alert(count);    //2

count = colors.push("black");                   // 推入另一项
alert(count);     //3

var item = colors.pop();                        // 取得最后一项
alert(item);      //"black"
alert(colors.length);   //2

ArrayTypeExample09.htm

以上代码中的数组可以看成是栈（代码本身没有任何区别，而push() 和pop() 都是数组默认的方法）。首先，我们使用push() 将两个字符串推入数组的末尾，并将返回的结果保存在变量count 中（值为2）。然后，再推入一个值，而结果仍然保存在count 中。因为此时数组中包含3项，所以push() 返回3。在调用pop() 时，它会返回数组的最后一项，即字符串"black" 。此后，数组中仅剩两项。

可以将栈方法与其他数组方法连用，像下面这个例子一样。

var colors = ["red", "blue"];
colors.push("brown");                // 添加另一项
colors[3] = "black";                 // 添加一项
alert(colors.length);      // 4

var item = colors.pop();             // 取得最后一项
alert(item);  //"black"

ArrayTypeExample10.htm

在此，我们首先用两个值来初始化一个数组。然后，使用push() 添加第三个值，再通过直接在位置3上赋值来添加第四个值。而在调用pop() 时，该方法返回了字符串"black" ，即最后一个添加到数组的值。

5.2.4　队列方法

栈数据结构的访问规则是LIFO（后进先出），而队列数据结构的访问规则是FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。由于push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift() ，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。结合使用shift() 和push() 方法，可以像使用队列一样使用数组。

var colors = new Array();                   //创建一个数组
var count = colors.push("red", "green");    //推入两项
alert(count);    //2

count = colors.push("black");               //推入另一项
alert(count);     //3

var item = colors.shift();                  //取得第一项


alert(item);      //"red"
alert(colors.length); //2

ArrayTypeExample11.htm

这个例子首先使用push() 方法创建了一个包含3种颜色名称的数组。代码中加粗的那一行使用shift() 方法从数组中取得了第一项，即"red" 。在移除第一项之后，"green" 就变成了第一项，而"black" 则变成了第二项，数组也只包含两项了。

ECMAScript还为数组提供了一个unshift() 方法。顾名思义，unshift() 与shift() 的用途相反：它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用unshift() 和pop() 方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项，如下面的例子所示。

var colors = new Array();                       //创建一个数组
var count = colors.unshift("red", "green");     //推入两项


alert(count);   //2

count = colors.unshift("black");                //推入另一项


alert(count);   //3

var item = colors.pop();                        //取得最后一项


alert(item);    //"green"
alert(colors.length); //2

ArrayTypeExample12.htm

这个例子创建了一个数组并使用unshift() 方法先后推入了3个值。首先是"red" 和"green" ，然后是"black" ，数组中各项的顺序为"black" 、"red" 、"green" 。在调用pop() 方法时，移除并返回的是最后一项，即"green" 。

IE7及更早版本对JavaScript的实现中存在一个偏差，其unshift() 方法总是返回undefined 而不是数组的新长度。IE8在非兼容模式下会返回正确的长度值。

5.2.5　重排序方法

数组中已经存在两个可以直接用来重排序的方法：reverse() 和sort() 。有读者可能猜到了，reverse() 方法会对反转数组项的顺序。请看下面这个例子。

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);        //5,4,3,2,1

ArrayTypeExample13.htm

这里数组的初始值及顺序是1、2、3、4、5。而调用数组的reverse() 方法后，其值的顺序变成了5、4、3、2、1。这个方法的作用相当直观明了，但不够灵活，因此才有了sort() 方法。

在默认情况下，sort() 方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。为了实现排序，sort() 方法会调用每个数组项的toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort() 方法比较的也是字符串，如下所示。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values);     //0,1,10,15,5

ArrayTypeExample14.htm

可见，即使例子中值的顺序没有问题，但sort() 方法也会根据测试字符串的结果改变原来的顺序。因为数值5虽然小于10，但在进行字符串比较时，"10" 则位于"5" 的前面，于是数组的顺序就被修改了。不用说，这种排序方式在很多情况下都不是最佳方案。因此sort() 方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

ArrayTypeExample15.htm

这个比较函数可以适用于大多数数据类型，只要将其作为参数传递给sort() 方法即可，如下面这个例子所示。

var values = [0, 1, 5, 10, 15];
values.sort(compare);


alert(values);   //0,1,5,10,15

在将比较函数传递到sort() 方法之后，数值仍然保持了正确的升序。当然，也可以通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可。

function compare(value1, value2) {
    if (value1 < value2) {
        return 1;


    } else if (value1 > value2) {
        return -1;


    } else {
        return 0;
    }
}

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

ArrayTypeExample16.htm

在这个修改后的例子中，比较函数在第一个值应该位于第二个之后的情况下返回1，而在第一个值应该在第二个之前的情况下返回?1。交换返回值的意思是让更大的值排位更靠前，也就是对数组按照降序排序。当然，如果只想反转数组原来的顺序，使用reverse() 方法要更快一些。

reverse() 和sort() 方法的返回值是经过排序之后的数组。

对于数值类型或者其valueOf() 方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可¹ 。

¹ 如果想要按照升级排序，则compare() 函数中的return 语句应该返回value2–value1 。

function compare(value1, value2){
    return value2 - value1;
}

由于比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果，因此减法操作就可以适当地处理所有这些情况。

5.2.6　操作方法

ECMAScript为操作已经包含在数组中的项提供了很多方法。其中，concat() 方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给concat() 方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。下面来看一个例子。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

alert(colors);     //red,green,blue
alert(colors2);    //red,green,blue,yellow,black,brown

ArrayTypeConcatExample01.htm

以上代码开始定义了一个包含3个值的数组colors 。然后，基于colors 调用了concat() 方法，并传入字符串"yellow" 和一个包含"black" 和"brown" 的数组。最终，结果数组colors2 中包含了"red" 、"green" 、"blue" 、"yellow" 、"black" 和"brown" 。至于原来的数组colors ，其值仍然保持不变。

下一个方法是slice() ，它能够基于当前数组中的一或多个项创建一个新数组。slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。注意，slice() 方法不会影响原始数组。请看下面的例子。

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2);   //green,blue,yellow,purple
alert(colors3);   //green,blue,yellow

ArrayTypeSliceExample01.htm

在这个例子中，开始定义的数组colors 包含5项。调用slice() 并传入1会得到一个包含4项的新数组；因为是从位置1开始复制，所以会包含"green" 而不会包含"red" 。这个新数组colors2 中包含的是"green" 、"blue" 、"yellow" 和"purple" 。接着，我们再次调用slice() 并传入了1和4，表示复制从位置1开始，到位置3结束。结果数组colors3 中包含了"green" 、"blue" 和"yellow" 。

如果slice() 方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用slice(-2,-1) 与调用slice(3,4) 得到的结果相同。如果结束位置小于起始位置，则返回空数组。

下面我们来介绍splice() 方法，这个方法恐怕要算是最强大的数组方法了，它有很多种用法。splice() 的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下3种。

删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2) 会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,"red","green") 会从当前数组的位置2开始插入字符串"red" 和"green" 。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green") 会删除当前数组位置2的项，然后再从位置2开始插入字符串"red" 和"green" 。

splice() 方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）。下面的代码展示了上述3种使用splice() 方法的方式。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);                    // 删除第一项
alert(colors);     // green,blue
alert(removed);    // red，返回的数组中只包含一项

removed = colors.splice(1, 0, "yellow", "orange");   // 从位置1开始插入两项
alert(colors);     // green,yellow,orange,blue
alert(removed);    // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple");      // 插入两项，删除一项
alert(colors);     // green,red,purple,orange,blue
alert(removed);    // yellow，返回的数组中只包含一项

ArrayTypeSpliceExample01.htm

上面的例子首先定义了一个包含3项的数组colors 。第一次调用splice() 方法只是删除了这个数组的第一项，之后colors 还包含"green" 和"blue" 两项。第二次调用splice() 方法时在位置1插入了两项，结果colors 中包含"green" 、"yellow" 、"orange" 和"blue" 。这一次操作没有删除项，因此返回了一个空数组。最后一次调用splice() 方法删除了位置1处的一项，然后又插入了"red" 和"purple" 。在完成以上操作之后，数组colors 中包含的是"green" 、"red" 、"purple" 、"orange" 和"blue" 。

5.2.7　位置方法

ECMAScript 5为数组实例添加了两个位置方法：indexOf() 和lastIndexOf() 。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf() 方法从数组的开头（位置0）开始向后查找，lastIndexOf() 方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回?1。在比较第一个参数与数组中的每一项时，会使用全等操作符；也就是说，要求查找的项必须严格相等（就像使用===一样）。以下是几个例子。

var numbers = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4));        //3
alert(numbers.lastIndexOf(4));    //5

alert(numbers.indexOf(4, 4));     //5
alert(numbers.lastIndexOf(4, 4)); //3

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];

var morePeople = [person];

alert(people.indexOf(person));     //-1
alert(morePeople.indexOf(person)); //0

ArrayIndexOfExample01.htm

使用indexOf() 和lastIndexOf() 方法查找特定项在数组中的位置非常简单，支持它们的浏览器包括IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

5.2.8　迭代方法

ECMAScript 5为数组定义了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this 的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响访问的返回值。以下是这5个迭代方法的作用。

every() ：对数组中的每一项运行给定函数，如果该函数对每一项都返回true ，则返回true 。
filter() ：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值。
map() ：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
some() ：对数组中的每一项运行给定函数，如果该函数对任一项返回true ，则返回true 。

以上方法都不会修改数组中的包含的值。

在这些方法中，最相似的是every() 和some() ，它们都用于查询数组中的项是否满足某个条件。对every() 来说，传入的函数必须对每一项都返回true ，这个方法才返回true ；否则，它就返回false 。而some() 方法则是只要传入的函数对数组中的某一项返回true ，就会返回true 。请看以下例子。

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item, index, array){
    return (item > 2); 
});

alert(everyResult);     //false

var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});

alert(someResult);      //true

ArrayEveryAndSomeExample01.htm

以上代码调用了every() 和some() ，传入的函数只要给定项大于2就会返回true 。对于every() ，它返回的是false ，因为只有部分数组项符合条件。对于some() ，结果就是true ，因为至少有一项是大于2的。

下面再看一看filter() 函数，它利用指定的函数确定是否在返回的数组中包含的某一项。例如，要返回一个所有数值都大于2的数组，可以使用以下代码。

var numbers = [1,2,3,4,5,4,3,2,1];

var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});

alert(filterResult);       //[3,4,5,4,3]

ArrayFilterExample01.htm

这里，通过调用filter() 方法创建并返回了包含3、4、5、4、3的数组，因为传入的函数对它们每一项都返回true 。这个方法对查询符合某些条件的所有数组项非常有用。

map() 也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。例如，可以给数组中的每一项乘以2，然后返回这些乘积组成的数组，如下所示。

var numbers = [1,2,3,4,5,4,3,2,1];

var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});

alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

ArrayMapExample01.htm

以上代码返回的数组中包含给每个数乘以2之后的结果。这个方法适合创建包含的项与另一个数组一一对应的数组。

最后一个方法是forEach() ，它只是对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与使用for 循环迭代数组一样。来看一个例子。

var numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item, index, array){
    //执行某些操作 
});

这些数组方法通过执行不同的操作，可以大大方便处理数组的任务。支持这些迭代方法的浏览器有IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

5.2.9　缩小方法

ECMAScript 5还新增了两个缩小数组的方法：reduce() 和reduceRight() 。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce() 方法从数组的第一项开始，逐个遍历到最后。而reduceRight() 则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为缩小基础的初始值。传给reduce() 和reduceRight() 的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

使用reduce() 方法可以执行求数组中所有值之和的操作，比如：

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur; 
});
alert(sum); //15

ArrayReductionExample01.htm

第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1加2的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。

reduceRight() 的作用类似，只不过方向相反而已。来看下面这个例子。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
});
alert(sum); //15

在这个例子中，第一次执行回调函数，prev 是5，cur 是4。当然，最终结果相同，因为执行的都是简单相加的操作。

使用reduce() 还是reduceRight() ，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。

支持这两个缩小函数的浏览器有IE9+、Firefox 3+、Safari 4+、Opera 10.5和Chrome。

5.3　Date类型

ECMAScript中的Date 类型是在早期Java中的java.util.Date 类基础上构建的。为此，Date 类型使用自UTC（Coordinated Universal Time，国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date 类型保存的日期能够精确到1970年1月1日之前或之后的285 616年。

要创建一个日期对象，使用new 操作符和Date 构造函数即可，如下所示。

var now = new Date();

DateTypeExample01.htm

在调用Date 构造函数而不传递参数的情况下，新创建的对象自动获得当前日期和时间。如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数（即从UTC时间1970年1月1日午夜起至该日期止经过的毫秒数）。为了简化这一计算过程，ECMAScript提供了两个方法：Date.parse() 和Date.UTC() 。

其中，Date.parse() 方法接收一个表示日期的字符串参数，然后尝试根据这个字符串返回相应日期的毫秒数。ECMA-262没有定义Date.parse() 应该支持哪种日期格式，因此这个方法的行为因实现而异，而且通常是因地区而异。将地区设置为美国的浏览器通常都接受下列日期格式：

“月/日/年”，如6/13/2004；
“英文月名日,年”，如January 12,2004；
“英文星期几英文月名日年时:分:秒时区”，如Tue May 25 2004 00:00:00 GMT-0700。
ISO 8601扩展格式YYYY-MM-DDTHH:mm:ss.sssZ（例如2004-05-25T00:00:00）。只有兼容ECMAScript 5的实现支持这种格式。

例如，要为2004年5月25日创建一个日期对象，可以使用下面的代码：

var someDate = new Date(Date.parse("May 25, 2004"));

DateTypeExample01.htm

如果传入Date.parse() 方法的字符串不能表示日期，那么它会返回NaN 。实际上，如果直接将表示日期的字符串传递给Date 构造函数，也会在后台调用Date.parse() 。换句话说，下面的代码与前面的例子是等价的：

var someDate = new Date("May 25, 2004");

这行代码将会得到与前面相同的日期对象。

日期对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超出范围的值替换成当前的值，以便生成输出。例如，在解析"January 32, 2007" 时，有的浏览器会将其解释为"February 1, 2007" 。而Opera则倾向于插入当前月份的当前日期，返回"January 当前日期，2007" 。也就是说，如果在2007年9月21日运行前面的代码，将会得到"January 21, 2007" （都是21日）。

Date.UTC() 方法同样也返回表示日期的毫秒数，但它与Date.parse() 在构建值时使用不同的信息。Date.UTC() 的参数分别是年份、基于0的月份（一月是0，二月是1，以此类推）、月中的哪一天（1到31）、小时数（0到23）、分钟、秒以及毫秒数。在这些参数中，只有前两个参数（年和月）是必需的。如果没有提供月中的天数，则假设天数为1；如果省略其他参数，则统统假设为0。以下是两个使用Date.UTC() 方法的例子：

// GMT时间2000年1月1日午夜零时
var y2k = new Date(Date.UTC(2000, 0));

// GMT时间2005年5月5日下午5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));

DateTypeUTCExample01.htm

这个例子创建了两个日期对象。第一个对象表示GMT时间2000年1月1日午夜零时，传入的值一个是表示年份的2000，一个是表示月份的0（即一月份）。因为其他参数是自动填充的（即月中的天数为1，其他所有参数均为0），所以结果就是该月第一天的午夜零时。第二个对象表示GMT时间2005年5月5日下午5:55:55，即使日期和时间中只包含5，也需要传入不一样的参数：月份必须是4（因为月份是基于0的）、小时必须设置为17（因为小时以0到23表示），剩下的参数就很直观了。

如同模仿Date.parse() 一样，Date 构造函数也会模仿Date.UTC() ，但有一点明显不同：日期和时间都基于本地时区而非GMT来创建。不过，Date 构造函数接收的参数仍然与Date.UTC() 相同。因此，如果第一个参数是数值，Date 构造函数就会假设该值是日期中的年份，而第二个参数是月份，以此类推。据此，可以将前面的例子重写如下。

// 本地时间2000年1月1日午夜零时
var y2k = new Date(2000, 0);

// 本地时间2005年5月5日下午5:55:55
var allFives = new Date(2005, 4, 5, 17, 55, 55);

DateTypeConstructorExample01.htm

以上代码创建了与前面例子中相同的两个日期对象，只不过这次的日期都是基于系统设置的本地时区创建的。

ECMAScript 5添加了Data.now() 方法，返回表示调用这个方法时的日期和时间的毫秒数。这个方法简化了使用Data 对象分析代码的工作。例如：

//取得开始时间
var start = Date.now();

//调用函数
doSomething();

//取得停止时间
var stop = Date.now(),
    result = stop – start;

支持Data.now() 方法的浏览器包括IE9+、Firefox 3+、Safari 3+、Opera 10.5和Chrome。在不支持它的浏览器中，使用+操作符把Data 对象转换成字符串，也可以达到同样的目的。

//取得开始时间
var start = +new Date();



//调用函数
doSomething();
//取得停止时间
var stop = +new Date(),


    result = stop – start;

5.3.1　继承的方法

与其他引用类型一样，Date 类型也重写了toLocaleString() 、toString() 和valueOf() 方法；但这些方法返回的值与其他类型中的方法不同。Date 类型的toLocaleString() 方法会按照与浏览器设置的地区相适应的格式返回日期和时间。这大致意味着时间格式中会包含AM或PM，但不会包含时区信息（当然，具体的格式会因浏览器而异）。而toString() 方法则通常返回带有时区信息的日期和时间，其中时间一般以军用时间（即小时的范围是0到23）表示。下面给出了在不同浏览器中调用toLocaleString() 和toString() 方法，输出PST（Pacific Standard Time，太平洋标准时间）时间2007年2月1日午夜零时的结果。

Internet Explorer 8

toLocaleString() — Thursday, February 01, 2007 12:00:00 AM
toString() — Thu Feb 1 00:00:00 PST 2007

Firefox 3.5

toLocaleString() — Thursday, February 01, 2007 12:00:00 AM
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time)

Safari 4

toLocaleString() — Thursday, February 01, 2007 00:00:00
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time)

Chrome 4

toLocaleString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time)
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time)

Opera 10

toLocaleString() — 2/1/2007 12:00:00 AM
toString() — Thu, 01 Feb 2007 00:00:00 GMT-0800

显然，这两个方法在不同的浏览器中返回的日期和时间格式可谓大相径庭。事实上， toLocaleString() 和toString() 的这一差别仅在调试代码时比较有用，而在显示日期和时间时没有什么价值。

至于Date 类型的valueOf() 方法，则根本不返回字符串，而是返回日期的毫秒表示。因此，可以方便使用比较操作符（小于或大于）来比较日期值。请看下面的例子。

var date1 = new Date(2007, 0, 1);                    //"January 1, 2007"
var date2 = new Date(2007, 1, 1);                    //"February 1, 2007"

alert(date1 < date2); //true
alert(date1 > date2); //false

DateTypeValueOfExample01.htm

从逻辑上讲，2007年1月1日要早于2007年2月1日，此时如果我们说前者小于后者比较符合常理。而表示2007年1月1日的毫秒值小于表示2007年2月1日的毫秒值，因此在首先使用小于操作符比较日期时，返回的结果是true 。这样，就为我们比较日期提供了极大方便。

5.3.2　日期格式化方法

Date 类型还有一些专门用于将日期格式化为字符串的方法，这些方法如下。

toDateString() ——以特定于实现的格式显示星期几、月、日和年；
toTimeString() ——以特定于实现的格式显示时、分、秒和时区；
toLocaleDateString() ——以特定于地区的格式显示星期几、月、日和年；
toLocaleTimeString() ——以特定于实现的格式显示时、分、秒；
toUTCString() ——以特定于实现的格式完整的UTC日期。

与toLocaleString() 和toString() 方法一样，以上这些字符串格式方法的输出也是因浏览器而异的，因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。

除了前面介绍的方法之外，还有一个名叫toGMTString() 的方法，这是一个与toUTCString() 等价的方法，其存在目的在于确保向后兼容。不过，ECMAScript推荐现在编写的代码一律使用toUTCString() 方法。

5.3.3　日期/时间组件方法

到目前为止，剩下还未介绍的Date 类型的方法（如下表所示），都是直接取得和设置日期值中特定部分的方法了。需要注意的是，UTC日期指的是在没有时区偏差的情况下（将日期转换为GMT时间）的日期值。

方　　法	说　　明
`getTime()`	返回表示日期的毫秒数；与`valueOf()` 方法返回的值相同
`setTime(毫秒)`	以毫秒数设置日期，会改变整个日期
`getFullYear()`	取得4位数的年份（如2007而非仅07）
`getUTCFullYear()`	返回UTC日期的4位数年份
`setFullYear(年)`	设置日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
`setUTCFullYear(年)`	设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
`getMonth()`	返回日期中的月份，其中0表示一月，11表示十二月
`getUTCMonth()`	返回UTC日期中的月份，其中0表示一月，11表示十二月
`setMonth(月)`	设置日期的月份。传入的月份值必须大于0，超过11则增加年份
`setUTCMonth(月)`	设置UTC日期的月份。传入的月份值必须大于0，超过11则增加年份
`getDate()`	返回日期月份中的天数（1到31）
`getUTCDate()`	返回UTC日期月份中的天数（1到31）
`setDate(日)`	设置日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
`setUTCDate(日)`	设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
`getDay()`	返回日期中星期的星期几（其中0表示星期日，6表示星期六）
`getUTCDay()`	返回UTC日期中星期的星期几（其中0表示星期日，6表示星期六）
`getHours()`	返回日期中的小时数（0到23）
`getUTCHours()`	返回UTC日期中的小时数（0到23）
`setHours(时)`	设置日期中的小时数。传入的值超过了23则增加月份中的天数
`setUTCHours(时)`	设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
`getMinutes()`	返回日期中的分钟数（0到59）
`getUTCMinutes()`	返回UTC日期中的分钟数（0到59）
`setMinutes(分)`	设置日期中的分钟数。传入的值超过59则增加小时数
`setUTCMinutes(分)`	设置UTC日期中的分钟数。传入的值超过59则增加小时数
`getSeconds()`	返回日期中的秒数（0到59）
`getUTCSeconds()`	返回UTC日期中的秒数（0到59）
`setSeconds(秒)`	设置日期中的秒数。传入的值超过了59会增加分钟数
`setUTCSeconds(秒)`	设置UTC日期中的秒数。传入的值超过了59会增加分钟数
`getMilliseconds()`	返回日期中的毫秒数
`getUTCMilliseconds()`	返回UTC日期中的毫秒数
`setMilliseconds(毫秒)`	设置日期中的毫秒数
`setUTCMilliseconds(毫秒)`	设置UTC日期中的毫秒数
`getTimezoneOffset()`	返回本地时间与UTC时间相差的分钟数。例如，美国东部标准时间返回300。在某地进入夏令时的情况下，这个值会有所变化

5.4　RegExp类型

ECMAScript通过RegExp 类型来支持正则表达式。使用下面类似Perl的语法，就可以创建一个正则表达式。

var expression = / pattern

 / flags

 ;

其中的模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为。正则表达式的匹配模式支持下列3个标志。

g ：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i ：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m ：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

因此，一个正则表达式就是一个模式与上述3个标志的组合体。不同组合产生不同结果，如下面的例子所示。

/*
 * 匹配字符串中所有"at"的实例
 */
var pattern1 = /at/g;

/*
 * 匹配第一个"bat"或"cat"，不区分大小写
 */
var pattern2 = /[bc]at/i;

/*
 * 匹配所有以"at"结尾的3个字符的组合，不区分大小写
 */
var pattern3 = /.at/gi;

与其他语言中的正则表达式类似，模式中使用的所有元字符 都必须转义。正则表达式中的元字符包括：

( [ { \ ^ $ | ) ? * + .]}

这些元字符在正则表达式中都有一或多种特殊用途，因此如果想要匹配字符串中包含的这些字符，就必须对它们进行转义。下面给出几个例子。

/*
 * 匹配第一个"bat"或"cat"，不区分大小写
 */
var pattern1 = /[bc]at/i;

/*
 * 匹配第一个" [bc]at"，不区分大小写
 */
var pattern2 = /\[bc\]at/i;

/*
 * 匹配所有以"at"结尾的3个字符的组合，不区分大小写
 */
var pattern3 = /.at/gi;

/*
 * 匹配所有".at"，不区分大小写
 */
var pattern4 = /\.at/gi;

在上面的例子中，pattern1 匹配第一个"bat" 或"cat" ，不区分大小写。而要想直接匹配"[bc]at" 的话，就需要像定义pattern2 一样，对其中的两个方括号进行转义。对于pattern3 来说，句点表示位于"at" 之前的任意一个可以构成匹配项的字符。但如果想匹配".at" ，则必须对句点本身进行转义，如pattern4 所示。

前面举的这些例子都是以字面量形式来定义的正则表达式。另一种创建正则表达式的方式是使用RegExp 构造函数，它接收两个参数：一个是要匹配的字符串模式，另一个是可选的标志字符串。可以使用字面量定义的任何表达式，都可以使用构造函数来定义，如下面的例子所示。

/*
 * 匹配第一个"bat"或"cat"，不区分大小写
 */
var pattern1 = /[bc]at/i;

/*
 * 与pattern1相同，只不过是使用构造函数创建的
 */
var pattern2 = new RegExp("[bc]at", "i");

在此，pattern1 和pattern2 是两个完全等价的正则表达式。要注意的是，传递给RegExp 构造函数的两个参数都是字符串（不能把正则表达式字面量传递给RegExp 构造函数）。由于RegExp 构造函数的模式参数是字符串，所以在某些情况下要对字符进行双重转义。所有元字符都必须双重转义，那些已经转义过的字符也是如此，例如\n （字符\ 在字符串中通常被转义为\\ ，而在正则表达式字符串中就会变成\\\\ ）。下表给出了一些模式，左边是这些模式的字面量形式，右边是使用RegExp 构造函数定义相同模式时使用的字符串。

字面量模式	等价的字符串
`/\[bc\]at/`	`"\\[bc\\]at"`
`/\.at/`	`"\\.at"`
`/name\/age` /	`"name\\/age"`
`/\d.\d{1,2}/`	`"\\d.\\d{1,2}"`
`/\w\\hello\\123/`	`"\\w\\\\hello\\\\123"`

使用正则表达式字面量和使用RegExp 构造函数创建的正则表达式不一样。在ECMAScript 3中，正则表达式字面量始终会共享同一个RegExp 实例，而使用构造函数创建的每一个新RegExp 实例都是一个新实例。来看下面的例子。

var re = null,
    i; 

for (i=0; i < 10; i++){
    re = /cat/g;
    re.test("catastrophe");
}

for (i=0; i < 10; i++){
    re = new RegExp("cat", "g");
    re.test("catastrophe");
}

在第一个循环中，即使是循环体中指定的，但实际上只为/cat/ 创建了一个RegExp 实例。由于实例属性（下一节介绍实例属性）不会重置，所以在循环中再次调用test() 方法会失败。这是因为第一次调用test() 找到了"cat" ，但第二次调用是从索引为3的字符（上一次匹配的末尾）开始的，所以就找不到它了。由于会测试到字符串末尾，所以下一次再调用test() 就又从开头开始了。

第二个循环使用RegExp 构造函数在每次循环中创建正则表达式。因为每次迭代都会创建一个新的RegExp 实例，所以每次调用test() 都会返回true 。

ECMAScript 5明确规定，使用正则表达式字面量必须像直接调用RegExp 构造函数一样，每次都创建新的RegExp实例。IE9+、Firefox 4+和Chrome都据此做出了修改。

5.4.1　`RegExp` 实例属性

RegExp 的每个实例都具有下列属性，通过这些属性可以取得有关模式的各种信息。

global ：布尔值，表示是否设置了g 标志。
ignoreCase ：布尔值，表示是否设置了i 标志。
lastIndex ：整数，表示开始搜索下一个匹配项的字符位置，从0算起。
multiline ：布尔值，表示是否设置了m 标志。
source ：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。

通过这些属性可以获知一个正则表达式的各方面信息，但却没有多大用处，因为这些信息全都包含在模式声明中。例如：

var pattern1 = /\[bc\]at/i;

alert(pattern1.global);         //false
alert(pattern1.ignoreCase);     //true
alert(pattern1.multiline);      //false
alert(pattern1.lastIndex);      //0
alert(pattern1.source);         //"\[bc\]at"

var pattern2 = new RegExp("\\[bc\\]at", "i");

alert(pattern2.global);         //false
alert(pattern2.ignoreCase);     //true
alert(pattern2.multiline);      //false
alert(pattern2.lastIndex);      //0
alert(pattern2.source);         //"\[bc\]at"

RegExpInstancePropertiesExample01.htm

我们注意到，尽管第一个模式使用的是字面量，第二个模式使用了RegExp 构造函数，但它们的source 属性是相同的。可见，source 属性保存的是规范形式的字符串，即字面量形式所用的字符串。

5.4.2　`RegExp` 实例方法

RegExp 对象的主要方法是exec() ，该方法是专门为捕获组而设计的。exec() 接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回null 。返回的数组虽然是Array 的实例，但包含两个额外的属性：index 和input 。其中，index 表示匹配项在字符串中的位置，而input 表示应用正则表达式的字符串。在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串（如果模式中没有捕获组，则该数组只包含一项）。请看下面的例子。

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);
alert(matches.index);     // 0
alert(matches.input);     // "mom and dad and baby"
alert(matches[0]);        // "mom and dad and baby"
alert(matches[1]);        // " and dad and baby"
alert(matches[2]);        // " and baby"

RegExpExecExample01.htm

这个例子中的模式包含两个捕获组。最内部的捕获组匹配"and baby" ，而包含它的捕获组匹配"and dad" 或者"and dad and baby" 。当把字符串传入exec() 方法中之后，发现了一个匹配项。因为整个字符串本身与模式匹配，所以返回的数组matchs 的index 属性值为0。数组中的第一项是匹配的整个字符串，第二项包含与第一个捕获组匹配的内容，第三项包含与第二个捕获组匹配的内容。

对于exec() 方法而言，即使在模式中设置了全局标志（g ），它每次也只会返回一个匹配项。在不设置全局标志的情况下，在同一个字符串上多次调用exec() 将始终返回第一个匹配项的信息。而在设置全局标志的情况下，每次调用exec() 则都会在字符串中继续查找新匹配项，如下面的例子所示。

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
alert(matches.index);        //0
alert(matches[0]);           //cat
alert(pattern1.lastIndex);   //0

matches = pattern1.exec(text);
alert(matches.index);        //0
alert(matches[0]);           //cat
alert(pattern1.lastIndex);   //0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);
alert(matches.index);        //0
alert(matches[0]);           //cat
alert(pattern2.lastIndex);   //0

matches = pattern2.exec(text);
alert(matches.index);        //5
alert(matches[0]);           //bat
alert(pattern2.lastIndex);   //8

RegExpExecExample02.htm

这个例子中的第一个模式pattern1 不是全局模式，因此每次调用exec() 返回的都是第一个匹配项（"cat" ）。而第二个模式pattern2 是全局模式，因此每次调用exec() 都会返回字符串中的下一个匹配项，直至搜索到字符串末尾为止。此外，还应该注意模式的lastIndex 属性的变化情况。在全局匹配模式下，lastIndex 的值在每次调用exec() 后都会增加，而在非全局模式下则始终保持不变。

IE的JavaScript实现在lastIndex 属性上存在偏差，即使在非全局模式下，lastIndex 属性每次也会变化。

正则表达式的第二个方法是test() ，它接受一个字符串参数。在模式与该参数匹配的情况下返回true ；否则，返回false 。在只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容的情况下，使用这个方法非常方便。因此，test() 方法经常被用在if 语句中，如下面的例子所示。

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;

if (pattern.test(text)){
    alert("The pattern was matched.");
}

在这个例子中，我们使用正则表达式来测试了一个数字序列。如果输入的文本与模式匹配，则显示一条消息。这种用法经常出现在验证用户输入的情况下，因为我们只想知道输入是不是有效，至于它为什么无效就无关紧要了。

RegExp 实例继承的toLocaleString() 和toString() 方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。例如：

var pattern = new RegExp("\\[bc\\]at", "gi");
alert(pattern.toString());             // /\[bc\]at/gi
alert(pattern.toLocaleString());       // /\[bc\]at/gi

RegExpToStringExample01.htm

即使上例中的模式是通过调用RegExp 构造函数创建的，但toLocaleString() 和toString() 方法仍然会像它是以字面量形式创建的一样显示其字符串表示。

正则表达式的valueOf() 方法返回正则表达式本身。

5.4.3　`RegExp` 构造函数属性

RegExp 构造函数包含一些属性（这些属性在其他语言中被看成是静态属性）。这些属性适用于作用域中的所有正则表达式，并且基于所执行的最近一次正则表达式操作而变化。关于这些属性的另一个独特之处，就是可以通过两种方式访问它们。换句话说，这些属性分别有一个长属性名和一个短属性名（Opera是例外，它不支持短属性名）。下表列出了RegExp 构造函数的属性。

长属性名	短属性名	说　　明
`input`	`$_`	最近一次要匹配的字符串。Opera未实现此属性
`lastMatch`	`$&`	最近一次的匹配项。Opera未实现此属性
`lastParen`	`$+`	最近一次匹配的捕获组。Opera未实现此属性
`leftContext`	$`	`input` 字符串中`lastMatch` 之前的文本
`multiline`	`$*`	布尔值，表示是否所有表达式都使用多行模式。IE和Opera未实现此属性
`rightContext`	`$'`	`Input` 字符串中`lastMatch` 之后的文本

使用这些属性可以从exec() 或test() 执行的操作中提取出更具体的信息。请看下面的例子。

var text = "this has been a short summer";
var pattern = /(.)hort/g;

/*
 * 注意：Opera不支持input、lastMatch、lastParen和multiline属性
 * Internet Explorer不支持multiline属性
 */
if (pattern.test(text)){
    alert(RegExp.input);                // this has been a short summer
    alert(RegExp.leftContext);          // this has been a
    alert(RegExp.rightContext);         // summer
    alert(RegExp.lastMatch);            // short
    alert(RegExp.lastParen);            // s
    alert(RegExp.multiline);            // false
}

RegExpConstructorPropertiesExample01.htm

以上代码创建了一个模式，匹配任何一个字符后跟hort ，而且把第一个字符放在了一个捕获组中。RegExp 构造函数的各个属性返回了下列值：

input 属性返回了原始字符串；
leftContext 属性返回了单词short 之前的字符串，而rightContext 属性则返回了short 之后的字符串；
lastMatch 属性返回最近一次与整个正则表达式匹配的字符串，即short ；
lastParen 属性返回最近一次匹配的捕获组，即例子中的s 。

如前所述，例子使用的长属性名都可以用相应的短属性名来代替。只不过，由于这些短属性名大都不是有效的ECMAScript标识符，因此必须通过方括号语法来访问它们，如下所示。

var text = "this has been a short summer";
var pattern = /(.)hort/g;

/*
 * 注意：Opera不支持input、lastMatch、lastParen和multiline属性
 * Internet Explorer不支持multiline属性
 */
if (pattern.test(text)){
    alert(RegExp.$_);                   // this has been a short summer


    alert(RegExp["$`"]);                // this has been a


    alert(RegExp["$'"]);                // summer


    alert(RegExp["$&"]);                // short


    alert(RegExp["$+"]);                // s


    alert(RegExp["$*"]);                // false


}

RegExpConstructorPropertiesExample02.htm

除了上面介绍的几个属性之外，还有多达9个用于存储捕获组的构造函数属性。访问这些属性的语法是RegExp.$1 、RegExp.$2 ...RegExp.$9 ，分别用于存储第一、第二……第九个匹配的捕获组。在调用exec() 或test() 方法时，这些属性会被自动填充。然后，我们就可以像下面这样来使用它们。

var text = "this has been a short summer";
var pattern = /(..)or(.)/g;

if (pattern.test(text)){
    alert(RegExp.$1);       //sh
    alert(RegExp.$2);       //t
}

RegExpConstructorPropertiesExample03.htm

这里创建了一个包含两个捕获组的模式，并用该模式测试了一个字符串。即使test() 方法只返回一个布尔值，但RegExp 构造函数的属性$1 和$2 也会被匹配相应捕获组的字符串自动填充。

5.4.4　模式的局限性

尽管ECMAScript中的正则表达式功能还是比较完备的，但仍然缺少某些语言（特别是Perl）所支持的高级正则表达式特性。下面列出了ECMAScript正则表达式不支持的特性（要了解更多相关信息，请访问www.regular-expressions.info ）。

匹配字符串开始和结尾的\A 和\Z 锚¹

¹ 但支持以插入符号（^）和美元符号（$）来匹配字符串的开始和结尾。
向后查找（lookbehind）²

² 但完全支持向前查找（lookahead）。
并集和交集类
原子组（atomic grouping）
Unicode支持（单个字符除外，如\uFFFF ）
命名的捕获组³

³ 但支持编号的捕获组。
s （single，单行）和x （free-spacing，无间隔）匹配模式
条件匹配
正则表达式注释

即使存在这些限制，ECMAScript正则表达式仍然是非常强大的，能够帮我们完成绝大多数模式匹配任务。

5.5　Function类型

说起来ECMAScript中什么最有意思，我想那莫过于函数了——而有意思的根源，则在于函数实际上是对象。每个函数都是Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数通常是使用函数声明语法定义的，如下面的例子所示。

function sum (num1, num2) {
    return num1 + num2;
}

这与下面使用函数表达式定义函数的方式几乎相差无几。

var sum = function(num1, num2){
    return num1 + num2;
};

以上代码定义了变量sum 并将其初始化为一个函数。有读者可能会注意到，function 关键字后面没有函数名。这是因为在使用函数表达式定义函数时，没有必要使用函数名——通过变量sum 即可以引用函数。另外，还要注意函数末尾有一个分号，就像声明其他变量时一样。

最后一种定义函数的方式是使用Function 构造函数。Function 构造函数可以接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数。来看下面的例子：

var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

从技术角度讲，这是一个函数表达式。但是，我们不推荐读者使用这种方法定义函数，因为这种语法会导致解析两次代码（第一次是解析常规ECMAScript代码，第二次是解析传入构造函数中的字符串），从而影响性能。不过，这种语法对于理解“函数是对象，函数名是指针”的概念倒是非常直观的。

由于函数名仅仅是指向函数的指针，因此函数名与包含对象指针的其他变量没有什么不同。换句话说，一个函数可能会有多个名字，如下面的例子所示。

function sum(num1, num2){
    return num1 + num2;
}
alert(sum(10,10));        //20

var anotherSum = sum;
alert(anotherSum(10,10)); //20

sum = null;
alert(anotherSum(10,10)); //20

FunctionTypeExample01.htm

以上代码首先定义了一个名为sum() 的函数，用于求两个值的和。然后，又声明了变量anotherSum ，并将其设置为与sum 相等（将sum 的值赋给anotherSum ）。注意，使用不带圆括号的函数名是访问函数指针，而非调用函数。此时，anotherSum 和sum 就都指向了同一个函数，因此anotherSum() 也可以被调用并返回结果。即使将sum 设置为null ，让它与函数“断绝关系”，但仍然可以正常调用anotherSum() 。

5.5.1　没有重载（深入理解）

将函数名想象为指针，也有助于理解为什么ECMAScript中没有函数重载的概念。以下是曾在第3章使用过的例子。

function addSomeNumber(num){
    return num + 100;
}

function addSomeNumber(num) {
    return num + 200;
}

var result = addSomeNumber(100); //300

显然，这个例子中声明了两个同名函数，而结果则是后面的函数覆盖了前面的函数。以上代码实际上与下面的代码没有什么区别。

var addSomeNumber = function (num){


    return num + 100;
};

addSomeNumber = function (num) {


    return num + 200;
};

var result = addSomeNumber(100); //300

通过观察重写之后的代码，很容易看清楚到底是怎么回事儿——在创建第二个函数时，实际上覆盖了引用第一个函数的变量addSomeNumber 。

5.5.2　函数声明与函数表达式

本节到目前为止，我们一直没有对函数声明和函数表达式加以区别。而实际上，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。请看下面的例子。

alert(sum(10,10));
function sum(num1, num2){
    return num1 + num2;
}

FunctionDeclarationExample01.htm

以上代码完全可以正常运行。因为在代码开始执行之前，解析器就已经通过一个名为函数声明提升（function declaration hoisting）的过程，读取并将函数声明添加到执行环境中。对代码求值时，JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，JavaScript引擎也能把函数声明提升到顶部。如果像下面例子所示的，把上面的函数声明改为等价的函数表达式，就会在执行期间导致错误。

alert(sum(10,10));
var sum = function(num1, num2){


    return num1 + num2;
};

FunctionInitializationExample01.htm

以上代码之所以会在运行期间产生错误，原因在于函数位于一个初始化语句中，而不是一个函数声明。换句话说，在执行到函数所在的语句之前，变量sum 中不会保存有对函数的引用；而且，由于第一行代码就会导致“unexpected identifier”（意外标识符）错误，实际上也不会执行到下一行。

除了什么时候可以通过变量访问函数这一点区别之外，函数声明与函数表达式的语法其实是等价的。

也可以同时使用函数声明和函数表达式，例如var sum = function sum(){} 。不过，这种语法在Safari中会导致错误。

5.5.3　作为值的函数

因为ECMAScript中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。来看一看下面的函数。

function callSomeFunction(someFunction, someArgument){
    return someFunction(someArgument);
}

这个函数接受两个参数。第一个参数应该是一个函数，第二个参数应该是要传递给该函数的一个值。然后，就可以像下面的例子一样传递函数了。

function add10(num){
    return num + 10;
}

var result1 = callSomeFunction(add10, 10);
alert(result1);   //20

function getGreeting(name){
    return "Hello, " + name;
}

var result2 = callSomeFunction(getGreeting, "Nicholas");
alert(result2);   //"Hello, Nicholas"

FunctionAsAnArgumentExample01.htm

这里的callSomeFunction() 函数是通用的，即无论第一个参数中传递进来的是什么函数，它都会返回执行第一个参数后的结果。还记得吧，要访问函数的指针而不执行函数的话，必须去掉函数名后面的那对圆括号。因此上面例子中传递给callSomeFunction() 的是add10 和getGreeting ，而不是执行它们之后的结果。

当然，可以从一个函数中返回另一个函数，而且这也是极为有用的一种技术。例如，假设有一个对象数组，我们想要根据某个对象属性对数组进行排序。而传递给数组sort() 方法的比较函数要接收两个参数，即要比较的值。可是，我们需要一种方式来指明按照哪个属性来排序。要解决这个问题，可以定义一个函数，它接收一个属性名，然后根据这个属性名来创建一个比较函数，下面就是这个函数的定义。

function createComparisonFunction(propertyName) {

    return function(object1, object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if (value1 < value2){
            return -1;
        } else if (value1 > value2){
            return 1;
        } else {
            return 0;
        }
    };
}

FunctionReturningFunctionExample01.htm

这个函数定义看起来有点复杂，但实际上无非就是在一个函数中嵌套了另一个函数，而且内部函数前面加了一个return 操作符。在内部函数接收到propertyName 参数后，它会使用方括号表示法来取得给定属性的值。取得了想要的属性值之后，定义比较函数就非常简单了。上面这个函数可以像在下面例子中这样使用。

var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];

data.sort(createComparisonFunction("name"));
alert(data[0].name);  //Nicholas

data.sort(createComparisonFunction("age"));
alert(data[0].name);  //Zachary

这里，我们创建了一个包含两个对象的数组data 。其中，每个对象都包含一个name 属性和一个age 属性。在默认情况下，sort() 方法会调用每个对象的toString() 方法以确定它们的次序；但得到的结果往往并不符合人类的思维习惯。因此，我们调用createComparisonFunction("name") 方法创建了一个比较函数，以便按照每个对象的name 属性值进行排序。而结果排在前面的第一项是name 为"Nicholas" ，age 是29的对象。然后，我们又使用了createComparisonFunction("age") 返回的比较函数，这次是按照对象的age 属性排序。得到的结果是name 值为"Zachary" ，age 值是28的对象排在了第一位。

5.5.4　函数内部属性

在函数内部，有两个特殊的对象：arguments 和this 。其中，arguments 在第3章曾经介绍过，它是一个类数组对象，包含着传入函数中的所有参数。虽然arguments 的主要用途是保存函数参数，但这个对象还有一个名叫callee 的属性，该属性是一个指针，指向拥有这个arguments 对象的函数。请看下面这个非常经典的阶乘函数。

function factorial(num){
    if (num <=1) {
        return 1;
    } else {
        return num * factorial(num-1)
    }
}

定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。但问题是这个函数的执行与函数名factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象，可以像下面这样使用arguments.callee 。

function factorial(num){
    if (num <=1) {
        return 1;
    } else {
        return num * arguments.callee(num-1)


    }
}

FunctionTypeArgumentsExample01.htm

在这个重写后的factorial() 函数的函数体内，没有再引用函数名factorial 。这样，无论引用函数时使用的是什么名字，都可以保证正常完成递归调用。例如：

var trueFactorial = factorial;

factorial = function(){
    return 0;
};

alert(trueFactorial(5));     //120
alert(factorial(5));         //0

在此，变量trueFactorial 获得了factorial 的值，实际上是在另一个位置上保存了一个函数的指针。然后，我们又将一个简单地返回0的函数赋值给factorial 变量。如果像原来的factorial() 那样不使用arguments.callee ，调用trueFactorial() 就会返回0。可是，在解除了函数体内的代码与函数名的耦合状态之后，trueFactorial() 仍然能够正常地计算阶乘；至于factorial() ，它现在只是一个返回0的函数。

函数内部的另一个特殊对象是this ，其行为与Java和C#中的this 大致类似。换句话说，this 引用的是函数据以执行的环境对象——或者也可以说是this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是window ）。来看下面的例子。

window.color = "red";
var o = { color: "blue" };

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

sayColor();     //"red"

o.sayColor = sayColor;
o.sayColor();   //"blue"

FunctionTypeThisExample01.htm

上面这个函数sayColor() 是在全局作用域中定义的，它引用了this 对象。由于在调用函数之前，this 的值并不确定，因此this 可能会在代码执行过程中引用不同的对象。当在全局作用域中调用sayColor() 时，this 引用的是全局对象window ；换句话说，对this.color 求值会转换成对window.color 求值，于是结果就返回了"red" 。而当把这个函数赋给对象o 并调用o.sayColor() 时，this 引用的是对象o，因此对this.color 求值会转换成对o.color 求值，结果就返回了"blue" 。

请读者一定要牢记，函数的名字仅仅是一个包含指针的变量而已。因此，即使是在不同的环境中执行，全局的sayColor() 函数与o.sayColor() 指向的仍然是同一个函数。

ECMAScript 5也规范化了另一个函数对象的属性：caller 。除了Opera的早期版本不支持，其他浏览器都支持这个ECMAScript 3并没有定义的属性。这个属性中保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为null 。例如：

function outer(){
    inner(); 
}

function inner(){
    alert(inner.caller);
}

outer();

FunctionTypeArgumentsCallerExample01.htm

以上代码会导致警告框中显示outer() 函数的源代码。因为outer() 调用了inter() ，所以inner.caller 就指向outer() 。为了实现更松散的耦合，也可以通过arguments.callee.caller 来访问相同的信息。

function outer(){
    inner();
}

function inner(){
    alert(arguments.callee.caller);


} 

outer();

FunctionTypeArgumentsCallerExample02.htm

IE、Firefox、Chrome和Safari的所有版本以及Opera 9.6都支持caller 属性。

当函数在严格模式下运行时，访问arguments.callee 会导致错误。ECMAScript 5还定义了arguments.caller 属性，但在严格模式下访问它也会导致错误，而在非严格模式下这个属性始终是undefined 。定义这个属性是为了分清arguments.caller 和函数的caller 属性。以上变化都是为了加强这门语言的安全性，这样第三方代码就不能在相同的环境里窥视其他代码了。

严格模式还有一个限制：不能为函数的caller 属性赋值，否则会导致错误。

5.5.5　函数属性和方法

前面曾经提到过，ECMAScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length 和prototype 。其中，length 属性表示函数希望接收的命名参数的个数，如下面的例子所示。

function sayName(name){
    alert(name);
}      

function sum(num1, num2){
    return num1 + num2;
}

function sayHi(){
    alert("hi");
}

alert(sayName.length);      //1
alert(sum.length);          //2
alert(sayHi.length);        //0

FunctionTypeLengthPropertyExample01.htm

以上代码定义了3个函数，但每个函数接收的命名参数个数不同。首先，sayName() 函数定义了一个参数，因此其length 属性的值为1。类似地，sum() 函数定义了两个参数，结果其length 属性中保存的值为2。而sayHi() 没有命名参数，所以其length 值为0。

在ECMAScript核心所定义的全部属性中，最耐人寻味的就要数prototype 属性了。对于ECMAScript中的引用类型而言，prototype 是保存它们所有实例方法的真正所在。换句话说，诸如toString() 和valueOf() 等方法实际上都保存在prototype 名下，只不过是通过各自对象的实例访问罢了。在创建自定义引用类型以及实现继承时，prototype 属性的作用是极为重要的（第6章将详细介绍）。在ECMAScript 5中，prototype 属性是不可枚举的，因此使用for-in 无法发现。

每个函数都包含两个非继承而来的方法：apply() 和call() 。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this 对象的值。首先，apply() 方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array 的实例，也可以是arguments 对象。例如：

function sum(num1, num2){
    return num1 + num2;
}

function callSum1(num1, num2){
    return sum.apply(this, arguments);        // 传入arguments对象
}

function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);    // 传入数组
}

alert(callSum1(10,10));   //20
alert(callSum2(10,10));   //20

FunctionTypeApplyMethodExample01.htm

在上面这个例子中，callSum1() 在执行sum() 函数时传入了this 作为this 值（因为是在全局作用域中调用的，所以传入的就是window 对象）和arguments 对象。而callSum2 同样也调用了sum() 函数，但它传入的则是this 和一个参数数组。这两个函数都会正常执行并返回正确的结果。

在严格模式下，未指定环境对象而调用函数，则this 值不会转型为window 。除非明确把函数添加到某个对象或者调用apply() 或call() ，否则this 值将是undefined 。

call() 方法与apply() 方法的作用相同，它们的区别仅在于接收参数的方式不同。对于call() 方法而言，第一个参数是this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用call() 方法时，传递给函数的参数必须逐个列举出来，如下面的例子所示。

function sum(num1, num2){
    return num1 + num2;
}

function callSum(num1, num2){
    return sum.call(this, num1, num2);


}

alert(callSum(10,10));   //20

FunctionTypeCallMethodExample01.htm

在使用call() 方法的情况下，callSum() 必须明确地传入每一个参数。结果与使用apply() 没有什么不同。至于是使用apply() 还是call() ，完全取决于你采取哪种给函数传递参数的方式最方便。如果你打算直接传入arguments 对象，或者包含函数中先接收到的也是一个数组，那么使用apply() 肯定更方便；否则，选择call() 可能更合适。（在不给函数传递参数的情况下，使用哪个方法都无所谓。）

事实上，传递参数并非apply() 和call() 真正的用武之地；它们真正强大的地方是能够扩充函数赖以运行的作用域。下面来看一个例子。

window.color = "red";
var o = { color: "blue" };

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

sayColor();                //red

sayColor.call(this);       //red


sayColor.call(window);     //red


sayColor.call(o);          //blue

FunctionTypeCallExample01.htm

这个例子是在前面说明this 对象的示例基础上修改而成的。这一次，sayColor() 也是作为全局函数定义的，而且当在全局作用域中调用它时，它确实会显示"red" ——因为对this.color 的求值会转换成对window.color 的求值。而sayColor.call(this) 和sayColor.call(window) ，则是两种显式地在全局作用域中调用函数的方式，结果当然都会显示"red" 。但是，当运行sayColor.call(o) 时，函数的执行环境就不一样了，因为此时函数体内的this 对象指向了o ，于是结果显示的是"blue" 。

使用call() （或apply() ）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。在前面例子的第一个版本中，我们是先将sayColor() 函数放到了对象o 中，然后再通过o 来调用它的；而在这里重写的例子中，就不需要先前那个多余的步骤了。

ECMAScript 5还定义了一个方法：bind() 。这个方法会创建一个函数的实例，其this 值会被绑定到传给bind() 函数的值。例如：

window.color = "red";
var o = { color: "blue" };

function sayColor(){
    alert(this.color);
} 
var objectSayColor = sayColor.bind(o);


objectSayColor();    //blue

FunctionTypeBindMethodExample01.htm

在这里，sayColor() 调用bind() 并传入对象o，创建了objectSayColor() 函数。objectSayColor() 函数的this 值等于o ，因此即使是在全局作用域中调用这个函数，也会看到"blue" 。这种技巧的优点请参考第22章。

支持bind() 方法的浏览器有IE9+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。

每个函数继承的toLocaleString() 和toString() 方法始终都返回函数的代码。返回代码的格式则因浏览器而异——有的返回的代码与源代码中的函数代码一样，而有的则返回函数代码的内部表示，即由解析器删除了注释并对某些代码作了改动后的代码。由于存在这些差异，我们无法根据这两个方法返回的结果来实现任何重要功能；不过，这些信息在调试代码时倒是很有用。另外一个继承的valueOf() 方法同样也只返回函数代码。

5.6　基本包装类型

为了便于操作基本类型值，ECMAScript还提供了3个特殊的引用类型：Boolean 、Number 和String 。这些类型与本章介绍的其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。来看下面的例子。

var s1 = "some text";
var s2 = s1.substring(2);

这个例子中的变量s1 包含一个字符串，字符串当然是基本类型值。而下一行调用了s1 的substring() 方法，并将返回的结果保存在了s2 中。我们知道，基本类型值不是对象，因而从逻辑上讲它们不应该有方法（尽管如我们所愿，它们确实有方法）。其实，为了让我们实现这种直观的操作，后台已经自动完成了一系列的处理。当第二行代码访问s1 时，访问过程处于一种读取模式，也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时，后台都会自动完成下列处理。

创建String 类型的一个实例；
在实例上调用指定的方法；
销毁这个实例。

可以将以上三个步骤想象成是执行了下列ECMAScript代码。

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

经过此番处理，基本的字符串值就变得跟对象一样了。而且，上面这三个步骤也分别适用于Boolean 和Number 类型对应的布尔值和数字值。

引用类型与基本包装类型的主要区别就是对象的生存期。使用new 操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。来看下面的例子：

var s1 = "some text";
s1.color = "red";
alert(s1.color);   //undefined

在此，第二行代码试图为字符串s1 添加一个color 属性。但是，当第三行代码再次访问s1 时，其color 属性不见了。问题的原因就是第二行创建的String 对象在执行第三行代码时已经被销毁了。第三行代码又创建自己的String 对象，而该对象没有color 属性。

当然，可以显式地调用Boolean 、Number 和String 来创建基本包装类型的对象。不过，应该在绝对必要的情况下再这样做，因为这种做法很容易让人分不清自己是在处理基本类型还是引用类型的值。对基本包装类型的实例调用typeof 会返回"object" ，而且所有基本包装类型的对象都会被转换为布尔值true 。

Object 构造函数也会像工厂方法一样，根据传入值的类型返回相应基本包装类型的实例。例如：

var obj = new Object("some text");
alert(obj instanceof String);   //true

把字符串传给Object 构造函数，就会创建String 的实例；而传入数值参数会得到Number 的实例，传入布尔值参数就会得到Boolean 的实例。

要注意的是，使用new 调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。例如：

var value = "25";
var number = Number(value);  //转型函数
alert(typeof number);        //"number"

var obj = new Number(value); //构造函数
alert(typeof obj);           //"object"

在这个例子中，变量number 中保存的是基本类型的值25，而变量obj 中保存的是Number 的实例。要了解有关转型函数的更多信息，请参考第3章。

尽管我们不建议显式地创建基本包装类型的对象，但它们操作基本类型值的能力还是相当重要的。而每个基本包装类型都提供了操作相应值的便捷方法。

5.6.1　`Boolean` 类型

Boolean 类型是与布尔值对应的引用类型。要创建Boolean 对象，可以像下面这样调用Boolean 构造函数并传入true 或false 值。

var booleanObject = new Boolean(true);

Boolean 类型的实例重写了valueOf() 方法，返回基本类型值true 或false ；重写了toString() 方法，返回字符串"true" 和"false" 。可是，Boolean 对象在ECMAScript中的用处不大，因为它经常会造成人们的误解。其中最常见的问题就是在布尔表达式中使用Boolean 对象，例如：

var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result);  //true

var falseValue = false;
result = falseValue && true;
alert(result);  //false

BooleanTypeExample01.htm

在这个例子中，我们使用false 值创建了一个Boolean 对象。然后，将这个对象与基本类型值true 构成了逻辑与表达式。在布尔运算中，false && true 等于false 。可是，示例中的这行代码是对falseObject 而不是对它的值（false ）进行求值。前面讨论过，布尔表达式中的所有对象都会被转换为true ，因此falseObject 对象在布尔表达式中代表的是true 。结果，true && true 当然就等于true 了。

基本类型与引用类型的布尔值还有两个区别。首先，typeof 操作符对基本类型返回"boolean" ，而对引用类型返回"object" 。其次，由于Boolean 对象是Boolean 类型的实例，所以使用instanceof 操作符测试Boolean 对象会返回true ，而测试基本类型的布尔值则返回false 。例如：

alert(typeof falseObject);   //object
alert(typeof falseValue);    //boolean
alert(falseObject instanceof Boolean);  //true
alert(falseValue instanceof Boolean);   //false

理解基本类型的布尔值与Boolean 对象之间的区别非常重要——当然，我们的建议是永远不要使用Boolean 对象。

5.6.2　`Number` 类型

Number 是与数字值对应的引用类型。要创建Number 对象，可以在调用Number 构造函数时向其中传递相应的数值。下面是一个例子。

var numberObject = new Number(10);

NumberTypeExample01.htm

与Boolean 类型一样，Number 类型也重写了valueOf() 、toLocaleString() 和toString() 方法。重写后的valueOf() 方法返回对象表示的基本类型的数值，另外两个方法则返回字符串形式的数值。我们在第3章还介绍过，可以为toString() 方法传递一个表示基数的参数，告诉它返回几进制数值的字符串形式，如下面的例子所示。

var num = 10;
alert(num.toString());      //"10"
alert(num.toString(2));     //"1010"
alert(num.toString(8));     //"12"
alert(num.toString(10));    //"10"
alert(num.toString(16));    //"a"

NumberTypeExample01.htm

除了继承的方法之外，Number 类型还提供了一些用于将数值格式化为字符串的方法。

其中，toFixed() 方法会按照指定的小数位返回数值的字符串表示，例如：

var num = 10;
alert(num.toFixed(2));     //"10.00"

NumberTypeExample01.htm

这里给toFixed() 方法传入了数值2 ，意思是显示几位小数。于是，这个方法返回了"10.00" ，即以0填补了必要的小数位。如果数值本身包含的小数位比指定的还多，那么接近指定的最大小数位的值就会舍入，如下面的例子所示。

var num = 10.005;
alert(num.toFixed(2));     //"10.01"

能够自动舍入的特性，使得toFixed() 方法很适合处理货币值。但需要注意的是，不同浏览器给这个方法设定的舍入规则可能会有所不同。在给toFixed() 传入0的情况下，IE8及之前版本不能正确舍入范围在{(?0.94,?0.5],[0.5,0.94)}之间的值。对于这个范围内的值，IE会返回0，而不是?1或1；其他浏览器都能返回正确的值。IE9修复了这个问题。

toFixed() 方法可以表示带有0到20个小数位的数值。但这只是标准实现的范围，有些浏览器也可能支持更多位数。

另外可用于格式化数值的方法是toExponential() ，该方法返回以指数表示法（也称e表示法）表示的数值的字符串形式。与toFixed() 一样，toExponential() 也接收一个参数，而且该参数同样也是指定输出结果中的小数位数。看下面的例子。

var num = 10;
alert(num.toExponential(1));     //"1.0e+1"

以上代码输出了"1.0e+1" ；不过，这么小的数值一般不必使用e表示法。如果你想得到表示某个数值的最合适的格式，就应该使用toPrecision() 方法。

对于一个数值来说，toPrecision() 方法可能会返回固定大小（fixed）格式，也可能返回指数（exponential）格式；具体规则是看哪种格式最合适。这个方法接收一个参数，即表示数值的所有数字的位数（不包括指数部分）。请看下面的例子。

var num = 99;
alert(num.toPrecision(1));     //"1e+2"


alert(num.toPrecision(2));     //"99"


alert(num.toPrecision(3));     //"99.0"

NumberTypeExample01.htm

以上代码首先完成的任务是以一位数来表示99，结果是"1e+2" ，即100。因为一位数无法准确地表示99，因此toPrecision() 就将它向上舍入为100，这样就可以使用一位数来表示它了。而接下来的用两位数表示99，当然还是"99" 。最后，在想以三位数表示99时，toPrecision() 方法返回了"99.0" 。实际上，toPrecision() 会根据要处理的数值决定到底是调用toFixed() 还是调用toExponential() 。而这三个方法都可以通过向上或向下舍入，做到以最准确的形式来表示带有正确小数位的值。

toPrecision() 方法可以表现1到21位小数。某些浏览器支持的范围更大，但这是典型实现的范围。

与Boolean 对象类似，Number 对象也以后台方式为数值提供了重要的功能。但与此同时，我们仍然不建议直接实例化Number 类型，而原因与显式创建Boolean 对象一样。具体来讲，就是在使用typeof 和instanceof 操作符测试基本类型数值与引用类型数值时，得到的结果完全不同，如下面的例子所示。

var numberObject = new Number(10);
var numberValue = 10;
alert(typeof numberObject);   //"object"
alert(typeof numberValue);    //"number"
alert(numberObject instanceof Number);  //true
alert(numberValue instanceof Number);   //false

在使用typeof 操作符测试基本类型数值时，始终会返回"number" ，而在测试Number 对象时，则会返回"object" 。类似地，Number 对象是Number 类型的实例，而基本类型的数值则不是。

5.6.3　`String` 类型

String 类型是字符串的对象包装类型，可以像下面这样使用String 构造函数来创建。

var stringObject = new String("hello world");

StringTypeExample01.htm

String 对象的方法也可以在所有基本的字符串值中访问到。其中，继承的valueOf() 、toLocaleString() 和toString() 方法，都返回对象所表示的基本字符串值。

String 类型的每个实例都有一个length 属性，表示字符串中包含多个字符。来看下面的例子。

var stringValue = "hello world";
alert(stringValue.length);     //"11"

这个例子输出了字符串"hello world" 中的字符数量，即"11" 。应该注意的是，即使字符串中包含双字节字符（不是占一个字节的ASCII字符），每个字符也仍然算一个字符。

String 类型提供了很多方法，用于辅助完成对ECMAScript中字符串的解析和操作。

1. 字符方法

两个用于访问字符串中特定字符的方法是：charAt() 和charCodeAt() 。这两个方法都接收一个参数，即基于0的字符位置。其中，charAt() 方法以单字符字符串的形式返回给定位置的那个字符（ECMAScript中没有字符类型）。例如：

var stringValue = "hello world";
alert(stringValue.charAt(1));   //"e"

字符串"hello world" 位置1处的字符是"e" ，因此调用charAt(1) 就返回了"e" 。如果你想得到的不是字符而是字符编码，那么就要像下面这样使用charCodeAt() 了。

var stringValue = "hello world";
alert(stringValue.charCodeAt(1));   //输出"101"

这个例子输出的是"101" ，也就是小写字母"e" 的字符编码。

ECMAScript 5还定义了另一个访问个别字符的方法。在支持浏览器中，可以使用方括号加数字索引来访问字符串中的特定字符，如下面的例子所示。

var stringValue = "hello world";
alert(stringValue[1]);   //"e"

使用方括号表示法访问个别字符的语法得到了IE8及Firefox、Safari、Chrome和Opera所有版本的支持。如果是在IE7及更早版本中使用这种语法，会返回undefined 值（尽管根本不是特殊的undefined 值）。

2. 字符串操作方法

下面介绍与操作字符串有关的几个方法。第一个就是concat() ，用于将一或多个字符串拼接起来，返回拼接得到的新字符串。先来看一个例子。

var stringValue = "hello ";
var result = stringValue.concat("world");
alert(result);             //"hello world"
alert(stringValue);        //"hello"

在这个例子中，通过stringValue 调用concat() 方法返回的结果是"hello world" ——但stringValue 的值则保持不变。实际上，concat() 方法可以接受任意多个参数，也就是说可以通过它拼接任意多个字符串。再看一个例子：

var stringValue = "hello ";
var result = stringValue.concat("world", "!");



alert(result);             //"hello world!"
alert(stringValue);        //"hello"

这个例子将"world" 和"!" 拼接到了"hello" 的末尾。虽然concat() 是专门用来拼接字符串的方法，但实践中使用更多的还是加号操作符（+）。而且，使用加号操作符在大多数情况下都比使用concat() 方法要简便易行（特别是在拼接多个字符串的情况下）。

ECMAScript还提供了三个基于子字符串创建新字符串的方法：slice() 、substr() 和substring() 。这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一或两个参数。第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。具体来说，slice() 和substring() 的第二个参数指定的是子字符串最后一个字符后面的位置。而substr() 的第二个参数指定的则是返回的字符个数。如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。与concat() 方法一样，slice() 、substr() 和substring() 也不会修改字符串本身的值——它们只是返回一个基本类型的字符串值，对原始字符串没有任何影响。请看下面的例子。

var stringValue = "hello world";
alert(stringValue.slice(3));            //"lo world"


alert(stringValue.substring(3));        //"lo world"


alert(stringValue.substr(3));           //"lo world"


alert(stringValue.slice(3, 7));         //"lo w"


alert(stringValue.substring(3,7));      //"lo w"


alert(stringValue.substr(3, 7));        //"lo worl"

StringTypeManipulationMethodsExample01.htm

这个例子比较了以相同方式调用slice() 、substr() 和substring() 得到的结果，而且多数情况下的结果是相同的。在只指定一个参数3的情况下，这三个方法都返回"lo world" ，因为"hello" 中的第二个"l" 处于位置3。而在指定两个参数3和7的情况下，slice() 和substring() 返回"lo w" （"world" 中的"o" 处于位置7，因此结果中不包含"o" ），但substr() 返回"lo worl" ，因为它的第二个参数指定的是要返回的字符个数。

在传递给这些方法的参数是负值的情况下，它们的行为就不尽相同了。其中，slice() 方法会将传入的负值与字符串的长度相加，substr() 方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。最后，substring() 方法会把所有负值参数都转换为0。下面来看例子。

var stringValue = "hello world";
alert(stringValue.slice(-3));           //"rld"


alert(stringValue.substring(-3));       //"hello world"


alert(stringValue.substr(-3));          //"rld"


alert(stringValue.slice(3, -4));        //"lo w"


alert(stringValue.substring(3, -4));    //"hel"


alert(stringValue.substr(3, -4));       //""（空字符串）

StringTypeManipulationMethodsExample01.htm

这个例子清晰地展示了上述三个方法之间的不同行为。在给slice() 和substr() 传递一个负值参数时，它们的行为相同。这是因为-3 会被转换为8 （字符串长度加参数11+(-3)=8），实际上相当于调用了slice(8) 和substr(8) 。但substring() 方法则返回了全部字符串，因为它将-3 转换成了0。

IE的JavaScript实现在处理向substr() 方法传递负值的情况时存在问题，它会返回原始的字符串。IE9修复了这个问题。

当第二个参数是负值时，这三个方法的行为各不相同。slice() 方法会把第二个参数转换为7，这就相当于调用了slice(3,7) ，因此返回"lo w" 。substring() 方法会把第二个参数转换为0，使调用变成了substring(3,0) ，而由于这个方法会将较小的数作为开始位置，将较大的数作为结束位置，因此最终相当于调用了substring(0,3) 。substr() 也会将第二个参数转换为0，这也就意味着返回包含零个字符的字符串，也就是一个空字符串。

3. 字符串位置方法

有两个可以从字符串中查找子字符串的方法：indexOf() 和lastIndexOf() 。这两个方法都是从一个字符串中搜索给定的子字符串，然后返子字符串的位置（如果没有找到该子字符串，则返回-1 ）。这两个方法的区别在于：indexOf() 方法从字符串的开头向后搜索子字符串，而lastIndexOf() 方法是从字符串的末尾向前搜索子字符串。还是来看一个例子吧。

var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4


alert(stringValue.lastIndexOf("o"));         //7

StringTypeLocationMethodsExample01.htm

子字符串"o" 第一次出现的位置是4，即"hello" 中的"o" ；最后一次出现的位置是7，即"world" 中的"o" 。如果"o" 在这个字符串中仅出现了一次，那么indexOf() 和lastIndexOf() 会返回相同的位置值。

这两个方法都可以接收可选的第二个参数，表示从字符串中的哪个位置开始搜索。换句话说，indexOf() 会从该参数指定的位置向后搜索，忽略该位置之前的所有字符；而lastIndexOf() 则会从指定的位置向前搜索，忽略该位置之后的所有字符。看下面的例子。

var stringValue = "hello world";
alert(stringValue.indexOf("o", 6));          //7


alert(stringValue.lastIndexOf("o", 6));      //4

在将第二个参数6传递给这两个方法之后，得到了与前面例子相反的结果。这一次，由于indexOf() 是从位置6（字母"w" ）开始向后搜索，结果在位置7找到了"o" ，因此它返回7。而lastIndexOf() 是从位置6开始向前搜索。结果找到了"hello" 中的"o" ，因此它返回4。在使用第二个参数的情况下，可以通过循环调用indexOf() 或lastIndexOf() 来找到所有匹配的子字符串，如下面的例子所示：

var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
var positions = new Array();
var pos = stringValue.indexOf("e");

while(pos > -1){
    positions.push(pos);
    pos = stringValue.indexOf("e", pos + 1);
}

alert(positions);    //"3,24,32,35,52"

StringTypeLocationMethodsExample02.htm

这个例子通过不断增加indexOf() 方法开始查找的位置，遍历了一个长字符串。在循环之外，首先找到了"e" 在字符串中的初始位置；而进入循环后，则每次都给indexOf() 传递上一次的位置加1。这样，就确保了每次新搜索都从上一次找到的子字符串的后面开始。每次搜索返回的位置依次被保存在数组positions 中，以便将来使用。

4. trim() 方法

ECMAScript 5为所有字符串定义了trim() 方法。这个方法会创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果。例如：

var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "
alert(trimmedStringValue);     //"hello world"

由于trim() 返回的是字符串的副本，所以原始字符串中的前置及后缀空格会保持不变。支持这个方法的浏览器有IE9+、Firefox 3.5+、Safari 5+、Opera 10.5+和Chrome。此外，Firefox 3.5+、Safari 5+和Chrome 8+还支持非标准的trimLeft() 和trimRight() 方法，分别用于删除字符串开头和末尾的空格。

5. 字符串大小写转换方法

接下来我们要介绍的是一组与大小写转换有关的方法。ECMAScript中涉及字符串大小写转换的方法有4个：toLowerCase() 、toLocaleLowerCase() 、toUpperCase() 和toLocaleUpperCase() 。其中，toLowerCase() 和toUpperCase() 是两个经典的方法，借鉴自java.lang.String 中的同名方法。而toLocaleLowerCase() 和toLocaleUpperCase() 方法则是针对特定地区的实现。对有些地区来说，针对地区的方法与其通用方法得到的结果相同，但少数语言（如土耳其语）会为Unicode大小写转换应用特殊的规则，这时候就必须使用针对地区的方法来保证实现正确的转换。以下是几个例子。

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"


alert(stringValue.toUpperCase());        //"HELLO WORLD"


alert(stringValue.toLocaleLowerCase());  //"hello world"


alert(stringValue.toLowerCase());        //"hello world"

StringTypeCaseMethodExample01.htm

以上代码调用的toLocaleUpperCase() 和toUpperCase() 都返回了"HELLO WORLD" ，就像调用toLocaleLowerCase() 和toLowerCase() 都返回"hello world" 一样。一般来说，在不知道自己的代码将在哪种语言环境中运行的情况下，还是使用针对地区的方法更稳妥一些。

6. 字符串的模式匹配方法

String 类型定义了几个用于在字符串中匹配模式的方法。第一个方法就是match() ，在字符串上调用这个方法，本质上与调用RegExp 的exec() 方法相同。match() 方法只接受一个参数，要么是一个正则表达式，要么是一个RegExp 对象。来看下面的例子。

var text = "cat, bat, sat, fat"; 
var pattern = /.at/;

//与pattern.exec(text)相同
var matches = text.match(pattern);
alert(matches.index);               //0
alert(matches[0]);                  //"cat"
alert(pattern.lastIndex);           //0