js 面向对象的技术创建高级 Web 应用程序

var userObject = new Object(); 
userObject.lastLoginTime = new Date(); 
alert(userObject.lastLoginTime);

var userObject = {}; // equivalent to new Object() 
userObject[“lastLoginTime”] = new Date(); 
alert(userObject[“lastLoginTime”]);

var userObject = { “lastLoginTime”: new Date() }; 
alert(userObject.lastLoginTime);

function func(x) { 
alert(x); 
} 
func(“blah”);

var func = function(x) { 
alert(x); 
}; 
func(“blah2”);

var func = new Function(“x”, “alert(x);”); 
func(“blah3”);

function sayHi(x) { 
alert(“Hi, “ + x + “!”); 
} 
sayHi.text = “Hello World!”; 
sayHi[“text2”] = “Hello World... again.”; 
alert(sayHi[“text”]); // displays “Hello World!” 
alert(sayHi.text2); // displays “Hello World... again.”

// assign an anonymous function to a variable 
var greet = function(x) { 
alert(“Hello, “ + x); 
}; 
greet(“MSDN readers”); 
// passing a function as an argument to another 
function square(x) { 
return x * x; 
} 
function operateOn(num, func) { 
return func(num); 
} 
// displays 256 
alert(operateOn(16, square)); 
// functions as return values 
function makeIncrementer() { 
return function(x) { return x + 1; }; 
} 
var inc = makeIncrementer(); 
// displays 8 
alert(inc(7)); 
// functions stored as array elements 
var arr = []; 
arr[0] = function(x) { return x * x; }; 
arr[1] = arr[0](2); 
arr[2] = arr[0](arr[1]); 
arr[3] = arr[0](arr[2]); 
// displays 256 
alert(arr[3]); 
// functions as object properties 
var obj = { “toString” : function() { return “This is an object.”; } }; 
// calls obj.toString() 
alert(obj);

var myDog = { 
“name” : “Spot”, 
“bark” : function() { alert(“Woof!”); }, 
“displayFullName” : function() { 
alert(this.name + “ The Alpha Dog”); 
}, 
“chaseMrPostman” : function() { 
// implementation beyond the scope of this article 
} 
}; 
myDog.displayFullName(); 
myDog.bark(); // Woof!

function displayQuote() { 
// the value of “this” will change; depends on 
// which object it is called through 
alert(this.memorableQuote); 
} 
var williamShakespeare = { 
“memorableQuote”: “It is a wise father that knows his own child.”, 
“sayIt” : displayQuote 
}; 
var markTwain = { 
“memorableQuote”: “Golf is a good walk spoiled.”, 
“sayIt” : displayQuote 
}; 
var oscarWilde = { 
“memorableQuote”: “True friends stab you in the front.” 
// we can call the function displayQuote 
// as a method of oscarWilde without assigning it 
// as oscarWilde's method. 
//”sayIt” : displayQuote 
}; 
williamShakespeare.sayIt(); // true, true 
markTwain.sayIt(); // he didn't know where to play golf 
// watch this, each function has a method call() 
// that allows the function to be called as a 
// method of the object passed to call() as an 
// argument. 
// this line below is equivalent to assigning 
// displayQuote to sayIt, and calling oscarWilde.sayIt(). 
displayQuote.call(oscarWilde); // ouch!

alert(“NaN is NaN: “ + isNaN(NaN)); 
function x() { 
this.isNaN = function() { 
return “not anymore!”; 
}; 
} 
// alert!!! trampling the Global object!!! 
x(); 
alert(“NaN is NaN: “ + isNaN(NaN));

function DogConstructor(name) { 
this.name = name; 
this.respondTo = function(name) { 
if(this.name == name) { 
alert(“Woof”); 
} 
}; 
} 
var spot = new DogConstructor(“Spot”); 
spot.respondTo(“Rover”); // nope 
spot.respondTo(“Spot”); // yeah!

// create an empty object 
var spot = {}; 
// call the function as a method of the empty object 
DogConstructor.call(spot, “Spot”);

// Think of this as class Dog 
function Dog(name) { 
// instance variable 
this.name = name; 
// instance method? Hmmm... 
this.respondTo = function(name) { 
if(this.name == name) { 
alert(“Woof”); 
} 
}; 
} 
var spot = new Dog(“Spot”);

function respondTo() { 
// respondTo definition 
} 
function Dog(name) { 
this.name = name; 
// attached this function as a method of the object 
this.respondTo = respondTo; 
}

图 3 每个函数的原型都有一个 Constructor 属性 

