JavaScript 繼承 封裝 多態實現及原理詳解

面向對象的三大特性

封裝

所謂封裝，也就是把客觀事物封裝成抽象的類，而且類能夠把本身的數據和方法只讓可信的類或者對象操做，對不可信的進行信息隱藏。封裝是面向對象的特徵之一，是對象和類概念的主要特性。 簡單的說，一個類就是一個封裝了數據以及操做這些數據的代碼的邏輯實體。在一個對象內部，某些代碼或某些數據能夠是私有的，不能被外界訪問。經過這種方式，對象對內部數據提供了不一樣級別的保護，以防止程序中無關的部分意外的改變或錯誤的使用了對象的私有部分。

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

咱們也能夠將一些公用的方法，工具進行封裝，達到代碼複用，讓咱們的代碼更簡潔

繼承

所謂繼承是指可讓某個類型的對象得到另外一個類型的對象的屬性的方法。它支持按級分類的概念。繼承是指這樣一種能力：它可使用現有類的全部功能，並在無需從新編寫原來的類的狀況下對這些功能進行擴展。 經過繼承建立的新類稱爲「子類」或「派生類」，被繼承的類稱爲「基類」、「父類」或「超類」。繼承的過程，就是從通常到特殊的過程。要實現繼承，能夠經過「繼承」（Inheritance）和「組合」（Composition）來實現。繼承概念的實現方式有二類：實現繼承與接口繼承。實現繼承是指直接使用基類的屬性和方法而無需額外編碼的能力；接口繼承是指僅使用屬性和方法的名稱、可是子類必須提供實現的能力；

實現繼承的幾種方式

call繼承

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

上面代碼至關於函數b繼承了函數a的私有屬性，經過改變父類的this實現繼承

原型繼承

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，實現私有繼承私有，使用object.create實現公有繼承公有

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

這裏經過關鍵字extends實現子類繼承父類的私有和公有，這裏須要注意若是子類裏面寫了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

多態

所謂多態就是指一個類實例的相同方法在不一樣情形有不一樣表現形式。多態機制使具備不一樣內部結構的對象能夠共享相同的外部接口。這意味着，雖然針對不一樣對象的具體操做不一樣，但經過一個公共的類，它們（那些操做）能夠經過相同的方式予以調用。

重載

函數重載是指在同一做用域內，能夠有一組具備相同函數名，不一樣參數列表的函數，這組函數被稱爲重載函數。重載函數一般用來命名一組功能類似的函數，這樣作減小了函數名的數量，避免了名字空間的污染，對於程序的可讀性有很大的好處。

• js經過函數名找到對應的函數對象
• 而後根據函數按照定義時的參數，和表達式參數列表按順序匹配，多餘的參數捨去，不夠的參數按undefined處理
• 而後執行函數代碼。

// 能夠跟據arguments個數實現重載
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

重寫

「實例中的指針僅指向原型，而不是指向構造函數」。

「重寫原型對象切斷了現有原型與任何以前已經存在的對象實例之間的關係；它們引用的仍然是最初的原型」。

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();

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

面向對象的5大原則

• 單一職責原則
• 開放封閉原則
• 替換原則
• 依賴原則
• 接口分離原則

單一職責原則

單一職責原則就是咱們說的一個方法只作一件事，就好比如今的項目結構，就遵循了單一職責原則

開放封閉原則

開放封閉原則就是對修改關閉，對擴展開放

class a {
add(){
return 11
}
}
class b extends a{

}
let c = new b()
console.log(c.add()) // 111

咱們可使用extends繼承父類，能夠再b裏面修改add函數，實現對修改關閉，對擴展開放

以上就是本文的所有內容，但願對你們的學習有所幫助

您可能感興趣的文章:

• JavaScript使用prototype原型實現的封裝繼承多態示例
• JavaScript實現多態和繼承的封裝操做示例
• Javascript基於對象三大特性（封裝性、繼承性、多態性）
• 不錯的一篇關於javascript-prototype繼承
• js封裝成插件的步驟方法
• javascript 面向對象編程基礎 多態

文章同步發佈： https://www.geek-share.com/detail/2775366797.html