本文實(shí)例講述了JavaScript繼承與聚合。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)建站-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比共青城網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式共青城網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋共青城地區(qū)。費(fèi)用合理售后完善,10年實(shí)體公司更值得信賴(lài)。
一、繼承
第一種方式:類(lèi)與被繼承類(lèi)直接耦合度高
1. 首先,準(zhǔn)備一個(gè)可以被繼承的類(lèi)(父類(lèi)),例如
//創(chuàng)建一個(gè)人員類(lèi) function Person(name) {//現(xiàn)在Person里面的域是由Person里面的 來(lái)this來(lái)控制的 this.name=name; }
2. 然后,有個(gè)需要繼承父類(lèi)的子類(lèi)
function Teacher(name,books) { Person.call(this,name);//相當(dāng)于java中的super函數(shù) 在new Teacher時(shí)將Person的name初始化 this.books=books; }
說(shuō)明一下:
(1)call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始化變成由this來(lái)決定一個(gè)類(lèi)去控制另一個(gè)類(lèi)
(2)Teacher類(lèi)去控制 Person類(lèi) 用Teacher域里面的 this來(lái)控制Person域里面的 this
(3)調(diào)用 Perosn的構(gòu)造函數(shù),因?yàn)镻erosn沒(méi)有用 new 所以是個(gè)空對(duì)象(模板) 顯示調(diào)用call方法,可以初始化 Person
3. 最后,實(shí)現(xiàn)繼承
(步驟1)先繼承
Teacher.prototype=new Person(); Teacher.prototype.constructor=Teacher;//確保繼承后任然是Teacher自己的構(gòu)造函數(shù)
(步驟2)為子類(lèi)擴(kuò)展一些方法,用于訪(fǎng)問(wèn)從父類(lèi)繼承的內(nèi)容
Teacher.prototype.getBook=function () { return this.name+" "+this.books; }
(步驟3)使用已經(jīng)繼承好的類(lèi)
var jim=new Teacher("Jim","Javascript"); alert(jim.getBook())
總結(jié):此種方法是直接在子類(lèi)中顯示調(diào)用父類(lèi),耦合度高,復(fù)用性差。
第二種方式,使用封裝,完成程序中所用繼承操作
1. 首先,準(zhǔn)備一個(gè)可以被繼承的類(lèi)(父類(lèi)),例如
//創(chuàng)建一個(gè)人員類(lèi) function Person(name) {//現(xiàn)在Person里面的域由Person里面的來(lái)this來(lái)控制的 this.name=name; }
2. 創(chuàng)建extend函數(shù)為了程序中所有的繼承操作(最重要的地方)
/*創(chuàng)建extend函數(shù)為了程序中所有的繼承操作*/ //subClass:子類(lèi) superClass:超類(lèi)(2) function extend(subClass,superClass) { //1,使子類(lèi)原型屬性等于父類(lèi)的原型屬性 //初始化一個(gè)中間空對(duì)象,目的是為了轉(zhuǎn)換主父關(guān)系 var F = function () {}; F.prototype = superClass.prototype; //2, 讓子類(lèi)繼承F subClass.prototype = new F(); subClass.prototype.constructor = subClass; //3,為子類(lèi)增加屬性 superClass ==》原型鏈的引用 subClass.superClass = superClass.prototype; //4,增加一個(gè)保險(xiǎn),就算你的原型類(lèi)是超類(lèi)(Object)那么也要把你的構(gòu)造函數(shù)級(jí)別降下來(lái) 【說(shuō)明一些:這里只是其中一個(gè)簡(jiǎn)單的保險(xiǎn),其余情況后續(xù)增加。。?!? if (superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; } }
3. 有一個(gè)需要繼承其他類(lèi)的子類(lèi)
function Author(name,books) { Author.superClass.constructor.call(this,name);//沒(méi)有直接寫(xiě)父類(lèi),降低了耦合度 //Person.call(this,name) 直接寫(xiě)Person代表其構(gòu)造函數(shù) this.books=books; this.getBooks=function () { return this.name+" "+this.books ; } }
4. 最后,實(shí)現(xiàn)繼承
//繼承 extend(Author,Person);//(子類(lèi),父類(lèi))
5. 使用已經(jīng)繼承好的類(lèi)
var peter=new Author("Peter","Javascript"); alert(peter.getBooks());
方式二圖解為:
這里可能會(huì)有一個(gè)疑問(wèn)就是為啥要使用中間類(lèi)???
這里假如沒(méi)有中間類(lèi)的話(huà),我們?cè)趯?shí)例化子類(lèi)時(shí)就需要為父類(lèi)傳遞一些相應(yīng)的參數(shù),這樣的話(huà),該句代碼
Author.superClass.constructor.call(this,name);
就不能放在子類(lèi)(Author)中,而是需要放入到extend中,這樣的話(huà)代碼的通用性就很低,故此需要使用中間類(lèi)。
二、聚合
使用聚合的原因,有的時(shí)候不需要嚴(yán)格的繼承,我們真正需要的是一個(gè)類(lèi)(或幾個(gè)類(lèi))中的一些函數(shù)。故此我們可以使用聚合 也就是使用 摻元類(lèi)
對(duì)于聚合有兩種情況
第一種是聚合到 var a={}空類(lèi)或者不是用function聲明的類(lèi)中
1. 首先,需要一個(gè)合適的可以被聚合的類(lèi)(給體),此時(shí)需要在本類(lèi)的內(nèi)部進(jìn)行擴(kuò)展屬性,方法
var JSON={//寫(xiě)到類(lèi)的內(nèi)部 toJsonString:function () { var output=[]; for(key in this){//this代表那個(gè)調(diào)用,就指向那個(gè)一個(gè)對(duì)象 output.push(key+"---->"+this[key]); } return output; } };
2. 制作一個(gè)聚合函數(shù)(最重要)
/*聚合函數(shù) receivingClass:接受聚合內(nèi)容的類(lèi) givingClass:被聚合的目標(biāo)類(lèi) * */ function mixin(receivingClass,givingClass){ for(methodName in givingClass){ if(!receivingClass.__proto__[methodName]){//判斷當(dāng)前原型中是否含有即將要被聚合的方法,若沒(méi)有則聚合進(jìn)來(lái) receivingClass.__proto__[methodName]=givingClass[methodName];//直接獲得類(lèi)中的方法,因?yàn)榉椒ㄊ侵苯訉?xiě)在方法內(nèi)部的。 } } }
3. 接受聚合的類(lèi)(受體)
var get={name:"Text",age:20};
4. 實(shí)現(xiàn)將JSON類(lèi)的方法聚合到類(lèi)get中
mixin(get,JSON);//(受體,給體)
5. 使用get類(lèi)中聚合的方法
document.write(get.toJsonString().join(","));
第二種是聚合用function聲明的類(lèi)中
var a=function(){}
1. 首先,需要一個(gè)合適的可以被聚合的類(lèi)(給體),此時(shí)需要在本類(lèi)的原型對(duì)象上進(jìn)行擴(kuò)展屬性,方法
var JSON={}; JSON.prototype={//寫(xiě)到類(lèi)的原型對(duì)象上 toJsonString:function () { var output=[]; for(key in this){//this代表那個(gè)調(diào)用,就指向那個(gè)一個(gè)對(duì)象 output.push(key+"---->"+this[key]); } return output; } }
2. 制作一個(gè)聚合函數(shù)
(2)制作聚合函數(shù)(receivingClass中聚合givingClass中的屬性,或者方法)
function mixin(receivingClass,givingClass) { for(methodName in givingClass.prototype){ if(!receivingClass.prototype[methodName]){//判斷當(dāng)前原型中是否含有即將要被聚合的方法,若沒(méi)有則聚合進(jìn)來(lái) receivingClass.prototype[methodName]=givingClass.prototype[methodName]; } } }
3. 接受 聚合的類(lèi)(受體)
var o=function () { this.name="聚合"; this.age=19; }
4. 實(shí)現(xiàn)JSON類(lèi)到o類(lèi)的聚合(將JSON類(lèi)中的方法聚合到o類(lèi)中)
mixin(o,JSON);//(受體,給體)
5. 使用o類(lèi)中聚合而來(lái)的方法
var useO=new o(); document.write(useO.toJsonString().join(","));
第二種圖解理解為:
該方式屬于類(lèi)o上一層的聚合。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。