利用共享prototype实现继承 继承是面向对象开发的又一个重要概念,它可以将现实生活的概念对应到程序逻辑中。例如水果是一个类,具有一些公共的性质;而苹果也是一类,但它们属于水果,所以苹果应该继承于水果。powered by 25175.net 在JavaScript中没有专门的机制来实现类的继承,但可以通过拷贝一个类的prototype到另外一个类来实现继承。一种简单的实现如下: fucntion class1(){ //构造函数 }
function class2(){ //构造函数 } class2.prototype=class1.prototype; class2.prototype.moreProperty1="xxx"; class2.prototype.moreMethod1=function(){ //方法实现代码 } var obj=new class2(); 这样,首先是class2具有了和class1一样的prototype,不考虑构造函数,两个类是等价的。随后,又通过prototype给class2赋予了两个额外的方法。所以class2是在class1的基础上增加了属性和方法,这就实现了类的继承。 JavaScript提供了instanceof操作符来判断一个对象是否是某个类的实例,对于上面创建的obj对象,下面两条语句都是成立的: obj instanceof class1 obj instanceof class2 表
面上看,上面的实现完全可行,JavaScript也能够正确的理解这种继承关系,obj同时是class1和class2的实例。事是上不
对,JavaScript的这种理解实际上是基于一种很简单的策略。看下面的代码,先使用prototype让class2继承于class1,再在
class2中重复定义method方法: <script language="JavaScript" type="text/javascript"> <!-- //定义class1 function class1(){ //构造函数 } //定义class1的成员 class1.prototype={ m1:function(){ alert(1); } } //定义class2 function class2(){ //构造函数 } //让class2继承于class1 class2.prototype=class1.prototype; //给class2重复定义方法method class2.prototype.method=function(){ alert(2); } //创建两个类的实例 var obj1=new class1(); var obj2=new class2(); //分别调用两个对象的method方法 obj1.method(); obj2.method(); //--> </script> 从
代码执行结果看,弹出了两次对话框“2”。由此可见,当对class2进行prototype的改变时,class1的prototype也随之改变,即
使对class2的prototype增减一些成员,class1的成员也随之改变。所以class1和class2仅仅是构造函数不同的两个类,它们保
持着相同的成员定义。从这里,相信读者已经发现了其中的奥妙:class1和class2的prototype是完全相同的,是对同一个对象的引用。其实
从这条赋值语句就可以看出来: //让class2继承于class1 class2.prototype=class1.prototype; 在
JavaScript中,除了基本的数据类型(数字、字符串、布尔等),所有的赋值以及函数参数都是引用传递,而不是值传递。所以上面的语句仅仅是让
class2的prototype对象引用class1的prototype,造成了类成员定义始终保持一致的效果。从这里也看到了instanceof
操作符的执行机制,它就是判断一个对象是否是一个prototype的实例,因为这里的obj1和obj2都是对应于同一个prototype,所以它们
instanceof的结果都是相同的。 因此,使用prototype引用拷贝实现继承不是一种正确的办法。但在要求不严格的情况下,却也是一种合理的方法,惟一的约束是不允许类成员的覆盖定义。下面一节,将利用反射机制和prototype来实现正确的类继承。 利用反射机制和prototype实现继承 前
面一节介绍的共享prototype来实现类的继承,不是一种很好的方法,毕竟两个类是共享的一个prototype,任何对成员的重定义都会互相影响,
不是严格意义的继承。但在这个思想的基础上,可以利用反射机制来实现类的继承,思路如下:利用for(…in…)语句枚举出所有基类prototype的
成员,并将其赋值给子类的prototype对象。例如: <script language="JavaScript" type="text/javascript"> <!-- function class1(){ //构造函数 } class1.prototype={ method:function(){ alert(1); }, method2:function(){ alert("method2"); } } function class2(){ //构造函数 } //让class2继承于class1 for(var p in class1.prototype){ class2.prototype[p]=class1.prototype[p]; }
//覆盖定义class1中的method方法 class2.prototype.method=function(){ alert(2); } //创建两个类的实例 var obj1=new class1(); var obj2=new class2(); //分别调用obj1和obj2的method方法 obj1.method(); obj2.method(); //分别调用obj1和obj2的method2方法 obj1.method2(); obj2.method2(); //--> </script> 从
运行结果可见,obj2中重复定义的method已经覆盖了继承的method方法,同时method2方法未受影响。而且obj1中的method方法
仍然保持了原有的定义。这样,就实现了正确意义的类的继承。为了方便开发,可以为每个类添加一个共有的方法,用以实现类的继承: //为类添加静态方法inherit表示继承于某类 Function.prototype.inherit=function(baseClass){ for(var p in baseClass.prototype){ this.prototype[p]=baseClass.prototype[p]; } } 这里使用所有函数对象(类)的共同类Function来添加继承方法,这样所有的类都会有一个inherit方法,用以实现继承,读者可以仔细理解这种用法。于是,上面代码中的: //让class2继承于class1 for(var p in class1.prototype){ class2.prototype[p]=class1.prototype[p]; } 可以改写为: //让class2继承于class1 class2.inherit(class1) 这样代码逻辑变的更加清楚,也更容易理解。通过这种方法实现的继承,有一个缺点,就是在class2中添加类成员定义时,不能给prototype直接赋值,而只能对其属性进行赋值,例如不能写为: class2.prototype={ //成员定义 } 而只能写为: class2.prototype.propertyName=someValue; class2.prototype.methodName=function(){ //语句 } 由
此可见,这样实现继承仍然要以牺牲一定的代码可读性为代价,在下一节将介绍prototype-1.3.1框架(注:prototype-1.3.1框架
是一个JavaScript类库,扩展了基本对象功能,并提供了实用工具详见附录。)中实现的类的继承机制,不仅基类可以用对象直接赋值给
property,而且在派生类中也可以同样实现,使代码逻辑更加清晰,也更能体现面向对象的语言特点。
prototype-1.3.1框架中的类继承实现机制 在prototype-1.3.1框架中,首先为每个对象都定义了一个extend方法: //为Object类添加静态方法:extend Object.extend = function(destination, source) { for(property in source) { destination[property] = source[property]; } return destination; } //通过Object类为每个对象添加方法extend Object.prototype.extend = function(object) { return Object.extend.apply(this, [this, object]); } Object.extend
方法很容易理解,它是Object类的一个静态方法,用于将参数中source的所有属性都赋值到destination对象中,并返回
destination的引用。下面解释一下Object.prototype.extend的实现,因为Object是所有对象的基类,所以这里是为所
有的对象都添加一个extend方法,函数体中的语句如下: Object.extend.apply(this,[this,object]); 这
一句是将Object类的静态方法作为对象的方法运行,第一个参数this是指向对象实例自身;第二个参数是一个数组,包括两个元素:对象本身和传进来的
对象参数object。函数功能是将参数对象object的所有属性和方法赋值给调用该方法的对象自身,并返回自身的引用。有了这个方法,下面看类继承的
实现: <script language="JavaScript" type="text/javascript"> <!-- //定义extend方法 Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination; } Object.prototype.extend = function(object) { return Object.extend.apply(this, [this, object]); } //定义class1 function class1(){ //构造函数 } //定义类class1的成员 class1.prototype={ method:function(){ alert("class1"); }, method2:function(){ alert("method2"); }
} //定义class2 function class2(){ //构造函数 } //让class2继承于class1并定义新成员 class2.prototype=(new class1()).extend({ method:function(){ alert("class2"); } });
//创建两个实例 var obj1=new class1(); var obj2=new class2(); //试验obj1和obj2的方法 obj1.method(); obj2.method(); obj1.method2(); obj2.method2(); //--> </script> 从运行结果可以看出,继承被正确的实现了,而且派生类的额外成员也可以以列表的形式加以定义,提高了代码的可读性。下面解释继承的实现: //让class2继承于class1并定义新成员 class2.prototype=(new class1()).extend({ method:function(){ alert("class2"); } }); 上段代码也可以写为: //让class2继承于class1并定义新成员 class2.prototype=class1.prototype.extend({ method:function(){ alert("class2"); } }); 但
因为extend方法会改变调用该方法对象本身,所以上述调用会改变class1的prototype的值,犯了和以前一样的错误。在
prototype-1.3.1框架中,巧妙的利用new
class1()来创建一个实例对象,并将实例对象的成员赋值给class2的prototype。其本质相当于创建了class1的prototype
的一个拷贝,在这个拷贝上进行操作自然不会影响原有类中prototype的定义了。
|