现 在，通过“new”运算符用函数（上面示例中为 Dog）创建对象时，所获得的对象将继承 Dog.prototype 的属性。在图 3 中，可以看到 Dog.prototype 对象有一个回指 Dog 函数的构造函数属性。这样，每个 Dog 对象（从 Dog.prototype 继承而来）都有一个回指 Dog 函数的构造函数属性。图 4 中的代码证实了这一点。图 5 显示了构造函数、原型对象以及用它们创建的对象之间的这一关系。

代码如下：

var spot = new Dog(“Spot”); 
// Dog.prototype is the prototype of spot 
alert(Dog.prototype.isPrototypeOf(spot)); 
// spot inherits the constructor property 
// from Dog.prototype 
alert(spot.constructor == Dog.prototype.constructor); 
alert(spot.constructor == Dog); 
// But constructor property doesn't belong 
// to spot. The line below displays “false” 
alert(spot.hasOwnProperty(“constructor”)); 
// The constructor property belongs to Dog.prototype 
// The line below displays “true” 
alert(Dog.prototype.hasOwnProperty(“constructor”));

 
图 5 实例继承其原型
某 些读者可能已经注意到图 4 中对 hasOwnProperty 和 isPrototypeOf 方法的调用。这些方法是从哪里来的呢？它们不是来自 Dog.prototype。实际上，在 Dog.prototype 和 Dog 实例中还可以调用其他方法，比如 toString、toLocaleString 和 valueOf，但它们都不来自 Dog.prototype。您会发现，就像 .NET Framework 中的 System.Object 充当所有类的最终基类一样，JavaScript 中的 Object.prototype 是所有原型的最终基础原型。（Object.prototype 的原型是 null。）
在 此示例中，请记住 Dog.prototype 是对象。它是通过调用 Object 构造函数创建的（尽管它不可见）：
Dog.prototype = new Object();


因此，正如 Dog 实例继承 Dog.prototype 一样，Dog.prototype 继承 Object.prototype。这使得所有 Dog 实例也继承了 Object.prototype 的方法和属性。
每 个 JavaScript 对象都继承一个原型链，而所有原型都终止于 Object.prototype。注意，迄今为止您看到的这种继承是活动对象之间的继承。它不同于继承的常见概念，后者是指在声明类时类之间的发生的继 承。因此，JavaScript 继承动态性更强。它使用简单算法实现这一点，如下所示：当您尝试访问对象的属性/方法时，JavaScript 将检查该属性/方法是否是在该对象中定义的。如果不是，则检查对象的原型。如果还不是，则检查该对象的原型的原型，如此继续，一直检查到 Object.prototype。图 6 说明了此解析过程。
 
图 6 在原型链中解析 toString() 方法 (单 击该图像获得较大视图)
JavaScript 动态地解析属性访问和方法调用的方式产生了一些特殊效果：
继承原型对象的对象上可以立即呈现对原型所做的更改，即使是在创建这些对象之后。
如果在对象中定义了属性/方法 X，则该对象的原型中将隐藏同名的属性/方法。例如，通过在 Dog.prototype 中定义 toString 方法，可以改写 Object.prototype 的 toString 方法。
更改只沿一个方向传递，即从原型到它的派生对象，但不能沿相反方向传 递。
图 7 说明了这些效果。图 7 还显示了如何解决前面遇到的不需要的方法实例的问题。通过将方法放在原型内部，可以使对象共享方法，而不必使每个对象都有单独的函数对象实例。在此示例 中，rover 和 spot 共享 getBreed 方法，直至在 spot 中以任何方式改写 toString 方法。此后，spot 有了它自己版本的 getBreed 方法，但 rover 对象和用新 GreatDane 创建的后续对象仍将共享在 GreatDane.prototype 对象中定义的那个 getBreed 方法实例。
继承原型

代码如下：

function GreatDane() { } 
var rover = new GreatDane(); 
var spot = new GreatDane(); 
GreatDane.prototype.getBreed = function() { 
return “Great Dane”; 
}; 
// Works, even though at this point 
// rover and spot are already created. 
alert(rover.getBreed()); 
// this hides getBreed() in GreatDane.prototype 
spot.getBreed = function() { 
return “Little Great Dane”; 
}; 
alert(spot.getBreed()); 
// but of course, the change to getBreed 
// doesn't propagate back to GreatDane.prototype 
// and other objects inheriting from it, 
// it only happens in the spot object 
alert(rover.getBreed());

