JS多型封裝繼承

js是一種基於物件的語言，在js中幾乎所有的東西都可以看成是乙個物件，但是js中的物件模型和大多數物件導向語言的物件模型不太一樣，因此理解js中物件導向思想十分重要，接下來本篇文章將從多型、封裝、繼承三個基本特徵來理解js的物件導向思想

同一操作作用於不同的物件上面，可以產生不同的解釋和不同的執行結果，也就是說，給不同的物件傳送同乙個訊息時，這些物件會根據這個訊息分別給出不同的反饋。

舉個例子：假設家裡養了乙隻貓和乙隻狗，兩隻寵物都要吃飯，但是吃的東西不太一樣，根據主人的吃飯命令，貓要吃魚，狗要吃肉，這就包含了多型的思想在裡面，用js**來看就是：

let peteat = function (pet)  
let dog = function () {}
dog.prototype.eat = function () 
let cat = function () {}
cat.prototype.eat = function () 
peteat(new dog())
peteat(new cat())

上面這段**展示的就是物件的多型性，由於js是一門動態型別語言，變數型別在執行時是可變的，因此乙個js物件既可以是dog型別的物件也可以是cat型別的物件，js物件多型性是與生俱來的，而在靜態型別語言中，編譯時會進行型別匹配檢查，如果想要乙個物件既表示dog型別又表示cat型別在編譯的時候就會報錯，當然也會有解決辦法，一般會通過繼承來實現向上轉型，這裡感興趣的可以去對比一下靜態語言的物件多型性。

多型的作用是通過把過程化的條件分支語句轉化為物件的多型性，從而消除這些條件分支語句，舉個例子：還是上面寵物吃飯的問題，如果在沒有使用物件的多型性之前**可能是這樣是的：

let peteat = function (pet)  else if (pet instanceof cat) 
}let dog = function () {}
let cat = function () {}
peteat(new dog())
peteat(new cat())

通過條件語句來判斷寵物的型別決定吃什麼，當家裡再養金魚，就需要再加乙個條件分支，隨著新增的寵物越來越多，條件語句的分支就會越來越多，按照上面多型的寫法，就只需要新增物件和方法就行，解決了條件分支語句的問題

封裝的目的是將資訊隱藏，一般來說封裝包括封裝資料、封裝實現，接下來就逐一來看：

由於js的變數定義沒有private、protected、public等關鍵字來提供許可權訪問，因此只能依賴作用域來實現封裝特性，來看例子

var package = (function () 
}})()
console.log(package.getinner()) // test
console.log(package.inner) // undefined

封裝實現即隱藏實現細節、設計細節，封裝使得物件內部的變化對其他物件而言是不可見的，物件對它自己的行為負責，其他物件或者使用者都不關心它的內部實現，封裝使得物件之間的耦合變鬆散，物件之間只通過暴露的api介面來通訊。

封裝實現最常見的就是jquery、zepto、lodash這類js封裝庫中，使用者在使用的時候並不關心其內部實現，只要它們提供了正確的功能即可

廣州品牌設計公司

繼承指的是可以讓某個型別的物件獲得另乙個型別的物件的屬性和方法，js中實現繼承的方式有多種，接下來就看看js實現繼承的方式

function pet (name) 
}function cat (name) 
let cat = new cat('毛球')
console.log(cat.type) // 寵物
cat.getname() // 毛球

通過呼叫父建構函式的call方法實現了繼承，但是這種實現有乙個問題，父類的方法是定義在建構函式內部的，對子類是不可見的

原型繼承的本質就是找到乙個物件作為原型並轉殖它。這句話怎麼理解，舉個例子：

function pet (name) 
pet.prototype.getname = function () 
let p = new pet('毛球')
console.log(p.name) // 毛球
console.log(p.getname()) // 毛球
console.log(object.getprototypeof(p) === pet.prototype) // true

上面這段**中p物件實際上就是通過pet.prototype的轉殖和一些額外操作得來的，有了上面的**基礎，接下來來看乙個簡單的原型繼承**：

let pet = 
let cat = function () {}
cat.prototype = pet
let c = new cat()
console.log(c.name) // 毛球

來分析一下這段引擎做了哪幾件事：

上面的**實現原型繼承看起來有點繞，實際上在es5提供了obejct.create()方法來實現原型繼承，舉個例子：

function pet (name) 
pet.prototype.getname = function () 
let c = object.create(new pet('毛球'))
console.log(c.name) // 毛球
console.log(c.getname()) // 毛球

組合繼承即使用原型鏈實現對原型屬性和方法的繼承，通過建構函式實現對例項屬性的繼承，舉個例子：

function pet (name) 
pet.prototype.getname = function () 
function cat (name) 
cat.prototype = new pet()
let c = new cat('毛球')
console.log(c.name) // 毛球
console.log(c.getname()) // 毛球

JS多型封裝繼承

js封裝繼承多型

封裝，繼承，多型

繼承封裝多型

JS多型封裝繼承

js封裝 繼承 多型

封裝，繼承，多型

繼承 封裝 多型

相關推薦

js封裝繼承多型

繼承封裝多型