瞭解過面向對象的同窗應該都知道,面向對象三個基本特徵是:封裝、繼承、多態,可是對於這三個詞具體可能不太瞭解。對於前端來說接觸最多的可能就是封裝
與繼承
,對於多態來講可能就不是那麼瞭解了。前端
封裝
在說封裝之先了解一下封裝究竟是什麼?java
什麼是封裝
封裝:將對象運行所需的資源封裝在程序對象中——基本上,是方法和數據。對象是「公佈其接口」。其餘附加到這些接口上的對象不須要關心對象實現的方法便可使用這個對象。這個概念就是「不要告訴我你是怎麼作的,只要作就能夠了。」對象能夠看做是一個自我包含的原子。對象接口包括了公共的方法和初始化數據。(節選自百度百科)編程
我對於封裝的理解,可能還有一個步驟就是抽離
,首先你要清楚在一個對代碼中你應該抽離那些屬性方法,有了這些爲基礎才能更好的作好封裝。模塊化
封裝無非就是其屬性和方法封裝。函數
class Employees { constructor(name,age){ this.name = name; this.age = age; } getInfo(){ let {name,age} = this; return {name,age}; } static seyHi(){ console.log("Hi"); } } let lisi = new Employees("Aaron",18); lisi.seyHi(); // lisi.seyHi is not a function lisi.getInfo(); // {name: "Aaron", age: 18} Employees.seyHi(); // Hi
在Employees
中抽出的公共屬性有name
,age
,公共方法有getInfo
,seyHi
,然而getInfo
與seyHi
所不一樣的是seyHi
使用了static
修飾符,改變其爲靜態方法,seyHi
只屬於Employees
這個類。然而getInfo
方法則是屬於實例的。this
這裏使用了static
對seyHi
方法對其進行了訪問權限的封裝。指針
再舉一個例子。code
Promise.then() // Promise.then is not a function let p1 = new Promise(() => {}) p1.then(); // Promise {<pending>} Promise.all([1]); // Promise {<resolved>: Array(1)}
從上面的代碼中能夠看出Promise
也使用了static
對其方法的訪問權限進行了封裝。對象
繼承
繼承:說到繼承並不太陌生,繼承可使得子類具備父類的各類的公有屬性
和公有方法
。而不須要再次編寫相同的代碼。在令子類別繼承父類別的同時,能夠從新定義某些屬性,並重寫某些方法,即覆蓋父類別的原有屬性和方法,使其得到與父類別不一樣的功能。(節選自百度百科)繼承
子類繼承父類後,子類具備父類屬性和方法,然而也一樣具有本身所獨有的屬性和方法,也就是說,子類的功能要比父類多或相同,不會比父類少。
class Employees { constructor(name){ this.name = name; } getName(){ console.log(this.name) } static seyHi(){ console.log("Hi"); } } class Java extends Employees{ constructor(name){ super(name); } work(){ console.log("作後臺工做"); } } let java = new Java("Aaron"); java.getName(); java.work(); // java.seyHi(); // java.seyHi is not a function
從上面的例子能夠看出繼承不會繼承父類的靜態方法,只會繼承父類的公有屬性與方法。這一點須要注意。
子類繼承以後既擁有了getName
方法,一樣也擁有本身的worker
方法。
多態
多態:按字面的意思就是「多種狀態」,容許將子類類型的指針賦值給父類類型的指針。(節選自百度百科)
說白了多態就是相同的事物,一個接口,多種實現,同時在最初的程序設定時,有可能會根據程序需求的不一樣,而不肯定哪一個函數實現,經過多態不須要修改源代碼,就能夠實現一個接口多種解決方案。
多態的表現形式重寫與重載。
什麼是重寫
重寫:子類可繼承父類中的方法,而不須要從新編寫相同的方法。但有時子類並不想原封不動地繼承父類的方法,而是想做必定的修改,這就須要採用方法的重寫。方法重寫又稱方法覆蓋。(節選自百度百科)
class Employees { constructor(name){ this.name = name; } seyHello(){ console.log("Hello") } getName(){ console.log(this.name); } } class Java extends Employees{ constructor(name){ super(name); } seyHello(){ console.log(`Hello,個人名字是${this.name},我是作Java工做的。`) } } const employees = new Employees("Aaron"); const java = new Java("Leo"); employees.seyHello(); // Hello java.seyHello(); // Hello,個人名字是Leo,我是作Java工做的。 employees.getName(); // Aaron java.getName(); // Leo
經過上面的代碼能夠看出Java
繼承了Employees
,然而子類與父類中都存在seyHello
方法,爲了知足不一樣的需求子類繼承父類以後重寫了seyHello
方法。因此在調用的時候會獲得不一樣的結果。既然子類繼承了父類,子類也一樣擁有父類的getName
方法。
什麼是重載
重載就是函數或者方法有相同的名稱,可是參數列表不相同的情形,這樣的同名不一樣參數的函數或者方法之間,互相稱之爲重載函數或者方法。(節選自百度百科)
class Employees { constructor(arg){ let obj = null; switch(typeof arg) { case "string": obj = new StringEmployees(arg); break; case "object": obj = new ObjEmployees(ObjEmployees); break; case "number": obj = new NumberEmployees(ObjEmployees); break; } return obj; } } class ObjEmployees { constructor(arg){ console.log("ObjEmployees") } } class StringEmployees { constructor(arg){ console.log("StringEmployees") } } class NumberEmployees { constructor(arg){ console.log("NumberEmployees") } } new Employees({}) // ObjEmployees new Employees("123456") // StringEmployees new Employees(987654) // NumberEmployees
由於JavaScript是沒有重載的概念的因此要本身編寫邏輯完成重載。
在上面的代碼中定義了Employees
,ObjEmployees
,StringEmployees
,NumberEmployees
類,在實例化Employees
的時候在constructor
裏面進行了判斷,根據參數的不一樣返回不一樣的對應的類。
這樣完成了一個簡單的類重載。
總結
在編程的是多多運用這個寫思想對其編程時頗有用的,可以使你的代碼達到高複用以及可維護。