静态属性和方法
有 时，您需要绑定到类而不是实例的属性或方法，也就是，静态属性和方法。在 JavaScript 中很容易做到这一点，因为函数是可以按需要设置其属性和方法的对象。由于在 JavaScript 中构造函数表示类，因此可以通过在构造函数中设置静态方法和属性，直接将它们添加到类中，如下所示：

代码如下：

function DateTime() { } 
// set static method now() 
DateTime.now = function() { 
return new Date(); 
}; 
alert(DateTime.now());

在 JavaScript 中调用静态方法的语法与在 C# 中几乎完全相同。这不应当让人感到吃惊，因为构造函数的名称实际上是类的名称。这样，就有了类、公用属性/方法，以及静态属性/方法。还需要其他什么吗？ 当然，私有成员。但 JavaScript 本身并不支持私有成员（同样，也不支持受保护成员）。任何人都可以访问对象的所有属性和方法。但我们有办法让类中包含私有成员，但在此之前，您首先需要理 解闭包。

闭包
我 没有自觉地学习过 JavaScript。我必须快点了解它，因为我发现如果没有它，在实际工作中编写 AJAX 应用程序的准备就会不充分。开始，我感到我的编程水平好像降了几个级别。（JavaScript！我的 C++ 朋友会怎么说？）但一旦我克服最初的障碍，我就发现 JavaScript 实际上是功能强大、表现力强而且非常简练的语言。它甚至具有其他更流行的语言才刚刚开始支持的功能。
JavaScript 的更高级功能之一是它支持闭包，这是 C# 2.0 通过它的匿名方法支持的功能。闭包是当内部函数（或 C# 中的内部匿名方法）绑定到它的外部函数的本地变量时所发生的运行时现象。很明显，除非此内部函数以某种方式可被外部函数访问，否则它没有多少意义。示例可 以更好说明这一点。
假 设需要根据一个简单条件筛选一个数字序列，这个条件是：只有大于 100 的数字才能通过筛选，并忽略其余数字。为此，可以编写类似图 8 中的函数。
根据谓词筛选元素

代码如下：

function filter(pred, arr) { 
var len = arr.length; 
var filtered = []; // shorter version of new Array(); 
// iterate through every element in the array... 
for(var i = 0; i < len; i++) { 
var val = arr[i]; 
// if the element satisfies the predicate let it through 
if(pred(val)) { 
filtered.push(val); 
} 
} 
return filtered; 
} 
var someRandomNumbers = [12, 32, 1, 3, 2, 2, 234, 236, 632,7, 8]; 
var numbersGreaterThan100 = filter( 
function(x) { return (x > 100) ? true : false; }, 
someRandomNumbers); 
// displays 234, 236, 632 
alert(numbersGreaterThan100);

但是，现在要创建不同的筛选条件，假设这次只有大于 300 的数字才能通过筛选，则可以编写下面这样的函数：

代码如下：

var greaterThan300 = filter( 
function(x) { return (x > 300) ? true : false; }, 
someRandomNumbers);

然后，也许需要筛选大于 50、25、10、600 如此等等的数字，但作为一个聪明人，您会发现它们全部都有相同的谓词“greater than”，只有数字不同。因此，可以用类似下面的函数分开各个数字：

代码如下：

function makeGreaterThanPredicate(lowerBound) { 
return function(numberToCheck) { 
return (numberToCheck > lowerBound) ? true : false; 
}; 
}

这样，您就可以编写以下代码：

代码

代码如下：

var greaterThan10 = makeGreaterThanPredicate(10); 
var greaterThan100 = makeGreaterThanPredicate(100); 
alert(filter(greaterThan10, someRandomNumbers)); 
alert(filter(greaterThan100, someRandomNumbers));

通过观察函数 makeGreaterThanPredicate 返回的内部匿名函数，可以发现，该匿名内部函数使用 lowerBound，后者是传递给 makeGreaterThanPredicate 的参数。按照作用域的一般规则，当 makeGreaterThanPredicate 退出时，lowerBound 超出了作用域！但在这里，内部匿名函数仍然携带 lowerBound，甚至在 makeGreaterThanPredicate 退出之后的很长时间内仍然如此。这就是我们所说的闭包：因为内部函数关闭了定义它的环境（即外部函数的参数和本地变量）。
开 始可能感觉不到闭包的功能很强大。但如果应用恰当，它们就可以非常有创造性地帮您将想法转换成代码，这个过程非常有趣。在 JavaScript 中，闭包最有趣的用途之一是模拟类的私有变量。

模拟私有属性
现 在介绍闭包如何帮助模拟私有成员。正常情况下，无法从函数以外访问函数内的本地变量。函数退出之后，由于各种实际原因，该本地变量将永远消失。但是，如果 该本地变量被内部函数的闭包捕获，它就会生存下来。这一事实是模拟 JavaScript 私有属性的关键。假设有一个 Person 类：
代码

