面向对象的 Javascript

面向对象编程思想在提出之后，很快就流行起来了，它将开发人员从冗长，繁复，难以调试的过程式程序中解放了出来，过程式语 言如 C ，代码的形式往往如此：

C代码

Component comp;  
init_component(& comp, props);  

而面向对象的语言如 Java ，则会是这种形式：

Component comp;  
comp.init(props);  

可以看出，方法是对象的方法，对象是方法的对象，这样的代码形式更接近人的思维方式，因此 OO 大行其道也并非侥幸。

JavaScript 本身是基于对象 的，而并非基于类。但是， JavaScript 的函数式语言的特性使得它本身是可编程 的，它可以变成你想要的任何形式。我们在这一章详细讨论如何使用 JavaScript 进行 OO 风格的代码开发。

原型继承

JavaScript 中的继承可以通过原型链来实现，调用对象上的一个方法，由于方法在 JavaScript 对象中是对另一个函数对象的引用，因此解释器会在对象中查找该属性，如果没有找到，则在其内部对象 prototype 对象上搜索，由于 prototype 对象与对象本身的结构是一样的，因此这个过程会一直回溯到发现该属性，则调用该属性，否则，报告一个错误。关于原型继承，我们不妨看一个小例 子：

function Base(){  
    this .baseFunc = function (){  
       print ( "base behavior" );  
    }  
}  

function Middle(){  
    this .middleFunc = function (){  
       print ( "middle behavior" );  
    }  
}  

Middle. prototype = new Base();  

function Final(){  
    this .finalFunc = function (){  
       print ( "final behavior" );  
    }  
}  
Final. prototype = new Middle();  

function test(){  
    var obj = new Final();  
    obj.baseFunc();  
    obj.middleFunc();  
    obj.finalFunc();  
}

图 原型链的示意图

在 function test 中，我们 new 了一个 Final 对象，然后依次调用 obj.baseFunc ，由于 obj 对象上并无此方法，则按照上边提到的规则，进行回溯，在其原型链上搜索，由于 Final 的原型链上包含 Middle ，而 Middle 上又包含 Base ，因此会执行这个方法，这样就实现了类的继承。

base behavior
middle behavior
final behavior

但是这种继承形式与传统的 OO 语言大相径庭，初学者很难适应，我们后边的章节会涉及到一个比较好的 JavaScript 的面向对象基础包 Base ，使用 Base 包，虽然编码风格上会和传统的 OO 语言不同，但是读者很快就会发现这种风格的好处。

引用

引用是一个比较有意思的主题，跟其他的语言不同的是， JavaScript 中的引用始终指向最终的对象，而并非引用本身，我们来看一个例子：

<strong>var obj = {}; // 空对象  
var ref = obj; // 引用  

obj. name = "objectA" ;  
print ( ref . name ); //ref 跟着添加了 name 属性  

obj = [ "one" , "two" , "three" ]; //obj 指向了另一个对象 ( 数组对象 )  
print ( ref . name ); //ref 还指向原来的对象  
print (obj. length ); //3  
print ( ref . length ); //undefined</strong>  

运行结果如下：

objectA
objectA
3
undefined

obj 只是对一个匿名对象的引用，所以， ref 并非指向它，当 obj 指向另一个数组对象时 可以看到，引用 ref 并未改变，而始终指向这那个后来添加了 name 属性的 " 空 " 对象 ”{}” 。理解这一点对后边的内容有很大的帮助。

再看这个例子：

<strong>var obj = {}; // 新建一个对象，并被 obj 引用  

var ref1 = obj; //ref1 引用 obj, 事实上是引用 obj 引用的空对象  
var ref2 = obj;  

obj.func = "function" ;  

print (ref1.func);  
print (ref2.func);</strong>  

声明一个对象，然后用两个引用来引用这个对象，然后修改原始的对象，注意这两步的顺序，运行之：

function
function

根据运行结果我们可以看出，在定义了引用之后，修改原始的那个对象会影响到其引用上，这一点也应该注意。

new 操作符

有面向对象编程的基础有时会成为一种负担，比如看到 new 的时候， Java 程序员可能会认为这将会调用一个类的构造器构造一个新的对象出来，我们来看一个例子：

function Shape(type){  
    this .type = type || "rect" ;  
    this .calc = function (){  
       return "calc, " + this .type;  
    }  
}  

var triangle = new Shape( "triangle" );  
print (triangle.calc());  

var circle = new Shape( "circle" );  
print (circle.calc()); 

运行结果如下：

calc, triangle
calc, circle

