javascript中如何實(shí)現(xiàn)封裝-繼承和多態(tài)-并有詳細(xì)的示例

JavaScript與OOP李贊紅歡送交流1目標(biāo)Function對象的apply方法自定義對象封裝繼承多態(tài)2apply()Javascript的每個(gè)Function對象中有一個(gè)apply方法語法：function.apply([thisObj[,argArray]])功能：可以用來代替另一個(gè)對象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對象。用來模擬多態(tài)另外一個(gè)相似的方法function.call([thisObj[,arg1[,arg2[,[,.argN]]]]])3例如 functionObject1(name){ =name; this.fun1=function(){alert("這是第一個(gè)方法。");}; this.fun2=function(){alert("這是第二個(gè)方法。");}; }

functionObject2(name){ Object1.apply(this,[name]); } varo2=newObject2("中華人民共和國"); o2.fun1(); o2.fun2(); alert();4根本概念自定義對象根據(jù)JS的對象擴(kuò)展機(jī)制，用戶可以自定義JS對象，這與Java語言有類似的地方。如：Math、Date、String等原型〔prototype〕通過prototype可以為對象在運(yùn)行期間添加新的屬性和方法。5創(chuàng)立對象(1)對象初始化器方式語法objectName={property1:value1,property2:value2,…,propertyN:valueN,method1:function(arguments){…},…}

其中：property是對象的屬性，value那么是對象的值，值可以是字符串、數(shù)字或?qū)ο笕咧弧?例如 varUsers={ name:"中國", register:function(i){ alert("注冊了"+i+"次"); } };

Users.register(3); alert(U);7創(chuàng)立對象(2)構(gòu)造函數(shù)方式編寫一個(gè)構(gòu)造函數(shù)，并通過new方式來創(chuàng)立對象，構(gòu)造函數(shù)本可以帶有構(gòu)造參數(shù)?？梢栽趯ο笾卸x私有成員、實(shí)例成員和類成員8例如 //訂單構(gòu)造函數(shù) functionOrder(date,total){ this.date=date; this.total=total;

this.calc=function(name){ alert(name+"正在統(tǒng)計(jì)"+this.date+"下的訂單,總數(shù)為"+this.total); } }