代码如下：

function Person(name, age) { 
this.getName = function() { return name; }; 
this.setName = function(newName) { name = newName; }; 
this.getAge = function() { return age; }; 
this.setAge = function(newAge) { age = newAge; }; 
}

参数 name 和 age 是构造函数 Person 的本地变量。Person 返回时，name 和 age 应当永远消失。但是，它们被作为 Person 实例的方法而分配的四个内部函数捕获，实际上这会使 name 和 age 继续存在，但只能严格地通过这四个方法访问它们。因此，您可以：

代码

代码如下：

var ray = new Person(“Ray”, 31); 
alert(ray.getName()); 
alert(ray.getAge()); 
ray.setName(“Younger Ray”); 
// Instant rejuvenation! 
ray.setAge(22); 
alert(ray.getName() + “ is now “ + ray.getAge() + 
“ years old.”);

未在构造函数中初始化的私有成员可以成为构造函数的本地变量，如下所示：

代码

代码如下：

function Person(name, age) { 
var occupation; 
this.getOccupation = function() { return occupation; }; 
this.setOccupation = function(newOcc) { occupation = 
newOcc; }; 
// accessors for name and age 
}

注意，这些私有成员与我们期望从 C# 中产生的私有成员略有不同。在 C# 中，类的公用方法可以访问它的私有成员。但在 JavaScript 中，只能通过在其闭包内拥有这些私有成员的方法来访问私有成员（由于这些方法不同于普通的公用方法，它们通常被称为特权方法）。因此，在 Person 的公用方法中，仍然必须通过私有成员的特权访问器方法才能访问私有成员：

代码如下：

Person.prototype.somePublicMethod = function() { 
// doesn't work! 
// alert(this.name); 
// this one below works 
alert(this.getName()); 
};

Douglas Crockford 是著名的发现（或者也许是发布）使用闭包来模拟私有成员这一技术的第一人。他的网站 javascript.crockford.com 包含有关 JavaScript 的丰富信息，任何对 JavaScript 感兴趣的开发人员都应当仔细研读。

从类继承
到 这里，我们已经了解了构造函数和原型对象如何使您在 JavaScript 中模拟类。您已经看到，原型链可以确保所有对象都有 Object.prototype 的公用方法，以及如何使用闭包来模拟类的私有成员。但这里还缺少点什么。您尚未看到如何从类派生，这在 C# 中是每天必做的工作。遗憾的是，在 JavaScript 中从类继承并非像在 C# 中键入冒号即可继承那样简单，它需要进行更多操作。另一方面，JavaScript 非常灵活，可以有很多从类继承的方式。
例 如，有一个基类 Pet，它有一个派生类 Dog，如图 9 所示。这个在 JavaScript 中如何实现呢？Pet 类很容易。您已经看见如何实现它了：
 

代码如下：

// class Pet 
function Pet(name) { 
this.getName = function() { return name; }; 
this.setName = function(newName) { name = newName; }; 
} 
Pet.prototype.toString = function() { 
return “This pet's name is: “ + this.getName(); 
}; 
// end of class Pet 
var parrotty = new Pet(“Parrotty the Parrot”); 
alert(parrotty);

现在，如何创建从 Pet 派生的类 Dog 呢？在图 9 中可以看到，Dog 有另一个属性 breed，它改写了 Pet 的 toString 方法（注意，JavaScript 的约定是方法和属性名称使用 camel 大小写，而不是在 C# 中建议的 Pascal 大小写）。图 10 显示如何这样做。

从Pet类派生

代码如下：

// class Dog : Pet 
// public Dog(string name, string breed) 
function Dog(name, breed) { 
// think Dog : base(name) 
Pet.call(this, name); 
this.getBreed = function() { return breed; }; 
// Breed doesn't change, obviously! It's read only. 
// this.setBreed = function(newBreed) { name = newName; }; 
} 
// this makes Dog.prototype inherits 
// from Pet.prototype 
Dog.prototype = new Pet(); 
// remember that Pet.prototype.constructor 
// points to Pet. We want our Dog instances' 
// constructor to point to Dog. 
Dog.prototype.constructor = Dog; 
// Now we override Pet.prototype.toString 
Dog.prototype.toString = function() { 
return “This dog's name is: “ + this.getName() + 
“, and its breed is: “ + this.getBreed(); 
}; 
// end of class Dog 
var dog = new Dog(“Buddy”, “Great Dane”); 
// test the new toString() 
alert(dog); 
// Testing instanceof (similar to the is operator) 
// (dog is Dog)? yes 
alert(dog instanceof Dog); 
// (dog is Pet)? yes 
alert(dog instanceof Pet); 
// (dog is Object)? yes 
alert(dog instanceof Object);