Java 程序员可能会觉得 Shape 就是一个类，然后 triangle ， circle 即是 Shape 对应的具体对象，而其实 JavaScript 并非如此工作的，罪魁祸首即为此 new 操作符。在 JavaScript 中，通过 new 操作符来作用与一个函数，实质上会发生这样的动作：

首先，创建一个空对象，然后用函数的 apply 方法，将这个空对象传入作为 apply 的第一个参数，及上下文参数。这样函数内部的 this 将会被这个空的对象所替代：

var triangle = new Shape( "triangle" );  
// 上一句相当于下面的代码  
var triangle = {};  
Shape.apply(triangle, [ "triangle" ]);

封装

事实上，我们可以通过 JavaScript 的函数实现封装，封装的好处在于未经授权的客户代码无法访问到我们不公开的数据，我们来看这个例子：

function Person(name){  
    //private variable  
    var address = "The Earth" ;  

    //public method  
    this .getAddress = function (){  
       return address;  
    }  

    //public variable  
    this .name = name;  
}  

//public  
Person.prototype.getName = function (){  
    return this .name;  
}  

//public  
Person.prototype.setName = function (name){  
    this .name = name;  
} 

首先声明一个函数，作为模板，用面向对象的术语来讲，就是一个类 。用 var 方式声明的变量仅在类内部可见，所以 address 为一个私有成员，访问 address 的唯一方法是通过我们向外暴露的 getAddress 方法，而 get/setName ，均为原型链上的方法，因此为公开的。我们可以做个测试：

var jack = new Person( "jack" );  
print(jack.name);//jack  
print(jack.getName());//jack  
print(jack.address);//undefined  
print(jack.getAddress());//The Earth

直接通过 jack.address 来访问 address 变量会得到 undefined 。我们只能通过 jack.getAddress 来访问。这样， address 这个成员就被封装起来了。 另外需要注意的一点是，我们可以为类添加静态成员，这个过程也很简单，只需要为函数对象添加一个 属性即可。比如：

function Person(name){  
    //private variable  
    var address = "The Earth" ;  

    //public method  
    this .getAddress = function (){  
       return address;  
    }  

    //public variable  
    this .name = name;  
}  

Person.TAG = "javascript-core" ;// 静态变量  

print(Person.TAG);

也就是说，我们在访问 Person.TAG 时， 不需要实例化 Person 类。这与 传统的面向对象语言如 Java 中的静态变量是一致的。

工具包 Base

Base 是由 Dean Edwards 开发的一个 JavaScript 的 面向对象的基础包， Base 本身很小，只有 140 行，但是这个很小的包对面向对象编程风格有很好的支持，支持类的定义，封装，继承，子类调用 父类的方法等，代码的质量也很高，而且很多项目都在使用 Base 作为底 层的支持。尽管如此， JavaScript 的面向对象风格依然非常古 怪，并不可以完全和传统的 OO 语言对等起来。

下面我们来看几个基于 Base 的例子， 假设我们现在在开发一个任务系统，我们需要抽象出一个类来表示任务，对应的，每个任务都可能会有一个监听器，当任务执行之后，需要通知监听器。我们首先定 义一个事件监听器的类，然后定义一个任务类：

var EventListener = Base.extend({  
    constructor : function(sense){  
       this.sense = sense;  
    },  
    sense : null,  
    handle : function(){  
       print(this.sense+" occured");  
    }  
});  

var Task = Base.extend({  
    constructor : function(name){  
       this.name = name;  
    },  
    name : null,  
    listener : null,  
    execute : function(){  
       print(this.name);  
       this.listener.handle();  
    },  
    setListener : function(listener){  
       this.listener = listener;  
    }  
});

创建类的方式很简单，需要给 Base.extend 方 法传入一个 JSON 对象，其中可以有成员和方法。方法访问自身的成员时 需要加 this 关键字。而每一个类都会有一个 constructor 的方法，即构造方法。比如事件监听器类 (EventListener) 的构造器需要传入一个字符串，而任务类 (Task) 也需要传入任务的名字来进行构造。好了，既然我们已经有了任务类和事件监听器类，我们 来实例化它们：

var printing = new Task("printing");  
var printEventListener = new EventListener("printing");  
printing.setListener(printEventListener);  
printing.execute();

首先，创建一个新的 Task ， 做打印工作，然后新建一个事件监听器，并将它注册在新建的任务上，这样，当打印发生时，会通知监听器，监听器会做出相应的判断：

printing
printing occurred

既然有了基本的框架，我们就来使用这个框架，假设我们要从 HTTP 服务器上下载一个页面，于是我们设计了一个新的任务类型，叫做 HttpRequester ：

var HttpRequester = Task.extend({  
    constructor : function(name, host, port){  
       this.base(name);  
       this.host = host;  
       this.port = port;  
    },  
    host : "127.0.0.1",  
    port : 9527,  
    execute : function(){  
       print("["+this.name+"] request send to "+this.host+" of port "+this.port);  
       this.listener.handle();  
    }  
});

HttpRequester 类继承了 Task ，并且重载了 Task 类 的 execute 方法， setListener 方法的内容与父类一致，因此不需要重载。

var requester = new HttpRequester("requester1", "127.0.0.1", 8752);  
var listener = new EventListener("http_request");  
requester.setListener(listener);  
requester.execute();

我们新建一个 HttpRequester 任 务，然后注册上事件监听器，并执行之：

[requester1] request send to 127.0.0.1 of port 8752
http_request occured

应该注意到 HttpRequester 类 的构造器中，有这样一个语句：

this.base(name);

表示执行父类的构造器，即将 name 赋 值给父类的成员变量 name ，这样在 HttpRequester 的实例中，我们就可以通过 this.name 来访问这个成员了。这套机制简直与在其他传统的 OO 语言并无二致。同时， HttpRequester 类 的 execute 方法覆盖了父类的 execute 方法，用面向对象的术语来讲，叫做重载。 在很多应用中，有些对象不会每次都创建新的实例，而是使用一个固有的实例，比如提供数据源的服务，报表渲染引擎，事件分发 器等，每次都实例化一个会有很大的开销，因此人们设计出了单例模式，整个应用的生命周期中，始终只有顶多一个实例存在。 Base 同样可以模拟出这样的能力：

var ReportEngine = Base.extend({  
    constructor : null,  
    run : function(){  
       //render the report  
    }    
});

实例：事件分发器

这一节，我们通过学习一个面向对象的实例来对 JavaScript 的面向对象进行更深入的理解，这个例子不能太复杂，涉及到的内容也不能仅仅为继承，多态等概念，如果那样，会失去阅读的乐趣，最好是在实例中穿插一些讲解，则可以得到最好的效果。

本节要分析的实例为一个事件分发器(Event Dispatcher)，本身来自于一个实际项目，但同时又比较小巧，我对其代码做了部分修改，去掉了一些业务相关的部分。

事件分发器通常是跟UI联系在一起的，UI中有多个组件，它们之间经常需要互相通信，当UI比较复杂，而页面元素的组织又不够清晰的时候，事件的处理会非常麻烦。在本节的例子中，事件分发器为一个对象，UI组件发出事件到事件分发器，也可以注册自己到分发器，当自己关心的事件到达时，进行响应。如果你熟悉设计模式的话，会很快想到观察者模式，例子中的事件分发器正式使用了此模式。

var uikit = uikit || {};  
uikit.event = uikit.event || {};  

uikit.event.EventTypes = {  
    EVENT_NONE : 0,  
    EVENT_INDEX_CHANGE : 1,  
    EVENT_LIST_DATA_READY : 2,  
    EVENT_GRID_DATA_READY : 3  
};

定义一个名称空间 uikit，并声明一个静态的常量：EventTypes，此变量定义了目前系统所支持的事件类型。

uikit.event.JSEvent = Base.extend({  
    constructor : function(obj){  
       this.type = obj.type || uikit.event.EventTypes.EVENT_NONE;  
       this.object = obj.data || {};  
    },  

    getType : function(){  
       return this.type;  
    },  

    getObject : function(){  
       return this.object;  
    }  
});  

定义事件类，事件包括类型和事件中包含的数据，通常为事件发生的点上的一些信息，比如点击一个表格的某个单元格，可能需要将该单元格所在的行号和列号包装进事件的数据。

uikit.event.JSEventListener = Base.extend({  
    constructor : function(listener){  
       this.sense = listener.sense;  
       this.handle = listener.handle || function(event){};  
    },  

    getSense : function(){  
       return this.sense;  
    }  
});  

定义事件监听器类，事件监听器包含两个属性，及监听器所关心的事件类型 sense 和当该类型的事件发生后要做的动作 handle。

uikit.event.JSEventDispatcher = function(){  
    if(uikit.event.JSEventDispatcher.singlton){  
       return uikit.event.JSEventDispatcher.singlton;  
    }  

    this.listeners = {};  

    uikit.event.JSEventDispatcher.singlton = this;  

    this.post = function(event){  
       var handlers = this.listeners[event.getType()];  
       for(var index in handlers){  
           if(handlers[index].handle && typeof handlers[index].handle == "function")  
           handlers[index].handle(event);  
       }  
    };  

    this.addEventListener = function(listener){  
       var item = listener.getSense();  
       var listeners = this.listeners[item];  
       if(listeners){  
           this.listeners[item].push(listener);  
       }else{  
           var hList = new Array();  
           hList.push(listener);  
           this.listeners[item] = hList;    
       }  
    };  
}  

