JavaScript面向對象三個基本特征實例詳解【封裝、繼承與多態】
本文實例講述了JavaScript面向對象三個基本特征。分享給大家供大家參考,具體如下:
了解過面向對象的同學應該都知道,面向對象三個基本特征是:封裝、繼承、多態,但是對于這三個詞具體可能不太了解。對于前端來講接觸最多的可能就是封裝與繼承,對于多態來說可能就不是那么了解了。
封裝在說封裝之先了解一下封裝到底是什么?
什么是封裝封裝:將對象運行所需的資源封裝在程序對象中——基本上,是方法和數據。對象是“公布其接口”。其他附加到這些接口上的對象不需要關心對象實現的方法即可使用這個對象。這個概念就是“不要告訴我你是怎么做的,只要做就可以了。”對象可以看作是一個自我包含的原子。對象接口包括了公共的方法和初始化數據。(節選自百度百科)
我對于封裝的理解,可能還有一個步驟就是抽離,首先你要清楚在一個對代碼中你應該抽離那些屬性方法,有了這些為基礎才能更好的做好封裝。
封裝無非就是其屬性和方法封裝。
類:封裝對象的屬性和行為 方法:封裝具體邏輯功能 訪問封裝:訪問修飾封裝無非就是對其訪問權限進行封裝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 functionlisi.getInfo(); // {name: 'Aaron', age: 18}Employees.seyHi(); // Hi
在Employees中抽出的公共屬性有name,age,公共方法有getInfo,seyHi,然而getInfo與seyHi所不同的是seyHi使用了static修飾符,改變其為靜態方法,seyHi只屬于Employees這個類。然而getInfo方法則是屬于實例的。
這里使用了static對seyHi方法對其進行了訪問權限的封裝。
再舉一個例子。
Promise.then() // Promise.then is not a functionlet 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(); // Hellojava.seyHello(); // Hello,我的名字是Leo,我是做Java工作的。employees.getName(); // Aaronjava.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({}) // ObjEmployeesnew Employees('123456') // StringEmployeesnew Employees(987654) // NumberEmployees
因為JavaScript是沒有重載的概念的所以要自己編寫邏輯完成重載。
在上面的代碼中定義了Employees,ObjEmployees,StringEmployees,NumberEmployees類,在實例化Employees的時候在constructor里面進行了判斷,根據參數的不同返回不同的對應的類。
這樣完成了一個簡單的類重載。
總結 封裝可以隱藏實現細節,使得代碼模塊化; 繼承可以擴展已存在的代碼模塊(類),它們的目的都是為了——代碼重用。 多態就是相同的事物,調用其相同的方法,參數也相同時,但表現的行為卻不同。多態分為兩種,一種是行為多態與對象的多態。在編程的是多多運用這個寫思想對其編程時很有用的,能夠使你的代碼達到高復用以及可維護。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章:
