JavaScript的相关继承笔记以及使用外部库实现JavaScript的面向对象特性 - HideHai's Blog

hidehai 的BLOG

写留言邀请进圈子发消息加友情链接进家园加好友

博客统计信息

用户名：hidehai
文章数：9
评论数：13
访问量：5229
无忧币：62
博客积分：528
博客等级：2
注册日期：2008-01-14

搜索BLOG文章

我的技术圈(1)

更多>>

JAVA EE

51CTO推荐博文

更多>>

JavaScript的相关继承笔记以及使用外部库实现JavaScript的面向对象特性

2009-09-05 22:06:52

标签：JavaScript 休闲职场

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://hidehai.blog.51cto.com/307955/199163

ECMAScript是通过ECMA-262标准化的脚本程序设计语言，面向对象的JavaScript是对其的扩展和支持。

面向对象语言有能力支持类以及类中方法和属性的重用，在JavaScript中实现继承可以通过本身的多种方法来实现，比如call()、apply()、仿冒、原型链，其中各有优缺点，此外还可以通过一些外部库实现继承的能力，比如xbObject、zinherit等。

◎通过对象仿冒来实现继承：

<script type="text/javascript">  
function Parent(pName){  
   this.name = pName;  
   this.sayMyName = function(){  
      alert(this.name);  
   };  
}  
 
function Mother(pName){  
   this.name = pName;  
   this.sayMyName = function(){  
      alert(this.name+"sex*y");  
   };  
}  
 
function Child(cName,cNumber){  
    this.myFace = Parent;  
    this.myFace(cName);  
    delete this.myFace;  
 
    this.myFace = Mother;  
    this.myFace(cName);  
    delete this.myFace;  
 
    this.number = cNumber;  
    this.sayNumber = function(){  
      alert(this.number);  
    };  
}  
 
var ObjP =new Parent("HideHai");  
var ObjM =new Mother("Hidewow");  
var ObjC =new Child("HideLow",3);  
 
ObjP.sayMyName();  
ObjM.sayMyName();  
ObjC.sayMyName();  
ObjC.sayNumber();  
  </script>

◎使用call()实现对象继承：

call(obj,option....) 第一个参数是输入对象作为当前的this，其余的参数传递给函数本身。

<script type="text/javascript">  
function Parent(pName){  
   this.name = pName;  
   this.sayMyName = function(){  
      alert(this.name);  
   };  
}  
 
function Mother(pName){  
   this.name = pName;  
   this.sayMyName = function(){  
      alert(this.name+"sex*y");  
   };  
}  
 
function Child(cName,cNumber){  
      
    Parent.call(this,cName);  
 
    Mother.call(this,cName);  
 
    this.number = cNumber;  
    this.sayNumber = function(){  
      alert(this.number);  
    };  
}  
 
var ObjP =new Parent("HideHai");  
var ObjM =new Mother("Hidewow");  
var ObjC =new Child("HideLow",3);  
 
ObjP.sayMyName();  
ObjM.sayMyName();  
ObjC.sayMyName();  
ObjC.sayNumber();  
  </script>

◎使用apply()方法实现继承：

apply(obj,options[...]) 第一个参数等同于call方法的第一个参数，第二个参数为一个以传入参数为元素的数组。

....   //代码同上  
function Child(cName,cNumber){  
      
    Parent.apply(this,new Array(cName));  
 
    Mother.call(this,new Array(cName));  
 
    this.number = cNumber;  
    this.sayNumber = function(){  
      alert(this.number);  
    };  
}

◎使用原型链实现继承：

关键代码为 Child.prototype = new Parent(); 将Parent的属性和方法赋予Child。在原型链的使用中，对子类的构造函数不传递参数是标准做法。

<script type="text/javascript">  
function Parent(pName){  
   this.name = pName;  
   this.sayMyName = function(){  
      alert(this.name);  
   };  
}  
 
function Child(){  
}  
Child.prototype = new Parent();  
Child.prototype.name = "";  
Child.prototype.number = 0;  
Child.prototype.sayNumber = function(){  
      alert(this.number);  
    };  
 
var ObjP =new Parent("HideHai");  
//var ObjM =new Mother("Hidewow");  
var ObjC =new Child("HideLow");  
 