varo=newOrder(newDate(),10); o.calc("李贊紅");9對象屬性的定義私有屬性私有屬性只能在構(gòu)造函數(shù)內(nèi)部定義與使用。實(shí)例屬性必須在對象實(shí)例化后才能使用prototype方式，語法格式：functionNpertyName=valuethis方式，語法格式：pertyName=value類屬性直接通過類名去使用語法格式：functionNpertyName=value10例如 functionCustomer(){ ="北大青鳥";//對象屬性 varbrowser=(document.all?"IE":"FireFox");//私有屬性 Ctotype.theBrowser=browser;//對象屬性 } Customerpany="北大青鳥教育集團(tuán)";//類屬性

//Test alert(Customerpany); varc=newCustomer(); alert(+"\r\n"+c.theBrowser);11對象方法的定義私有方法私有方法只能在對象內(nèi)部使用實(shí)例方法實(shí)例方法必須在對象實(shí)例化后才能使用語法與對象屬性相同類方法類方法可以直接通過類名去使用12例如 functionMiss(){ varyou=function(){alert(“Missyou”);}//私有方法 this.me=function(){alert(“missme”);}//對象方法

//對象方法 Mtotype.he=function(){alert("misshim");} }

//類方法 Miss.she=function(){alert("missshe");}

Miss.she(); varm=newMiss(); m.me();m.he();13小結(jié)14動(dòng)態(tài)刪除屬性和方法對于已經(jīng)實(shí)例化的對象，我們可以動(dòng)態(tài)增加和刪除它的屬性與方法語法:動(dòng)態(tài)刪除對象屬性

deletepertyName動(dòng)態(tài)刪除對象方法

deleteobj.methodName

15理解幾個(gè)常用的方法(1)類的創(chuàng)立模型varClass={ create:function(){ returnfunction(){this.initialize.apply(this,arguments);}; }}說明: 1.使用Class.create()可以創(chuàng)立任何對象 2.自定義對象中必須實(shí)現(xiàn)initialize方法,該方法相當(dāng)于JAVA中的構(gòu)造方法,此處表達(dá)了多態(tài)特征16理解幾個(gè)常用的方法(2)$()方法var$=function(id){ return"string"==typeofid? document.getElementById(id):id;};說明通過$(“id”)訪問在框架jquery,prototype中都有類似的定義.17理解幾個(gè)常用的方法(3)繼承模擬 varExtend=function(desc,src){ for(varpropertyinsrc){ desc[property]=src[property]; } };

Ototype.extend=function(obj){ Extend.apply(this,[this,obj]); }

vars=newStudent(1,"李贊紅",30); vars2=newStudent(); s2.extend(s); s2.getInfo(); s2.reading();18典型的對象定義--StudentvarClass={ create:function(){

returnfunction(){this.initialize.apply(this,arguments);}; }}varStudent=Class.create();Student.MAX_AGE=100;Student.MIN_AGE=1;19Stotype={ initialize:function(id,name,age){ this.id=id; =name; this["kiss"]="這是描述性信息";

if(age>=Student.MIN_AGE&&age<=Student.MAX_AGE){ this.age=age; }else{ this.age=50; } },

getInfo:function(){ alert("我叫"++"\r\n今年"+this.age+"歲\r\n"+this["kiss"]); },

reading:function(){ alert(+"正在閱讀，請不要打攪……"); }};20測試 vars=newStudent(1,“楊過",30); s.getInfo(); s.reading();21抽象類抽象方法抽象方法就可以看作該類中沒有定義的方法，但已經(jīng)通過this指針使用了,抽象方法必須在子類中實(shí)現(xiàn).這個(gè)和傳統(tǒng)的語言(如JAVA)不同抽象類如果類中定義了抽象方法,該類就是抽象類,不能實(shí)例化,只能作為父類使用22繼承繼承一個(gè)類派生出另一個(gè)類在javascript中,繼承依賴于下面的兩個(gè)方法:varExtend=function(desc,src){ for(varpropertyinsrc){ desc[property]=src[property]; } returndesc;};Ototype.extend=function(obj){ returnExtend.apply(this,[this,obj]);}23定義抽象類 varBase=Class.create();

Btotype={ initialize:function(){},//此方法必須 myFun:function(){ this.oninit();//該方法未實(shí)現(xiàn) }, myMethod:function(){ alert("這是mymethod方法"); } };24子類 varSub=Class.create();

Stotype=(newBase()).extend({ oninit:function(){ alert("中華人民共和國"); } });

//Test vars=newSub(); s.myFun();//該方法從Base中繼承 s.myMethod();//該方法從Base中繼承25繼承與多態(tài)例如本例如定義一個(gè)抽象類—?jiǎng)游镱?所有動(dòng)物都能行走,但不同類型的動(dòng)物行走的方式不同,所以,將具體行走的方法放到子類實(shí)現(xiàn)—鳥類和魚類.26根底代碼//類創(chuàng)立模型varClass={ create:function(){ returnfunction(){this.initialize.apply(this,arguments)}; }};//模擬繼承varExtend=function(desc,src){ for(varmemberinsrc){ desc[member]=src[member]; } returndesc;};//動(dòng)態(tài)為Object添加extend方法,用來完成繼承Ototype.extend=function(obj){ returnExtend.apply(this,[this,obj]); };27抽象類—?jiǎng)游镱?/動(dòng)物類varAnimal=Class.create();//為動(dòng)物添加抽象方法Atotype={ //初始函數(shù),相當(dāng)于構(gòu)造方法 initialize:function(name){ =name; }, walking:function(){ this.abstractWalking();//相當(dāng)于抽象方法,不需要任何實(shí)現(xiàn),等子類去實(shí)現(xiàn) }};28子類—鳥類與魚類//鳥類(子類)varBird=Class.create();Btotype=(newAnimal()).extend({ abstractWalking:function(){ alert("鳥靠翅膀飛著走路,名稱:"+); }});//魚類(子類)varFish=Class.create();Ftotype=(newAnimal()).extend({