欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript繼承與聚合實例詳解

 更新時間：2019年01月22日 10:51:54   作者：吳封斌技術(shù)博客  
這篇文章主要介紹了JavaScript繼承與聚合,結(jié)合實例形式較為詳細(xì)的分析了javascript實現(xiàn)繼承與聚合的相關(guān)概念、原理與操作技巧,需要的朋友可以參考下

本文實例講述了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é)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • JS實現(xiàn)復(fù)選框的全選和批量刪除功能

    JS實現(xiàn)復(fù)選框的全選和批量刪除功能

    本文主要介紹了JS實現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • JavaScript面試題(指針、帽子和女朋友)

    JavaScript面試題(指針、帽子和女朋友)

    本文小編給大家分享一道js面試題--指針、帽子和女朋友的題目，非常有意思，感興趣的朋友參考下吧
    2016-11-11
  • iframe一次下載多個文件實例

    iframe一次下載多個文件實例

    這篇文章主要為大家介紹了iframe一次下載多個文件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • js樹形控件腳本代碼

    js樹形控件腳本代碼

    非常不錯的js樹形菜單
    2008-07-07
  • JavaScript中常用的簡潔高級技巧總結(jié)

    JavaScript中常用的簡潔高級技巧總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中常用的簡潔高級技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 利用JavaScript檢測CPU使用率自己寫的

    利用JavaScript檢測CPU使用率自己寫的

    這篇文章主要介紹了自己寫的一個利用JavaScript檢測CPU使用率的方法,需要的朋友可以參考下
    2014-03-03
  • 純JS打造網(wǎng)頁中checkbox和radio的美化效果

    純JS打造網(wǎng)頁中checkbox和radio的美化效果

    這篇文章主要介紹了純JS打造網(wǎng)頁中checkbox和radio的美化效果,代碼簡單易懂，非常不錯具有參考借鑒價值，需要的朋友可以參考下
    2016-10-10
  • 淺析JavaScript中l(wèi)et與const命令的區(qū)別

    淺析JavaScript中l(wèi)et與const命令的區(qū)別

    這篇文章主要為大家詳細(xì)介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的可以參考下
    2023-09-09
  • 深度解析TypeScript裝飾器

    深度解析TypeScript裝飾器

    TypeScript?是一種強(qiáng)類型的超集?JavaScript,它為開發(fā)者提供了靜態(tài)類型檢查、代碼提示以及更好的可維護(hù)性,本文將深入解析?TypeScript?裝飾器,從基礎(chǔ)概念到高級用法,逐步探討其作用、原理以及實際應(yīng)用場景,以幫助你更好地理解和利用這一功能,需要的朋友可以參考下
    2023-09-09
  • 不用jQuery實現(xiàn)的動畫效果代碼

    不用jQuery實現(xiàn)的動畫效果代碼

    jQuery 框架用的人越來越多了, 無論是性能還是功能強(qiáng)大都不用多說.
    2010-11-11

最新評論