uikit.event.JSEventDispatcher.getInstance = function(){  
    return new uikit.event.JSEventDispatcher();    
};  

这里定义了一个单例的事件分发器，同一个系统中的任何组件都可以向此实例注册自己，或者发送事件到此实例。事件分发器事实上需要为何这样一个数据结构：

var listeners = {  
    eventType.foo : [  
       {sense : "eventType.foo", handle : function(){doSomething();}}  
       {sense : "eventType.foo", handle : function(){doSomething();}}  
       {sense : "eventType.foo", handle : function(){doSomething();}}  
    ],  
    eventType.bar : [  
       {sense : "eventType.bar", handle : function(){doSomething();}}  
       {sense : "eventType.bar", handle : function(){doSomething();}}  
       {sense : "eventType.bar", handle : function(){doSomething();}}  
    ],..  
}; 

当事件发生之后，分发器会找到该事件处理器的数组，然后依次调用监听器的 handle 方法进行相应。好了，到此为止，我们已经有了事件分发器的基本框架了，下来，我们开始实现我们的组件(Component)。

组件要通信，则需要加入事件支持，因此可以抽取出一个类：

uikit.component = uikit.component || {};  

uikit.component.EventSupport = Base.extend({  
  constructor : function(){  

  },  

  raiseEvent : function(eventdef){  
       var e = new uikit.event.JSEvent(eventdef);  
       uikit.event.JSEventDispatcher.getInstance().post(e);      
  },  

  addActionListener : function(listenerdef){  
       var l = new uikit.event.JSEventListener(listenerdef);  
       uikit.event.JSEventDispatcher.getInstance().addEventListener(l);  
  }  
});  

继承了这个类的类具有事件支持的能力，可以 raise 事件，也可以注册监听器，这个 EventSupport 仅仅做了一个代理，将实际的工作代理到事件分发器上。

uikit.component.ComponentBase = uikit.component.EventSupport.extend({  
  constructor: function(canvas) {  
       this.canvas = canvas;  
  },  

  render : function(datamodel){}  
});  

定义所有的组件的基类，一般而言，组件需要有一个画布(canvas)的属性，而且组件需要有展现自己的能力，因此需要实现 render 方法来画出自己来。

我们来看一个继承了 ComponentBase 的类 JSList：

uikit.component.JSList = uikit.component.ComponentBase.extend({  
    constructor : function(canvas, datamodel){  
       this.base(canvas);  
       this.render(datamodel);  
    },  

    render : function(datamodel){  
       var jqo = $(this.canvas);  
       var text = "";  
       for(var p in datamodel.items){  
           text += datamodel.items[p] + ";";  
       }  
       var item = $("<div></div>").addClass("component");  
       item.text(text);  
       item.click(function(){  
           jqo.find("div.selected").removeClass("selected");  
           $(this).addClass("selected");  

           var idx = jqo.find("div").index($(".selected")[0]);  
           var c = new uikit.component.ComponentBase(null);  
           c.raiseEvent({  
              type : uikit.event.EventTypes.EVENT_INDEX_CHANGE,  
              data : {index : idx}  
           });  
       });  

       jqo.append(item);  
    },  

    update : function(event){  
       var jqo = $(this.canvas);  
       jqo.empty();  
       var dm = event.getObject().items;  

       for(var i = 0; i < dm.length();i++){  
           var entity = dm.get(i).item;  
           jqo.append(this.createItem({items : entity}));  
       }  
    },  

    createItem : function(datamodel){  
       var jqo = $(this.canvas);  
       var text = datamodel.items;  

       var item = $("<div></div>").addClass("component");  
       item.text(text);  
       item.click(function(){  
           jqo.find("div.selected").removeClass("selected");  
           $(this).addClass("selected");  

           var idx = jqo.find("div").index($(".selected")[0]);  
           var c = new uikit.component.ComponentBase(null);  
           c.raiseEvent({  
              type : uikit.event.EventTypes.EVENT_INDEX_CHANGE,  
              data : {index : idx}  
           });  
       });  

       return item;  
    },  

    getSelectedItemIndex : function(){  
       var jqo = $(this.canvas);  
       var index = jqo.find("div").index($(".selected")[0]);  
       return index;  
    }  
});  

