JavaScript中的面向对象的讨论(转)
前言
今天,WEB2.0时代的到来,给了JavaScript又一次大展身手的机会。Web2.0借助JavaScript技术,使得客户端的Web体验更加丰富多彩,同时JavaScript面对的问题域也变得错综复杂起来,JavaScript代码也随着Web页面的多样化和功能的丰富而快速膨胀。以前的过程式的JavaScript开发方法已经不能适应Web2.0的开发需求,需要一种更先进的设计方法来指导JavaScript的开发,这就是这里我们要讨论的面向对象。
面向对象概念的提出,是软件开发工程发展的一次革命,有了面向对象,很多复杂的大型应用程序的开发可以简化。可以说,有了面向对象,我们手里才得到了一把真正的利刃,可以得心应手的处理复杂而又规模庞大的问题域。
面向对象的三个基本特征是:
- 封装-把自己的数据和方法封装在对象内部,并让私有的数据和方法在对象外部不可见,而共有的数据和方法在对象外部可见。
- 继承-在无需重新修改原来对象的前提下,让另一个对象获得原对象的属性和方法的能力
- 多态-子类可以定义与父类具有相同signature的方法。
因此我们就这三个基本特征展开JavaScript面向对象的讨论。
基本概念
JavaScript语言对对象提供了天然支持。数组(Array)是对象,函数(function)是对象。但是JavaScript不是一种真正意义上的面向对象语言。这是因为JavaScript并不具备完整的面向对象三个基本特征。
在正式开始讨论之前,首先要对JavaScript的类,成员变量,成员函数,类变量,类方法这几个概念进行说明。
Ÿ 类
JavaScript中并没有类的概念,也就是说,JavaScript中并没有语法支持“类”。因此,JavaScript中的类其实都是使用function来模拟的。
类的定义:
1 function Circle(r){ 2 this.r = r; 3 }
类的实例化:var circle = new Circle(3);
Ÿ 成员变量
成员变量可以通过多种方式定义:
构造器中: this.r = r;
对象:circle.name="my circle";
Ÿ 成员函数
成员函数也可以通过多种方式定义:
构造器中:
1 function Circle(r){ 2 this.r = r; 3 function sqr(){ 4 return r*r; 5 } 6 }
prototype:
1 Circle.prototype.getName=function(){ 2 return this.name; 3 }
Ÿ 类变量
类变量是属于类的变量。就像java里用static声明的变量,可以直接用类就可以访问。由于类变量是属于类的,因此所有这个类的实例也可以访问这个变量。因此,任何实例都不应该修改类变量(JavaScript中没有类似java的final关键字使类变量不可变)。类变量与通过prototype定义的变量的功能类似,但是他们的访问方式不同。
访问prototype变量:Circle.prototype.PI=3.14;
访问类变量:Circle.PI=3.14;
//使用prototype里的变量
1 Circle.prototype.area1 = function(){ 2 return this.PI*this.r*this.r; 3 }
//使用类变量
1 Circle.prototype.area2 = function(){ 2 return Circle.PI*this.r*this.r; 3 }
Ÿ 类方法
类方法是直接在类上定义的方法。注意,在类方法中不能使用this关键字,就像是在java的static方法中,不能使用this一样。
Circle.max = function(a,b){ return a.r>b.r?a:b; } var maxCircle = Circle.max(new Circle(1),new Circle(2));
面向对象的三个基本特性
在有了上面的知识以后,下面就开始依据面向对象三个基本特征,对JavaScript的面向对象特性进行讨论。
1. 封装
JavaScript中,所有元素都可以认为是对象。这就是JavaScript对对象的天然支持。在JavaScript的对象里,还可以定义方法(function),数据变量(var)。这样,JavaScript对象可以把数据和方法封装在对象内部。
JavaScript是如何实现对象数据的访问控制的呢?JavaScript跟别的面向对象语言一样,也是通过function和变量的不同的声明方式而实现访问控制的。
Ÿ 公有成员
对象的成员都是公有成员,任何函数都可以访问,修改或删除这些成员。有两种主要途径给对象添加公有成员:
Ø 构造器:
构造器中,使用this变量来向对象添加成员。注意,这里只是用this变量添加了属性成员。用this变量添加的function成员,而特权成员(见下文解释)而不是公有成员。
1 function Container(param){ 2 this.member = param; 3 }
Ø 原型:
使用prototype添加成员是很常用的一种给对象添加公共成员的方式:
1 Container.prototype.stamp = function(string){ 2 return this.member+string; 3 }
Ÿ 私有成员
私有成员要由构造器生成。构造器的参数,以及其中通过var声明成员都是私有成员。私有成员是无法被公有成员访问的。但是公有成员可以通过一些技巧来访问私有成员。例如,
1 function Container(param){ 2 function dec(){ 3 if(secret>0){ 4 secret-=1; 5 return true; 6 }else{ 7 return false; 8 } 9 }
this.member = param;
var secret = 3;
var self = this; 10 }
在上面的代码例子中,有三个私有成员:param,secret,self。它们在对象内部,并且在对象外部不能访问这三个成员,同时也不能被对象的公有方法访问。他们只对私有成员可见。
这里有一个技巧,就是定义了一个私有的self变量。通过这个self变量,可以在让私有成员中访问公有成员。
Ÿ 特权成员
特权成员实际上是特指function成员。特权成员可以访问私有成员(变量和方法),同时它对公共域也是可见的。可以删除或替换一个特权成员,但是不能对他进行修改。
特权方法是用this在构造器中定义的。
1 function Container(param){ 2 function dec(){ 3 if(secret>0){ 4 secret-=1; 5 return true; 6 }else{ 7 return false; 8 } 9 } 10 this.member = param; 11 var secret = 3; 12 var self = this; 13 14 //特权成员 15 16 this.service = function(){ 17 if(dec()){ 18 return self.member; 19 }else{ 20 return null; 21 } 22 }; 23 }
上面的代码片段中,service方法就是一个特权成员。可以看到,在service方法中,调用了私有方法dec(),而dec又访问了私有变量secret.
2. 继承
JavaScript继承问题一直是网上被讨论最热烈的一个JavaScript问题。在详细讨论JavaScript的继承之前,我们先看一下“继承”的概念。
继承,让子类具备父类的特性。继承,描述的是类型层面上而不是个体层面上的特性。因此,继承,只应该是描述类型的,也就是说,只能是类之间存在继承关系,而对象实体之间是不存在继承关系的。
由于JavaScript并不是很清晰(类跟对象没有明显的区分),因此导致JavaScript中的继承实现要大费周折。很多人为JavaScript想出了各种各样的实现继承的方法,包括:构造器继承法,原型继承法,实例继承法,附加继承法。
这里不去详细讨论每一种继承的实现思路。
在《JavaScript权威指南1.5》中列出的是prototype继承。
1 function SubCircle(x, y, r) { 2 this.x = x; 3 this.y = y; 4 this.r =r; 5 } 6 SubCircle.prototype = new Circle(0);
这种继承方式,会有一点问题,就是原来在SubCircle的prototype中定义的方法和属性丢失。
在prototype1.5 framework中,通过属性复制定义另一中继承方式。核心概念就是把Circle的prototype中的所有成员复制到SubCircle中,这样可以确保SubCircle的prototype中的成员不会丢失,但是这样也有个问题,就是Circle中定义的公有成员,特权成员并没有被继承到SubCircle中。
为了解决这个问题,可以综合上面两种继承的有点,进行如下的实现:
3. 多态
首先看一下例子:
///////////define: Cricle////////////////// function Circle(r) { this.r = r; } Circle.PI = 3.14; Circle.prototype.PI = 3.14; Circle.prototype.area = function() { return Circle.PI*this.r*this.r; } Circle.prototype.area2 = function() { return this.PI*this.r*this.r; } //// test c = new Circle(3); //alert("area1 :"+c.area()); //alert("area2 :"+c.area2()); Circle.max = function(a, b) { return a.r>b.r ? a.r : b.r; } //alert("max is "+Circle.max(new Circle(1), new Circle(3))); c1 = new Circle(1); c2 = new Circle(1); c2.PI = 100;//Circle.prototype.PI=100; //alert("c1.area1 "+c1.area()); //alert("c1.area2 "+c1.area2()); //alert("c2.area1 "+c2.area()); //alert("c2.area2 "+c2.area2()); ////////////////////////define: SubCircle ////////////////// function SubCircle(x, y, r) { this.x = x; this.y = y; this.r = r; } SubCircle.prototype = new Circle(0); SubCircle.prototype.PI = 100; SubCircle.prototype.move2 = function(x, y) { this.x = x; this.y = y;} SubCircle.prototype.area = function() { return this.PI*this.r*this.r*this.r; } //// test sc = new SubCircle(0,0,2); alert(sc.area());
调用sc.area()的执行顺序是:
sc.PI->sc.prototype.PI->100;
sc.area()->sc.prototype.area()->SubCircle(0,0,2).area()
从上面的调用顺序可以看到,SubCircle的调用过程中,只要属性和方法在子类中存在,就完全用子类的属性和方法。
如果要使用父类的属性和方法怎么办呢?这就要用到继承部分的支持。在继承的时候,子类的prototype中增加了一个属性superClass,这个superClass就是父对象的引用。因此就可以通过superClass调用父对象的属性和方法了。
命名空间
随着功能的增加,JavaScript代码也会变的越来越复杂,那么给JavaScript增加命名空间就显得尤为重要了。
JavaScript语言中没有对命名空间提供直接的支持,因此只有通过模拟实现命名空间。具体实现是使用闭包特性,使JavaScript代码位于某些特定的Function内。下面是命名空间的代码片段:
1 //最外层的包 2 3 var laputa = {}; 4 5 //在laputa包内部定义了两个包:lang,util 6 7 laputa.lang={}; 8 laputa.util = {}; 9 10 11 //在lang包里定义了String类, 12 13 laputa.lang.String = {}; 14 15 //String类的trim方法 16 17 laputa.lang.String.prototype.trim = function(){ 18 return this.replace(/(^\s*)|(\s*$)/g, ""); 19 }; 20 21 //String类的toUpperCase方法 22 23 laputa.lang.String.prototype.toUpperCase = function(){ 24 return this.toUpperCase(); 25 } 26 27 //在util包定义了DocumentUtil类 28 29 laputa.util.DocumentUtil = {}; 30 31 //DocumentUtil类的$方法 32 33 laputa.util.DocumentUtil.$ = function(id){ 34 return document.getElementById(id); 35 } 36 37 //DocumentUtil类的$v方法 38 39 laputa.util.DocumentUtil.$v = function(id){ 40 var el = laputa.util.DocumentUtil.$(id); 41 if(el){ 42 return el.value; 43 } 44 return null; 45 }