JavaScript繼承與聚合實例詳解
本文實例講述了JavaScript繼承與聚合。分享給大家供大家參考，具體如下：
一、繼承
第一種方式：類與被繼承類直接耦合度高
1. 首先，準(zhǔn)備一個可以被繼承的類（父類），例如
//創(chuàng)建一個人員類
function Person(name) {//現(xiàn)在Person里面的域是由Person里面的
來this來控制的
this.name=name;
}
2. 然后，有個需要繼承父類的子類
function Teacher(name,books) {
Person.call(this,name);//相當(dāng)于java中的super函數(shù) 在new Teacher時將Person的name初始化
this.books=books;
}
說明一下:
(1)call方法可以將一個函數(shù)的對象上下文從初始化變成由this來決定一個類去控制另一個類
(2)Teacher類去控制 Person類 用Teacher域里面的 this來控制Person域里面的 this
(3)調(diào)用 Perosn的構(gòu)造函數(shù)，因為Perosn沒有用 new 所以是個空對象（模板） 顯示調(diào)用call方法，可以初始化 Person
3. 最后，實現(xiàn)繼承
（步驟1）先繼承
Teacher.prototype=new Person(); Teacher.prototype.constructor=Teacher;//確保繼承后任然是Teacher自己的構(gòu)造函數(shù)
（步驟2）為子類擴(kuò)展一些方法，用于訪問從父類繼承的內(nèi)容
Teacher.prototype.getBook=function () {
return this.name+" "+this.books;
}
（步驟3）使用已經(jīng)繼承好的類
var jim=new Teacher("Jim","Javascript");
alert(jim.getBook())
總結(jié)：此種方法是直接在子類中顯示調(diào)用父類，耦合度高，復(fù)用性差。
第二種方式，使用封裝，完成程序中所用繼承操作
1. 首先，準(zhǔn)備一個可以被繼承的類（父類），例如
//創(chuàng)建一個人員類
function Person(name) {//現(xiàn)在Person里面的域由Person里面的來this來控制的
this.name=name;
}
2. 創(chuàng)建extend函數(shù)為了程序中所有的繼承操作（最重要的地方）
/*創(chuàng)建extend函數(shù)為了程序中所有的繼承操作*/
//subClass:子類 superClass：超類（2）
function extend(subClass,superClass) {
//1，使子類原型屬性等于父類的原型屬性
//初始化一個中間空對象，目的是為了轉(zhuǎn)換主父關(guān)系
var F = function () {};
F.prototype = superClass.prototype;
//2， 讓子類繼承F
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
//3，為子類增加屬性 superClass ==》原型鏈的引用
subClass.superClass = superClass.prototype;
//4，增加一個保險，就算你的原型類是超類（Object）那么也要把你的構(gòu)造函數(shù)級別降下來 【說明一些：這里只是其中一個簡單的保險，其余情況后續(xù)增加。。?！?
if (superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
}
3. 有一個需要繼承其他類的子類
function Author(name,books) {
Author.superClass.constructor.call(this,name);//沒有直接寫父類，降低了耦合度
//Person.call(this,name) 直接寫Person代表其構(gòu)造函數(shù)
this.books=books;
this.getBooks=function () {
return this.name+" "+this.books ;
}
}
4. 最后，實現(xiàn)繼承
//繼承 extend(Author,Person);//（子類，父類）
5. 使用已經(jīng)繼承好的類
var peter=new Author("Peter","Javascript");
alert(peter.getBooks());
方式二圖解為：
這里可能會有一個疑問就是為啥要使用中間類？？？
這里假如沒有中間類的話，我們在實例化子類時就需要為父類傳遞一些相應(yīng)的參數(shù)，這樣的話，該句代碼
Author.superClass.constructor.call(this,name);
就不能放在子類（Author）中，而是需要放入到extend中，這樣的話代碼的通用性就很低，故此需要使用中間類。
二、聚合
使用聚合的原因，有的時候不需要嚴(yán)格的繼承，我們真正需要的是一個類（或幾個類）中的一些函數(shù)。故此我們可以使用聚合 也就是使用 摻元類
對于聚合有兩種情況
第一種是聚合到 var a={}空類或者不是用function聲明的類中
1. 首先，需要一個合適的可以被聚合的類（給體），此時需要在本類的內(nèi)部進(jìn)行擴(kuò)展屬性，方法
var JSON={//寫到類的內(nèi)部
toJsonString:function () {
var output=[];
for(key in this){//this代表那個調(diào)用，就指向那個一個對象
output.push(key+"---->"+this[key]);
}
return output;
}
};
2. 制作一個聚合函數(shù)（最重要）
/*聚合函數(shù)
receivingClass：接受聚合內(nèi)容的類
givingClass：被聚合的目標(biāo)類
* */
function mixin(receivingClass,givingClass){
for(methodName in givingClass){
if(!receivingClass.__proto__[methodName]){//判斷當(dāng)前原型中是否含有即將要被聚合的方法，若沒有則聚合進(jìn)來
receivingClass.__proto__[methodName]=givingClass[methodName];//直接獲得類中的方法，因為方法是直接寫在方法內(nèi)部的。
}
}
}
3. 接受聚合的類（受體）
var get={name:"Text",age:20};
4. 實現(xiàn)將JSON類的方法聚合到類get中
mixin(get,JSON);//(受體，給體)
5. 使用get類中聚合的方法
document.write(get.toJsonString().join(","));
第二種是聚合用function聲明的類中
var a=function(){}
1. 首先，需要一個合適的可以被聚合的類（給體），此時需要在本類的原型對象上進(jìn)行擴(kuò)展屬性，方法
var JSON={};
JSON.prototype={//寫到類的原型對象上
toJsonString:function () {
var output=[];
for(key in this){//this代表那個調(diào)用，就指向那個一個對象
output.push(key+"---->"+this[key]);
}
return output;
}
}
2. 制作一個聚合函數(shù)
（2）制作聚合函數(shù)(receivingClass中聚合givingClass中的屬性，或者方法)
function mixin(receivingClass,givingClass) {
for(methodName in givingClass.prototype){
if(!receivingClass.prototype[methodName]){//判斷當(dāng)前原型中是否含有即將要被聚合的方法，若沒有則聚合進(jìn)來
receivingClass.prototype[methodName]=givingClass.prototype[methodName];
}
}
}
3. 接受 聚合的類（受體）
var o=function () {
this.name="聚合";
this.age=19;
}
4. 實現(xiàn)JSON類到o類的聚合（將JSON類中的方法聚合到o類中）
mixin(o,JSON);//（受體，給體）
5. 使用o類中聚合而來的方法
var useO=new o();
document.write(useO.toJsonString().join(","));
第二種圖解理解為：
該方式屬于類o上一層的聚合。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
在頁面數(shù)據(jù)處理的過程中都會不可避免的使用字符串的截取操作,下面這篇文章主要給大家介紹了關(guān)于js字符串截取指定字符前面/后面的字符串,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
js技巧--轉(zhuǎn)義符"\"的妙用...2007-01-01
在純靜態(tài)網(wǎng)站里，有時候會動態(tài)更新某個區(qū)域往會選擇?Pjax（swup、barba.js）去處理。本文主要和大家分享下Pjax下載動態(tài)加載插件方案，感興趣的可以了解一下2022-09-09
在 JavaScript 中,new 關(guān)鍵字不僅是面向?qū)ο缶幊痰年P(guān)鍵要素,還是創(chuàng)建實例的重要手段,本文將深入探討 new 關(guān)鍵字的使用,理解它在對象創(chuàng)建和構(gòu)造函數(shù)調(diào)用中的作用,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了淺談ECMAScript 中的Array類型，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文主要介紹了創(chuàng)建一般js對象的幾種方式。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
Flow之一個新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版，一個新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查，以提高開發(fā)效率和代碼質(zhì)量，本文給大家分享Flow之一個新的Javascript靜態(tài)類型檢查器，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
你知不知道JS對象遍歷順序，本文就來詳細(xì)的介紹了一下JS對象遍歷順序問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了如何在postman中添加cookie信息,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
今天又在無憂看到閉包的使用了，整理一下閉包的東西。2011-09-09