首先，我们的画布其实是一个共 jQuery 选择的选择器，选择到这个画布之后，通过jQuery则可以比较容易的在画布上绘制组件。

在我们的实现中，数据与视图是分离的，我们通过定义这样的数据结构：

{items : ["China", "Canada", "U.S.A", "U.K", "Uruguay"]};  

则可以 render 出如下图所示的 List：

好，既然组件模型已经有了，事件分发器的框架也有了，相信你已经迫不及待的想要看看这些代码可以干点什么了吧，再耐心一下，我们还要写一点代码：

$(document).ready(function(){  
    var ldmap = new uikit.component.ArrayLike(dataModel);  

    ldmap.addActionListener({  
       sense : uikit.event.EventTypes.EVENT_INDEX_CHANGE,  
       handle : function(event){  
           var idx = event.getObject().index;  
           uikit.component.EventGenerator.raiseEvent({  
              type : uikit.event.EventTypes.EVENT_GRID_DATA_READY,  
              data : {rows : ldmap.get(idx).grid}  
           });  
       }  
    });  

    var list = new uikit.component.JSList("div#componentList", []);  
    var grid = new uikit.component.JSGrid("div#conditionsTable table tbody");  

    list.addActionListener({  
        sense :  uikit.event.EventTypes.EVENT_LIST_DATA_READY,  
        handle : function(event){  
            list.update(event);  
        }  
    });  

    grid.addActionListener({  
       sense : uikit.event.EventTypes.EVENT_GRID_DATA_READY,  
       handle : function(event){  
           grid.update(event);  
       }  
    });  

    uikit.component.EventGenerator.raiseEvent({  
       type : uikit.event.EventTypes.EVENT_LIST_DATA_READY,  
       data : {items : ldmap}  
    });  

    var colorPanel = new uikit.component.Panel("div#colorPanel");  
    colorPanel.addActionListener({  
       sense : uikit.event.EventTypes.EVENT_INDEX_CHANGE,  
       handle : function(event){  
           var idx = parseInt(10*Math.random())  
           colorPanel.update(idx);  
       }  
    });  
});  

使用 jQuery，我们在文档加载完毕之后，新建了两个对象 List 和 Grid，通过点击 List 上的条目，如果这些条目在 List 的模型上索引发生变化，则会发出 EVENT_INDEX_CHAGE 事件，接收到这个事件的组件或者 DataModel 会做出相应的响应。在本例中，ldmap 在接收到 EVENT_INDEX_CHANGE 事件后，会组织数据，并发出 EVENT_GRID_DATA_READY 事件，而 Grid 接收到这个事件后，根据事件对象上绑定的数据模型来更新自己的 UI。 上例中的类继承关系如下图：

图 事件分发器类层次

应该注意的是，在绑定完监听器之后，我们手动的触发了EVENT_LIST_DATA_READY事件，来通知List可以绘制自身了：

uikit.component.EventGenerator.raiseEvent({  
   type : uikit.event.EventTypes.EVENT_LIST_DATA_READY,  
   data : {items : ldmap}  
});  

在实际的应用中，这个事件可能是用户在页面上点击一个按钮，或者一个 Ajax 请求的返回，等等，一旦事件监听器注册完毕，程序就已经就绪，等待异步事件并响应。

点击 List 中的元素 China，Grid 中的数据发生变化

点击 Canada，Grid 中的数据同样发生相应的变化：

由于 List 和 Grid 的数据是关联在一起的，他们的数据结构具有下列的结构：

var dataModel = [{  
    item: "China",  
    grid: [  
        [{  
            dname: "Beijing",  
            type: "string"  
        },  
        {  
            dname: "ProductA",  
            type: "string"  
        },  
        {  
            dname: 1000,  
            type: "number"  
        }],  
        [{  
            dname: "ShangHai",  
            type: "string"  
        },  
        {  
            dname: "ProductB",  
            type: "string"  
        },  
        {  
            dname: 23451,  
            type: "number"  
        }],  
        [{  
            dname: "GuangZhou",  
            type: "string"  
        },  
        {  
            dname: "ProductB",  
            type: "string"  
        },  
        {  
            dname: 87652,  
            type: "number"  
        }]  
    ]  
},...  
];

一个组件可以发出多种事件，同时也可以监听多种事件，所以我们可以为 List 的下标改变事件注册另一个监听器，监听器为一个简单组件 Panel，当接收到这个事件后，该 Panel 会根据一个随机的颜色来重置自身的背景色(注意在 List 和 Grid 下面的灰色 Panel)：