JavaScript中繼承、封裝、多態(tài)實現(xiàn)的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下JavaScript中繼承、封裝、多態(tài)實現(xiàn)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)服務(wù)項目包括吉木乃網(wǎng)站建設(shè)、吉木乃網(wǎng)站制作、吉木乃網(wǎng)頁制作以及吉木乃網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，吉木乃網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到吉木乃省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

面向?qū)ο蟮娜筇匦?/strong>

封裝

所謂封裝，也就是把客觀事物封裝成抽象的類，并且類可以把自己的數(shù)據(jù)和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏。封裝是面向?qū)ο蟮奶卣髦唬菍ο蠛皖惛拍畹闹饕匦浴?簡單的說，一個類就是一個封裝了數(shù)據(jù)以及操作這些數(shù)據(jù)的代碼的邏輯實體。在一個對象內(nèi)部，某些代碼或某些數(shù)據(jù)可以是私有的，不能被外界訪問。通過這種方式，對象對內(nèi)部數(shù)據(jù)提供了不同級別的保護，以防止程序中無關(guān)的部分意外的改變或錯誤的使用了對象的私有部分。

我們在vue項目中使用混入將公有代碼提出來，混入到每個需要的組件中，讓我們的代碼更簡潔

我們也可以將一些公用的方法，工具進行封裝，達到代碼復(fù)用，讓我們的代碼更簡潔

繼承

所謂繼承是指可以讓某個類型的對象獲得另一個類型的對象的屬性的方法。它支持按級分類的概念。繼承是指這樣一種能力：它可以使用現(xiàn)有類的所有功能，并在無需重新編寫原來的類的情況下對這些功能進行擴展。 通過繼承創(chuàng)建的新類稱為“子類”或“派生類”，被繼承的類稱為“基類”、“父類”或“超類”。繼承的過程，就是從一般到特殊的過程。要實現(xiàn)繼承，可以通過“繼承”（Inheritance）和“組合”（Composition）來實現(xiàn)。繼承概念的實現(xiàn)方式有二類：實現(xiàn)繼承與接口繼承。實現(xiàn)繼承是指直接使用基類的屬性和方法而無需額外編碼的能力；接口繼承是指僅使用屬性和方法的名稱、但是子類必須提供實現(xiàn)的能力；

實現(xiàn)繼承的幾種方式

call繼承

function a (){
    this.c=111
  }
  function b(){
    a.call(this)
  }
  let d = new b()
  console.log(d.c) // 111

上面代碼相當(dāng)于函數(shù)b繼承了函數(shù)a的私有屬性，通過改變父類的this實現(xiàn)繼承

原型繼承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    // a.call(this)
  }
  b.prototype=new a()
  b.constructor=b
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

原型繼承通過將父類的實例賦值給子類的原型，這種方法子類可以繼承父類的私有方法也可以繼承父類的私有方法

寄生組合繼承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    a.call(this)
  }
  b.prototype=Object.create(a.prototype)
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

寄生組合繼承就是使用call繼承改變this，實現(xiàn)私有繼承私有，使用object.create實現(xiàn)公有繼承公有

es6 extends 繼承

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    
  }
  let A = new child()
  console.log(A.a) // 1
  console.log(A.name()) // 2

這里通過關(guān)鍵字extends實現(xiàn)子類繼承父類的私有和公有，這里需要注意如果子類里面寫了constructor，就必須寫super否則會報錯

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    constructor(){
    // 這里不寫super會報錯，報錯信息如下
    }
  }
  // ncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new child

多態(tài)

所謂多態(tài)就是指一個類實例的相同方法在不同情形有不同表現(xiàn)形式。多態(tài)機制使具有不同內(nèi)部結(jié)構(gòu)的對象可以共享相同的外部接口。這意味著，雖然針對不同對象的具體操作不同，但通過一個公共的類，它們（那些操作）可以通過相同的方式予以調(diào)用。

重載

函數(shù)重載是指在同一作用域內(nèi)，可以有一組具有相同函數(shù)名，不同參數(shù)列表的函數(shù)，這組函數(shù)被稱為重載函數(shù)。重載函數(shù)通常用來命名一組功能相似的函數(shù)，這樣做減少了函數(shù)名的數(shù)量，避免了名字空間的污染，對于程序的可讀性有很大的好處。

  • js通過函數(shù)名找到對應(yīng)的函數(shù)對象

  • 然后根據(jù)函數(shù)按照定義時的參數(shù)，和表達式參數(shù)列表按順序匹配，多余的參數(shù)舍去，不夠的參數(shù)按undefined處理

  • 然后執(zhí)行函數(shù)代碼。

 // 可以跟據(jù)arguments個數(shù)實現(xiàn)重載
  function add() {
    var sum = 0 ;
    for ( var i = 0 ; i < arguments.length; i ++ ) {
      sum += arguments[i];
    }
    return sum;
  }
  console.log(add()) // 0
  console.log(add(1,2)) // 3
  console.log(add(1,2,3)) // 6

重寫

“實例中的指針僅指向原型，而不是指向構(gòu)造函數(shù)”。

“重寫原型對象切斷了現(xiàn)有原型與任何之前已經(jīng)存在的對象實例之間的關(guān)系；它們引用的仍然是最初的原型”。

var parent = function(name,age){
  this.name = name;
  this.age = age;
}
 
parent.prototype.showProper = function(){
  console.log(this.name+":"+this.age);
}
 
var child = function(name,age){
  parent.call(this,name,age);
}
 
// inheritance
child.prototype = Object.create(parent.prototype);
// child.prototype = new parent();
child.prototype.constructor = child;
 
// rewrite function
child.prototype.showProper = function(){
  console.log('I am '+this.name+":"+this.age);
}

var obj = new child('wozien','22');
obj.showProper();

上面這段代碼通過使用寄生組合繼承，實現(xiàn)子類私有繼承父類私有，子類公有繼承父類公有，達到重寫父類的showProper

面向?qū)ο蟮?大原則

  • 單一職責(zé)原則

  • 開放封閉原則

  • 替換原則

  • 依賴原則

  • 接口分離原則

單一職責(zé)原則

單一職責(zé)原則就是我們說的一個方法只做一件事，就比如現(xiàn)在的項目結(jié)構(gòu)，就遵循了單一職責(zé)原則

開放封閉原則

開放封閉原則就是對修改關(guān)閉，對擴展開放

class a {
   add(){
     return 11
   }
 }
 class b extends a{
   
 }
 let c = new b()
 console.log(c.add()) // 111

我們可以使用extends繼承父類，可以再b里面修改add函數(shù)，實現(xiàn)對修改關(guān)閉，對擴展開放。

以上是“JavaScript中繼承、封裝、多態(tài)實現(xiàn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：JavaScript中繼承、封裝、多態(tài)實現(xiàn)的示例分析-創(chuàng)新互聯(lián)
URL標(biāo)題：http://muchs.cn/article6/cesdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站營銷、搜索引擎優(yōu)化、ChatGPT、電子商務(wù)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)