[转]通译：有点高级的JavaScript面向对象特征指南快速教程

翻译：有点高级的JavaScript面向对象特征指南快速教程，呵呵


翻译说明：本文是我从Prado框架的《快速入门指南》翻译中摘录出来的，感觉对JavaScript的学习很有帮助，特贴出备忘。
Javascript简介
本指引基于Sergio Pereira的 Quick guide to somewhat advanced JavaScript tour of some OO features。
嘿，我不知道你能那样做
如果你是一个Web开发者而且与我来自同一个地方，你也许在你的Web页面中使用过相当多的Javascript，大部分用来作用户界面（UI）的粘合。

直到现在，我才知道Javascript具有比我过去使用的更多的面向对象能力，只是我没有如我所需的去使用它。当浏览器开始支持更标准的 Javascript和DOM的功能集时，要为客户端上的运行而编写更复杂和多功能的代码就变得可行了。它助长了AJAX现象的产生。

当我们都开始学习它适合编写什么酷的AJAX应用时，我们开始关注到我们过去知道的Javascript不过只是冰山一角而已。我们现在知道 Javascript不仅仅被用于象输入校验等简单的用户界面杂务和其他琐碎任务。现在的客户端代码更高级和分层，更象一个真正的桌面应用或一个客户端－ 服务器的富客户端。我们在其中看到了过去仅在服务器端的代码中见到的类库、对象模型、继承关系、模式和许多其他的东西。

突然在我们能讲到的许多方面被放到了比以前更高的位置。要为新的Web编写应用，我们必需提高我们的Javascript水平来跟上它而且要更加熟 练。假如你尝试运用许多现有的javascript库，如：Prototype.js、Scriptaculous、moo.fx、Behaviour、 YUI等，你最终会发现自己要阅读JS代码。或许因为你想要学习它们如何实现，或因为你的好奇，或通常因为那是知道如何使用它的唯一办法，大多数这些库象 是不太注重文档。无论个案会是什么，假如你之前不了解那样的东西，你将要面对一些引起恐慌的外部技术。

本文的目的正好是解说许多我们还不熟悉的构造类型。

JSON (JavaScript Object Notation－Javascript对象表示法)
Javascript对象表示法（JSON），是围绕AJAX主题突然出现的一个新的时髦词。JSON，简单的说就是一种在Javascript中定义对象的方法。让我们马上来看看一个实例并体会它如何简单。

var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
for(i=0;i<repeatCount;i++) alert('Woof!');} };
就让我们加入些许格式让它看起来象我们平常所认识的那样：

var myPet =
{
color: 'black',
legCount: 4,
communicate: function(repeatCount)
{
for(i=0;i<repeatCount;i++)
alert('Woof!');
}
};
在这我们创建了一个带两个属性(color和legCount)和一个方法(communicate)的对象引用。不难发现，该对象的属性和方法用一个逗 号区隔的列表来定义。每个成员通过名称来引入，接着是冒号和定义。对于属性来说很容易，仅仅是属性值。方法通过指派一个匿名函数来创建，我们下面会更好地 说明。在该对象被创建并指派给变量myPet之后，我们可以如下使用它：

alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);
You'll see JSON used pretty much everywhere in JS these days, as arguments to functions, as return values, as server responses (in strings,) etc.

你想说什么？函数也是一个对象？
对于开发者来说这可能与众不同，但在JS中一个函数也是一个对象。你可以象参数一样把一个函数传送给另一个函数，就象你可以传送一个字符串一样。这些被广泛应用而且非常便利。

看看这个实例。我们将把函数传送到另一个使用它们的函数去。

var myDog =
{
bark: function()
{
alert('Woof!');
}
};

var myCat =
{
meow: function()
{
alert('I am a lazy cat. I will not meow for you.');
}
};

function annoyThePet(petFunction)
{
//let's see what the pet can do
petFunction();
}

//annoy the dog:
annoyThePet(myDog.bark);
//annoy the cat:
annoyThePet(myCat.meow);
注意，我们把没有添加"()"的myDog.bark和myCat.meow传送给它们。假如我们那样做了，我们不是传送函数，而是调用那些方法并传送它们的返回值，这里的两个个案中都未定义。

要是你想另我的懒猫起来嗥叫，你可以简单地这样做：

myCat.meow = myDog.bark;
myCat.meow(); //alerts 'Woof!'
数组、项目和对象成员
在JS中下列两行做了同样的事。

var a = new Array();
var b = [];
正如我确定你已经知道的那样，你可以通过使用方括号在一个数组中访问个别项目：

var a = ['first', 'second', 'third'];
var v1 = a[0];
var v2 = a[1];
var v3 = a[2];
但你还不限于数字索引。你可以通过使用它的名字以字符串来访问一个JS对象的任何成员。下面的例子创建了一个空对象，并通过名字加入了一些成员。

var obj = {}; //new, empty object
obj['member_1'] = 'this is the member value';
obj['flag_2'] = false;
obj['some_function'] = function(){ /* do something */};
上述代码的作用与下面的相同：