ObjC.name = "HideLow";  
ObjC.number = 3;  
 
ObjP.sayMyName();  
ObjC.sayMyName();  
ObjC.sayNumber();  
  </script>

◎使用混合方式实现继承:

在JavaScript中定义类普遍用构造函数声明类的属性，在使用原型方式prototype定义类的方法，采用混合方式来实现继承可以规避上一种方法原型链中不对构造函数传递参数的不足。

<script type="text/javascript">  
function Parent(pName){  
   this.name = pName;  
}  
Parent.prototype.sayMyName = function(){  
      alert(this.name);  
   };  
 
function Child(cName,cNumber){  
   Parent.call(this,cName);  //Parent.apply(this,new Aarray(cName));
   this.name = cName;  
}  
Child.prototype =new Parent();  
Child.prototype.sayNumber = function(){  
      alert(this.number);  
    };  
 
var ObjP =new Parent("HideHai");  
//var ObjM =new Mother("Hidewow");  
var ObjC =new Child("HideLow");  
 
ObjC.name = "HideLow";  
ObjC.number = 3;  
 
ObjP.sayMyName();  
ObjC.sayMyName();  
ObjC.sayNumber();  
  </script>

◎使用外部库实现继承：

→zInherit

下载zInherit库，在需要的文件中导入外部文件：zInherit.js

zInherit对Object添加了2个延伸方法:inheritForm()与instanceOf() ，inheritForm()复制指定类的方法等同于上面的Child.prototype = new Parent(); instanceOf() 方法可以判断一个类是不是某个类的导出类。

示例代码同上，Child.prototype = new Parent(); 替换为 Child.prototype = inheritForm(Parent); 即可。

使用zInherit可以让代码支持以动态原型的方式来实现多重继承片段：

function Parent(pName){  
   this.name = pName;  
   if(typeof Parent._initialized == "undefined"){  
      Parent.prototype.sayxName= function(){  
      alert(this.name);  
     };  
     Parent._initialized = true;  
   }  
}  
 
function Mother(pName){  
   this.name = pName+"sex*y";  
   if(typeof Mother._initialized == "undefined"){  
      Parent.prototype.sayyName= function(){  
      alert(this.name);  
     };  
     Mother._initialized = true;  
   }  
}  
 
function Child(cName,cNumber){  
   Parent.call(this,cName);  
   Mother.call(this,cName);  
   this.name = cName;  
 
   if(typeof Parent._initialized == "undefined"){  
        Child.prototype = inheritForm(Parent);  
        Child.prototype = inheritForm(Mother);  
        Child.prototype.sayNumber = function(){  
        alert(this.number);  
    };  
    Child._initialized = true;  
   }  
 
 
}

→xbObject http://archive.bclary.com/

定义超类: _classes.registerClass("Grandpa");

定义继承: _classes.registerClass("Parent","Grandpa");

 
_classes.registerClass("Grandpa");  
 
function Grandpa(pName){  
 
   _classes.defineClass("Grandpa",prototypeFunction);  
 
   this.init(pName);   //init方法接受和构造函数相同的方法  
     
   function prototypeFunction () {  
     Grandpa.prototype.init =  function (pName) {  
       this.parentMethod("init");   //parentMethod方法可以传递多个参数，第一个参数为要调用的父类方法名字，然后其他参数被传递给此方法  
       this.name = pName;  
     }  
 
     Grandpa.prototype.saynName =  function () {  
         alert(this.name);  
     }  
   }  
}  
 
_classes.registerClass("Parent","Grandpa");  
function Parent(pName,cNumber){  
 
   _classes.defineClass("Parent",prototypeFunction);  
 
   this.init(pName,cNumber);   //init方法接受和构造函数相同的方法  
     
   function prototypeFunction () {  
       Parent.prototype.init =  function (pName,cNumber) {  
       this.parentMethod("init");   
       this.name = pName;  
       this.number = cNumber;  
     }  
 
      Parent.prototype.sayMyName =  function () {  
         alert(this.name);  
     }  
 
      Parent.prototype.sayMyNumber =  function () {  
         alert(this.number);  
     }  
   }  
}