所使用的原型 ― 替换技巧正确设置了原型链，因此假如使用 C#，测试的实例将按预期运行。而且，特权方法仍然会按预期运行。

模拟命名空间
在 C++ 和 C# 中，命名空间用于尽可能地减少名称冲突。例如，在 .NET Framework 中，命名空间有助于将 Microsoft.Build.Task.Message 类与 System.Messaging.Message 区分开来。JavaScript 没有任何特定语言功能来支持命名空间，但很容易使用对象来模拟命名空间。如果要创建一个 JavaScript 库，则可以将它们包装在命名空间内，而不需要定义全局函数和类，如下所示：

代码如下：

var MSDNMagNS = {}; 
MSDNMagNS.Pet = function(name) { // code here }; 
MSDNMagNS.Pet.prototype.toString = function() { // code }; 
var pet = new MSDNMagNS.Pet(“Yammer”);

命名空间的一个级别可能不是唯一的，因此可以创建嵌套的命名空间：

代码

代码如下：

var MSDNMagNS = {}; 
// nested namespace “Examples” 
MSDNMagNS.Examples = {}; 
MSDNMagNS.Examples.Pet = function(name) { // code }; 
MSDNMagNS.Examples.Pet.prototype.toString = function() { // code }; 
var pet = new MSDNMagNS.Examples.Pet(“Yammer”);

可以想象，键入这些冗长的嵌套命名空间会让人很累。 幸运的是，库用户可以很容易地为命名空间指定更短的别名：

代码如下：

// MSDNMagNS.Examples and Pet definition... 
// think “using Eg = MSDNMagNS.Examples;” 
var Eg = MSDNMagNS.Examples; 
var pet = new Eg.Pet(“Yammer”); 
alert(pet);

如果看一下 Microsoft AJAX 库的源代码，就会发现库的作者使用了类似的技术来实现命名空间（请参阅静态方法 Type.registerNamespace 的实现）。有关详细信息，请参与侧栏“OOP 和 ASP.NET AJAX”。

应当这样编写 JavaScript 代码吗？
您 已经看见 JavaScript 可以很好地支持面向对象的编程。尽管它是一种基于原型的语言，但它的灵活性和强大功能可以满足在其他流行语言中常见的基于类的编程风格。但问题是：是否应 当这样编写 JavaScript 代码？在 JavaScript 中的编程方式是否应与 C# 或 C++ 中的编码方式相同？是否有更聪明的方式来模拟 JavaScript 中没有的功能？每种编程语言都各不相同，一种语言的最佳做法，对另一种语言而言则可能并非最佳。
在 JavaScript 中，您已看到对象继承对象（与类继承类不同）。因此，使用静态继承层次结构建立很多类的方式可能并不适合 JavaScript。也许，就像 Douglas Crockford 在他的文章 Prototypal Inheritance in JavaScript 中说的那样，JavaScript 编程方式是建立原型对象，并使用下面的简单对象函数建立新的对象，而后者则继承原始对象：

代码如下：

function object(o) { 
function F() {} 
F.prototype = o; 
return new F(); 
}

然后，由于 JavaScript 中的对象是可延展的，因此可以方便地在创建对象之后，根据需要用新字段和新方法增大对象。
这 的确很好，但它不可否认的是，全世界大多数开发人员更熟悉基于类的编程。实际上，基于类的编程也会在这里出现。按照即将颁发的 ECMA-262 规范第 4 版（ECMA-262 是 JavaScript 的官方规范），JavaScript 2.0 将拥有真正的类。因此，JavaScript 正在发展成为基于类的语言。但是，数年之后 JavaScript 2.0 才可能会被广泛使用。同时，必须清楚当前的 JavaScript 完全可以用基于原型的风格和基于类的风格读取和写入 JavaScript 代码。

展望
随 着交互式胖客户端 AJAX 应用程序的广泛使用，JavaScript 迅速成为 .NET 开发人员最重要的工具之一。但是，它的原型性质可能一开始会让更习惯诸如 C++、C# 或 Visual Basic 等语言的开发人员感到吃惊。我已发现我的 JavaScript 学习经历给予了我丰富的体验，虽然其中也有一些挫折。如果本文能使您的体验更加顺利，我会非常高兴，因为这正是我的目标。