AJAX 系列文章(2) - JavaScript 与面向对象技术

AJAX 系列文章(2) - JavaScript 与面向对象技术
周融，2007 年 6 月
(C) 2001-2007 All Rights Reserved.

JavaScript 一直都是方便实用的轻量级脚本语言，它被 B/S 架构的应用程序所采用。在 DHTML 和 JavaScrpt 的配合下，Web 应用程序用户体验更加完善，JavaScript 还是 AJAX 技术的实现基础。本文将深入介绍在 JavaScript 中的高级编程技术，以及这些技术如何应用。

本文中的内容包括：
1、JavaScript 中的对象 - 它们是字典
2、JavaScript 中的原型对象
3、在 JavaScript 中使用类
4、利用 ASP.NET AJAX 扩展使得编写 JavaScript 更加简单
5、结论

JavaScript 中的对象 - 它们是字典

在 C++ 或 C# 中的类是一个引用类型，它包括域、属性、方法和事件；它甚至还有运行时类型系统。而 JavaScript 中的对象则不同。严格的说，JavaScript 里面没有类和对象的概念，我们通常使用的诸如 window 等对象，实际上是一个包含了“名称”和“值”的字典。

通常，我们会像这样访问一个 JavaScript “对象”：

var  s  =   " Hello, World! " ;
window.alert(s.length);

实际上这段代码相当于作如下调用：

var  s  =   " Hello, World! " ;
window[ " alert " ](s[ " length " ]);

由此看出，JavaScript 中的对象，是一系列名称和值的组合，通常定义在其他语言中的成员运算符(".")在 JavaScript 中也已经失去了其原有的含义。JavaScript 将 { } 中的内容视为名称和值对的定义，因此，下面的语句

var  o  =   new  Object();

和

var  o  =   ... { } ;

是等同的。

另外，JavaScript 中的函数也非常令人费解，我们可以将一个变量声明为函数。例如：

function  clickButton(buttonId)  ... { getElementById(buttonId).onclick(); }
clickButton( " myButton " );

可以等同于：

var  click  =   function (elementId)  ... {
    getElementById(elementId).onclick();
}
click( " thisBittpm " );

在每个 JavaScript function 中可以嵌套 function 声明，也可以拥有变量声明。这样一来，我们也可以把 function 当成一个容器。例如利用 function 定义一个具备 name, age 的名称值对。

var  Person  =   function (name, age)  ... {
    this.name = name;
    this.age = age;
}

var  person  =   new  Person( " my name " ,  21 );
alert(person.name);

这一段代码更加类似于其他语言中对类的定义。这段代码也可以这样定义：

Person  =   ... {
    name: "123";
    age: 21;
    get_name: function() ...{ return this.name; }
}

这种直接写出名称和值对的声明方式称为 JSON(JavaScript 对象标记)语法，这类似于 C# 3.0 中的对象和初始值设定项。

注意：JavaScript 函数是对象。作为对象，函数还可以赋给变量、作为参数传递给其他函数、作为其他函数的值返回，并可以作为对象的属性或数组的元素进行存储等等。记住这一点后，向对象添加方法将是很容易的事情：只需选择名称，然后将函数赋给该名称。因此，我通过将匿名函数分别赋给相应的方法名称，在对象中定义了三个方法：

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!

可见，JavaScript 中对于经典的类的概念有自己的一种实现。为了理解这些，下面我们介绍 JavaScript 中的深入概念——原型对象(prototype)。

JavaScript 中的原型对象

在使用 JavaScript 的面向对象编程中，原型对象是个核心概念。在 JavaScript 中对象是作为现有示例（即原型）对象的副本而创建的，该名称就来自于这一概念。此原型对象的任何属性和方法都将显示为从原型的构造函数创建的对象的属性和方法。可以说，这些对象从其原型继承了属性和方法。当您创建如下所示的新 Dog 对象时：

var  buddy  =   new  Dog(“Buddy“);

buddy 所引用的对象将从它的原型继承属性和方法，尽管仅从这一行可能无法明确判断原型来自哪里。对象 buddy 的原型来自构造函数（在这里是函数 Dog）的属性。

在 JavaScript 中，每个函数都有名为“prototype”的属性，用于引用原型对象。此原型对象又有名为“constructor”的属性，它反过来引用函数本身。这是一种循环引用，

每个 JavaScript 对象都继承一个原型链，而所有原型都终止于 Object.prototype。注意，迄今为止您看到的这种继承是活动对象之间的继承。它不同于继承的常见概念，后者是指在声明类时类之间的发生的继承。因此，JavaScript 继承动态性更强。它使用简单算法实现这一点，如下所示：当您尝试访问对象的属性/方法时，JavaScript 将检查该属性/方法是否是在该对象中定义的。如果不是，则检查对象的原型。如果还不是，则检查该对象的原型的原型，如此继续，一直检查到 Object.prototype。

