DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 用原型繼承來實現對象系統
javascript 用原型繼承來實現對象系統
編輯:關於JavaScript     
javascript中,對象沒有原型,而構造器有原型
原型的含義:如果構造器有一個原型對象 A,則由該構造器創建的實例都必然復制自A
復制代碼 代碼如下:
/*申明2個構造器*/
var flower=function(){
this.name="nokia";
}
var flower2=function(){
this.age=22;
}
/*原型鏈*/
flower2.prototype=new flower();
/*根據剛才原型的定義,實例obj必然復制自new flower();*/
obj=new flowe2();
/*從父類繼承的屬性*/
alert(obj.name); //==>"nokia"
alert(obj.age); //==>22

一個構造器產生的實例,其constructor屬性默認總是指向該構造器
alert(obj.constructor);//==>flower
構造器原型的constructor屬性 指向構造器本身
alert(flower.prototype.constructor==flower);//==>true
constructor會與原型繼承發生的沖突
復制代碼 代碼如下:
function flower(){}
function flower2(){}
flower2.prototype=new flower();
var obj1=new flower();
var obj2=new flower2();
/*問題出現了,2個實例的constructor屬性都指向flower*/
alert(obj1.constructor==obj2.constructor);
/*obj1和obj2是不同的構造器產生的實例,缺指向相同的構造器,顯然出了問題*/

解決的方法
復制代碼 代碼如下:
flower2.prototype=new flower();
/*重置原型後,修改原型的constructor屬性*/
flower2.prototype.constructor=flower2
或每次構造實例時都重寫constructor屬性
function flower2(){
this.constructor=arguments.callee;
}
flower2.prototype=new flower();

此外原型繼承沒有提供調用父類的方法
然而我們基於原型繼承,通過靜態變量記錄父類來彌補這一缺陷
復制代碼 代碼如下:
var Class={
create:function()
{
var _class=function()
{
this.init.apply(this,arguments);
}
_class.prototype.init=Function.prototype.init;
try{
return _class;
}finally{
_class=null;
}
}
};
//默認構造函數
Function.prototype.init=function(){}
//方法擴展
Function.prototype.extend=function(list)
{
for(var i in list)this.prototype[i]=list[i];
return this;
}
//多級繼承
Function.prototype.inherits=function(parent)
{
//繼承的深度級別
var _depth=0;
//方法屬性移植
this.extend(new parent());
//初始化構造函數 類的繼承通常不繼承構造函數
this.prototype.init=Function.prototype.init;
//類的靜態父類
this.parent=parent;
//執行父類函數
this.prototype.parent=function(name)
{
//若沒有參數則執行構造函數
if(!name)name='init';
//即將執行的父類
var _parent=parent;
//若當前已經在父類中執行則繼續向上尋找超類
if(_depth)
{
for(var i=0;i<_depth;i++)
{
_parent=_parent.parent;
}
}
//設置好級別
_depth++;
try{
//執行函數並返回值
return _parent.prototype[name].apply(this,Array.prototype.slice.apply(arguments,[1]));
}catch(e){
throw(e);
}finally{
//恢復級別
_depth--;
}
}
return this;
}

例子:
復制代碼 代碼如下:
//創建名為class1的構造器
var class1=Class.create().extend({
b:function()
{
alert('clas');
alert(this.c);
},
c:100
});
//創建"對象"(構造器)的實例
var s=new class1();
s.b();// ==>"clas",100

繼承父類,並調用父類的方法:
復制代碼 代碼如下:
var test=Class.create().inherits(class1).extend({
b:function()
{
alert('test');
this.parent('b')
},
c:110
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved