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

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

脚本杂文hidehai1条留言

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+"sexy");  
    • 
	
  •    };  
    • 
	
  • }  
    • 
	
  •  
    • 
	
  • 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+"sexy");  
    • 
	
  •    };  
    • 
	
  • }  
    • 
	
  •  
    • 
	
  • 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+"sexy";  
    • 
	
  •    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);  
    • 
	
  •      }  
    • 
	
  •    }  
    • 
	
  • } 
    •

    Related posts:

    1. window.opener的调用
    2. javascript输出指定范围素数
    3. 鼠标猴子秋千特效
    4. 网页栏目2级js下拉菜单的代码

    《JavaScript的相关继承笔记以及使用外部库实现JavaScript的面向对象特性》有1条留言

    留下回复

    著作权 © 2024 HideHai‘s Blog - 由 CosmosWP 提供支持