3、在 JavaScript 中使用类

了解 prototype 和 JavaScript 之间的关系后，就可以将类似于其他语言中的类的用法引用到 JavaScript 中来。让我们看一个定义复数类(Complex)的代码。

var  Complex  =   function (real, img)  ... {
    this._real = real;
    this._img = img;
    
    this.get_real = function() ...{ return this._real; }
    this.set_real = function(value) ...{ this._real = value; }
    
    this.get_img = function() ...{ return this._img; }
    this.set_img = function(value) ...{ this._img = value; }
    
    this.toString = function() ...{ return this._real.toString() + this._img >= 0 ? "+" : "" + this._img.toString() + "i"; }
}

var  c  =   new  Complex( 1 ,  3 );
alert(c.toString());

代码第一行声明并初始化了一个“类”定义 Complex，它接受两个参数 real 和 img。第 2、3 行是将参数存储到类本地变量，有点类似于“构造函数”。由于 JavaScript 变量没有访问修饰符，所以通过加下划线区分它们的作用范围究竟是公共的还是私有的；第 6 到 10 行定义了属性 real 和 img，JavaScript 没有属性的概念，根据约定，您需要在属性定义的 get 构造和 set 构造的名称中加上 "get_" 和 "set_"。第 12 行定义了一个公共函数 toString。

为了更加符合 JavaScript 设计规范，我们将属性和方法的定义移到 Complex 的原型中。

var  Complex  =   function (real, img)  ... {
    this._real = real;
    this._img = img;
    
    this.prototype = (
        get_real: function() ...{ return this._real; },
        set_real: function(value) ...{ this._real = value; },
    
        get_img: function() ...{ return this._img; },
        set_img: function(value) ...{ this._img = value; },
    
        toString: function() ...{ return this._real.toString() + this._img >= 0 ? "+" : "" + this._img.toString() + "i"; }
    }
}

var  c  =   new  Complex( 1 ,  3 );
alert(c.toString());

这里的 prototype 是 JSON 表示法，也可以用传统的方法表示，但其效果是一致的。

JSON 表示法具备轻量级数据传输的天然优势，例如，在 ASP.NET AJAX 扩展中通过 JavaScript 调用服务器 Web Service 方法和服务器页面方法时不会使用 SOAP 和任何 XML，而是发送 Web Services 参数对象的 JSON 标记。

4、利用 ASP.NET AJAX 扩展使得编写 JavaScript 更加简单

ASP.NET AJAX 扩展 1.0 结合 Visual Studio Orcas 测试版 1 对于 JScript 脚本的智能感知功能，为开发人员更加快速的编写 JavaScript 脚本提供了可靠保障。ASP.NET AJAX 扩展对现有的 JavaScript 进行了一些扩展，使其更加容易使用。这些扩展包括：

1、对多种数据类型的扩展，如 Date, Number 等。例如可以直接获取先在时间得代码如下所示。

     var  d  =   new  Date();
    d  =  Date.now;

2、支持继承、枚举和接口。通过继承和接口使得 JavaScript 的面向对象概念更加完善，更加符合 .NET 设计规范和开发习惯。

3、支持 XML 文档注释。就像使用 C# 一样，无处不在的智能感知功能将帮助您自动完成代码。

4、在 Visual Studio Orcas 中支持代码引用和智能感知。

5、支持命名空间。

6、提供了完善的客户端 AJAX 脚本库，内置 XMLHttpRequest 对象、Web Services 代理等。

这些增强可以通过安装 Visual Studio Orcas Beta 1 版本和 ASP.NET AJAX 扩展来体验。ASP.NET AJAX 扩展已经包含在 .NET Framework 3.5 的可再发行组件包中(System.Web.Extension.dll)。您可以通过以下途径获取这些资源。

Visual Studio Orcas Beta 1: http://msdn.microsoft.com/vstudio/future/
ASP.NET AJAX Extensions: http://ajax.asp.net/
ASP.NET AJAX 文档: http://ajax.asp.net/docs

5、结论

通过 JavaScript 在客户端实现类似于其他语言中面向对象功能虽然与 AJAX 技术没有直接的联系，但它却是 AJAX 设计模式中非常重要的一部分。在后续的文章中，我们还将用到这些基础知识。掌握好这些基础知识，也为编写丰富客户端用户体验的 Web 2.0 应用程序打下了坚实的基础。