var obj =
{
member_1:'this is the member value',
flag_2: false,
some_function: function(){ /* do something */}
};
在许多情形下，在JS中对象的概念和关联的数组（杂凑）没有区别。下面两行代码都做了同样的事情。

obj.some_function();
obj['some_function']();
关于对象已经够了，我现在能有一个类了吗？
面向对象编程语言的巨大力量来源于类的使用。我不认为仅应用我之前使用其他语言的经验就能推测出在JS中如何定义类。这由你自己来判断。

//defining a new class called Pet
var Pet = function(petName, age)
{
this.name = petName;
this.age = age;
};

//let's create an object of the Pet class
var famousDog = new Pet('Santa/'s Little Helper', 15);
alert('This pet is called ' + famousDog.name);
让我们看看如何加入一个方法到我们的Pet类。我们将使用所有类都具有的prototype属性。prototype属性是一个包含任何对象的类会具有的 所有成员的对象。甚至默认的JS类，如String、Number和Date拥有一个的prototype对象，它能让我们可以添加方法和属性并使那个类 的任何对象自动获取这个新成员。

Pet.prototype.communicate = function()
{
alert('I do not know what I should say, but my name is ' + this.name);
};
那就是一个类似于prototype.js的库会派上用场的时候。如果我们使用prototype.js，我们能使我们的代码看起来更清晰（至少在我看来是这样）。

var Pet = Class.create();
Pet.prototype =
{
//our 'constructor'
initialize: function(petName, age)
{
this.name = petName;
this.age = age;
},

communicate: function()
{
alert('I do not know what I should say, but my name is ' + this.name);
}
};
函数作为参数，一个有趣的模式
假如你从来没有接触过支持闭合的语言，你也许会发现下面的惯用法太令人震惊了。

var myArray = ['first', 'second', 'third'];
myArray.each( function(item, index)
{
alert('The item in the position #' + index + ' is:' + item);
});
哇！在你断定我已经离题太远并且想转去比这篇更好点的文章之前，让我们在这解释一下要继续干些什么。

首先，在上述实例中我们使用了prototype.js库，它添加了each函数到Array类。该each函数接到一个函数对象的参数。这个函数 对于数组中的每个项目都将被依次调用一次，对于当前项目调用时传送两个参数，item和index。让我们称这个函数为iterator函数。我们也能象 这样编写代码：

function myIterator(item, index)
{
alert('The item in the position #' + index + ' is:' + item);
}

var myArray = ['first', 'second', 'third'];
myArray.each( myIterator );
我们不会象那些学校里的那些天真孩子那样做的，对吧？虽然更严格地说，后面的形式更易于理解但导致我们要进入代码中四处找寻myIterator函数。最 好在它调用的同一个地方那里有迭代函数的逻辑。在本案例中，我们也不会在其他任何地方需要迭代函数，所以我们无损地把它转化成一个匿名函数。

这是this，但有时this也是那个
当使用JS开始编写我们的代码时，我们最普遍的一个麻烦就是this关键字的使用。它是一个真正的牵绊。

就象我们之前提及的那样，在JS中一个函数也是一个对象，而且有时候我们不注意我们正在传出一个函数。

拿这小段代码举个例：

function buttonClicked()
{
alert('button ' + this.id + ' was clicked');
}

var myButton = document.getElementById('someButtonID');
var myButton2 = document.getElementById('someOtherButtonID');
myButton.onclick = buttonClicked;
myButton2.onclick = buttonClicked;
由于buttonClicked函数在任何对象之外被定义，我们也许以为this关键字会包含一个window或document对象（假设这些代码位于一个在浏览器中被浏览的HTML页面中间）的引用。

但是当我们运行这段代码时，我们看到它如愿工作并显示被点击按钮的id。究竟其中发生了什么另我们使每个按钮的onclick方法包含buttonClicked对象引用，而无论之前那里有什么。现在无论按钮什么时候被点击，浏览器都会运行一些类似下行的东西：

myButton.onclick();
那毕竟不是这么混乱，是吧？只要你了解有别的对象要进行处理并想在这些对象的事件上，如点击按钮，进行什么行动后发生了什么就行了。

var myHelper =
{
formFields: [ ],
emptyAllFields: function()
{
for(i=0; i < this.formFields.length; i++)
{
var elementID = this.formFields[i];
var field = document.getElementById(elementID);
field.value = '';
}
}
};

//tell which form fields we want to work with
myHelper.formFields.push('txtName');
myHelper.formFields.push('txtEmail');
myHelper.formFields.push('txtAddress');

//clearing the text boxes:
myHelper.emptyAllFields();

var clearButton = document.getElementById('btnClear');
clearButton.onclick = myHelper.emptyAllFields;
因此你想：好了，现在我可以在我的页面上点击Clear按钮，那三个文本框就将被清空。然后你尝试点击该按钮后仅得到一个运行时错误。该错误将涉及（猜猜 是什么？）this关键字。该问题是this.formFields没被定义即便this包含了一个到按钮的引用，那正是现在所发生的。一个快速的解决方 案是重写我们最后一行的代码。

clearButton.onclick = function()
{
myHelper.emptyAllFields();
};
我们创建一个全新的函数，那种方法在协助对象的场景中调用了我们的协助方法。