ajax javascript 的面向对象编程

最近在做一个基于web2.0的项目43day.com，突然发现js原来可以这样玩，越是了解越是爱不释手。虽然以前的项目中写过很多js，而且自认为水平了得，但一直都没有触及js的OOP。做的最多的也就是对DOM的操作。下面两个js框架对深入了解js有很大的帮助，如果能硬下头皮，最好是完全看一遍。^_^

jsvm一个国人自己写的js框架。非常实用。将很多常用的功能就集合成一个基础类库中，类似java的JDK。而且核心的思想也很高明，自定义了一种类似于java一样的语法，让js可以像java一样以面向对象的方式编写，然后通过虚拟机将这样的代码编译成原生的js代码。其实jsvm虚拟机就是一个语法替换的程序，完成自定义语法和原生语法之间的转换。

不要小看这简单的语法改变，在jsvm肩上可是聚拢整个javascript社区的重任啊，jsvm希望通过规范和标准，让js也可以像一些面向对象的语言一样，拥有非常丰富的可重用类库，而没有规范和标准这样的任务很难完成。

prototype是一个很强大的Javascript函数库，虽然没有jsvm那么远大的目标，但他们任务很现实，就是解决眼前的很多问题，提供一个强大的可重用的框架。

今天的主题是js的OOP，说着说着说远了，这两个框架下次在详细聊。现在开始以最实在的方式告诉你js的OOP。

首先来看三个概念，方法，变量，数组。在一般的语言里这三个是不同的东西，但在js中，他们是相同的东西，或者说浏览器会用同样的方式对待这三种代码。

举个例子：
<Script language="JavaScript">
var Woman = {};
Woman.face = "variable";
alert(Woman.face);
Woman = {face :function(){return "array"}};
alert(Woman.face());
Woman.face = function(){return "method"};
alert(Woman.face());
</Script>
这三种编写的方式都是有效的，而且你都可以通过，Woman.XXX的方式调用它们。当然方法后面需要有()。

在说一个概念prototype.JS可以让一个对象通过prototype属性覆盖另外一个对象的方法。当然也可以通过prototype声明新的方法。

看看下面的例子：
<Script language="JavaScript">
function Woman(){};
Woman.prototype.face = "prototype.variable";
Woman.prototype.face = function(){return "method"};
var aWoman = new Woman()
alert(aWoman.face());
</Script>
看出来这两种写法有什么不同了吗？对，第一种有点像java中的静态方法，不需要new就可以直接用。而第二种就像是public方法，必须new一个对象才可以通过对象来访问。可是有人会问，我就算我知道这些有什么用呢，好吧，给大家些鼓励，看看用OOP方式写出来的JS是否更优雅一些。

好了，看例子：

<div id="title">试试改这里的文字</div>
<Script language="JavaScript">
<!---
Editable = function(_eid){
this._name = _eid;
this._e = document.getElementById(_eid);
this._e.onclick = this._click();

}
Editable.prototype.click = function(){
var input = document.createElement("input");
input.type = "text";
input.id = this._name + "input";
input.value= this._e.innerHTML;
input.size = "50";
input.onblur = this._save();
this._e.innerHTML = "";
this._e.onclick = '';
this._e.appendChild(input);
}
Editable.prototype._click = function(){
var _this = this;
return function(){
_this.click();
}
}
Editable.prototype._save = function(){
var _this = this;
return function(){
_this.save();
}
}
Editable.prototype.save = function(){
var input = document.getElementById(this._name + "input");
this._e.innerHTML = input.value;
this._e.onclick = this._click();
}
var e = new Editable('title');
//--->
</Script>

最后说一下，对于JS的引擎，它在处理一个对象的属性和方法时，首先会在对象本身的实例(this)中查找，如果找到就返回或执行。如果没有查找到，就查找对象的prototype里是否定义了被查找的对象和方法，如果找到就返回或执行，如果没有查找到，就返回undefined(对于属性)或runtime error(对于方法)。理解了这个原则能帮助你更好的去编码OOP的JS。

我想OOP的JS应该就是这样的。

下次分析一下JS的访问控制。

Good Luck～