JavaScript 面向对象编程 （一）

　　有很多程序员在刚开始接触JavaScript时会被它的对象模型弄得摸不着头脑，怎样定义“类”？怎样继承？this 指向的到底是哪？有这些疑问是因为多数人学习编程时都从基于类的对象模型语言开始的，如Java和C++这样的言，而JavaScript是一种的基于原型模型的语言它是没有类的，所以当我们以类模型去理解它时就会产生混乱，而加之它的高阶函数、动态类型的概念已经完全以前所学的不同了，但JavaScript正因为有这些特性才使得它更有灵活性，更有魅力。下面我就来介绍一下在JavaScript中怎样进行面向对象编程。

1、高阶函数

　　这个大多数人都是很熟悉的只是叫法可能有些不同，还是先看代码吧。
代码 1-1:

function A(){ alert('A'); } B=function(){ alert('B'); } A(); B(); var tmp = A; A=B; B=tmp; A(); B();

　　代码的运行结果是弹出四个消息框按顺序为别是 A B B A。这段代码说明函数可以像变量一样进行处理，如将函数赋值给一个变量，或将函数做为参数传递，这就是高阶函数特性，再来看一个例子。

代码 1-2:

function A(){ alert('A'); } B=function(){ return A }(); B();

　　代码1-2 的运行结果是弹出一个消息框内容是A。其中 B=function(){return A}();最后的括号表示执行函数function(){return A}。

2、动态类型

2.1 延迟绑定，为对象添加属性

　　通过延迟绑定技术来为对象添加属性。
　　C++语言只能静态的定义一个类的成员，它的好处是编译器可以在编译其间检查出错误的调用或类型。而JavaScript 可以在任何时间为一个对象添加成员变量，变量的类型可以是任意的，这为该言带来了强大的灵活性，但这也是有代价的，这就是编译器无法找到变量类型或引用上的错误。代码2-1将演示如何为一个对象添加一个成员变量。

代码 2-1:

var arr = new Array(); alert(arr.ObjName); arr.ObjName ='Array'; alert(arr.ObjName); 
 
　　代码第一行创建了一个 Array对象，学习过JavaScript的人知道，Array对象是没有ObjName属性的，所以第二行的 alert(arr.ObjName)，会弹出一个消息框，内容是"undefined"，在第三行 代码arr.ObjName='Array';为对象arr动态的添加了一个ObjName属性（或叫它成员变量）并赋值为字符串'Array'，所以第四行的 alert(arr.ObjName)，会弹出一个消息框，内容是"Array"。像这种在实例化对象之后为一个对象添加属性的方法被称为“延迟绑定”。还不止这些，你还可以动态名指定对象的属性名。

代码 2-2：

var arr = new Array(); alert(arr.ObjName); var attribName ='ObjName'; arr[attribName] ='Array'; alert(arr.ObjName);

　　由代码2-2可以看出，一个对象的属性或方法可以用类似数组的方式进行访问，这使我们可以进行对象属性的复制或合并操作，例如迭代一个对象的所有属性可以用这样的方式进行：

代码 2-3：
var arr = new Array(); var attriblist=''; arr.ObjName1 ='Array'; arr.ObjName2 ='Array'; for(var m in arr){ attriblist+=(m+' '); } alert (attriblist);

　　上面的代码会显示出为arr对象新添加的两个属性的名字，但Array对象的原有属性是不会被列在其中，这可能是因为这些属性是固有的原因吧。

2.2 为对象添加方法

　　还记得第一章节的高阶函数吗？函数可以像变量一样操控，那么即然能为对象添加属性也同样能添加方法。代码 2-4中动态地为对象arr添加了一个方法，然后调用该方法，最终显示出一个消息框内容"Array"。

代码 2-4：
var arr = new Array(); arr.fun=function(){ alert('Array'); }; arr.fun();

3、初始化对象

 　　到目前为止我们都是用 new 语句来创建的对象，JavaScript还有一种方法来创建一个对象，它常被用来初始化一个对象变量。

代码 3-1:
var obj={ a:'a', b:function(){ alert ('b'); } } obj.c='c'; alert(obj.a); obj.b(); alert(obj.c);

 　　代码3-1 创建一个对象obj，它拥有一个字符串属性 a 和一个方法 b 。在javaScript中你可以用一对"{}" 来立即创建一个对象，大两个大括号中间的对象成员之间要用逗号分隔，你也可以在两个大括号之间什么也不写这样就会创建一个没有任何属性的对象。你可以理解为用{}创建一个“匿名”的对象，然后将该对象赋值给一个变量，请考虑下面的代码，它的执行结果与代码 3-1相同。

代码 3-2：
function CreateObj() { return { a:'a', b:function(){ alert ('b'); } } } var obj=CreateObj(); obj.c='c'; alert(obj.a); obj.b(); alert(obj.c);

4、this对象

　　这是一个非常得要的概念，你一定要了解它，有很多程序员补它搞疲惫不堪，因为他们经常以为this该引用某个对象但运行程序后即发现不是这样，最后不得不重新设计程序的结构。this对象是用来获取当前对象的，如果它被放在函数外或当前函数上下文不对象存在则它返回的是window 对象。

代码 4-1：
 var obj ={ myName:'obj' }; var myfun = function(){ alert(this.myName); } this.myName ='window'; obj.fn = myfun; alert(this.myName); myfun(); obj.fn();

　　代码4-1弹出的三个消息框分别是 'window' 'window' 'obj'。

　　第1行 初始化了一个对象 obj，它有一个myName 属性。

　　第4行 创建了一个函数 myfun。

　　第7行 this 在使用在函数外的全局空间内，它引用的是window 对象。

　　第10行 调用 myfun 函数，因为调用myfun并不属于一个对象，所以它的上下文为空，因些this引用的是window 对象。

　　第11行 调用 obj.fn() 时当前上下文是obj对象，所以this 引用的是 obj对象。

　　我们在来看一个较为复杂的上下文环境：

this.myName ='window'; var myfun = function(){ alert(this.myName); } obj = { myName:'obj', note:this.myName } obj.myfun = function(){ myfun(); } alert(this.myName); myfun(); obj.myfun();
　　代码 4-2 的输出结果为弹出三个消息框，内容均为'window'，代码 5~8行创建了一个对象o,它有两个属性分别是myName和note。其中第7行的this引用的是myfun所属的对象而不是对象o，这点有很多刚才使接触JavaScript对象编程的人会弄混淆。
　　第9~11行为对象obj创建了一个myfun函数，在该函数中调用了全局函数myfun。在JavaScript中如果想在一个对象的方法中引用该对象的其它成员必需要用this（或用这个对象的实例变量),不能象java或c++那样直接写成员函数名。
　　第14行调用obj对象的方法myfun，该函数内部又调用全局myfun方法，因为全局myfun方法不属对任何对象，所以this引用的是window对象，因此消息框的内容为 window。

　　我们已经学习了高阶函数，动态类型及怎样初始化一个对象，现在我们可以向JavaScript的对象模型进军了，学习怎样创那建“类”，初始化“类”等等。

Michael.Ge 2011.1.30