用实例把OO的JavaScript说明白

最近负责视图模块的开发工作，所以一直在构思，贴点JS的东西出来，用比较简单的例子，来说明JS中的面向对象问题。

 

首先在js中的继承是Prototype-based 。不像一般的oo语言，比如java,c++是Class-based 的。

我们来比较一下这两种方式 :

1 在Class-based 中的类和实例是不同的实体，而在Prototype-based中所有对象都是实例。

2 在Class-based中定义一个类使用class关键字来定义。实例化一个对象，使用构造方法。而在Prototype-based，定义和创建一个对象都使用构造器函数。

3 在Class-based中构造一个继承，需要定义一个类，然后作为存在的类的子类。而在Prototype-based中，则是需要标记这个对象作为构造器函数的prototype 。

4 在Class-based中继承属性通过class chain。而在Prototype-based则是通过prototype chain。

下面，就用一个简单而明了例子的来说明一下：

1.一个颇为精简的例子

//定义Circle类

function Circle(radius) {     

    this.r = radius;

}

Circle.PI = 3.14159;

Circle.prototype.area = function( ) {

return Circle.PI * this.r * this.r;

}

//使用Circle类

var c = new Circle(1.0);  

alert(c.area()); 

 

需要理解三个关键字：
第一个是function，JS世界里类的定义用"function"，里面的内容是构造函数的内容；

第二个是this指针，代表调用这个函数的对象；

第三个是prototype，用它来定义成员函数，比较规范和保险；
另外还可以写成这样：
  function compute_area(){

return Circle.PI * this.r * this.r;

}
Circle.prototype.area=compute_area;

2.继承

//定义

Function ChildCircle(radius){     

  //调用父类构造函数 

this.base=Circle;    

  this.base(radius);

}

ChildCircle.prototype=new Circle(0); 

function Circle_max(a,b){   

  if (a.r > b.r) return a;   

 else return b;

}

ChildCircle.max = Circle_max;

//使用

var d = new ChildCircle(2);  

var bigger = d.max(c,d);

alert(bigger.area());

注意两点
1.定义继承关系 ChildCircle.prototype=new Circle(0); 其中0是占位用的
2.调用父类构造函数
     this.base=Circle;
     this.base(radius);

3.var式定义
JS还支持一种var Circle={raidus:1.0,PI:3.1415}的形式,就如CSS的定义
因此Circle还可以定义为

var newCircle={

r:1.0, PI:3.1415, area: function(){

return this.PI * this.r * this.r;

}

};

alert(newCircle.area());