JavaScript 繼承 封裝 多態(tài)實(shí)現(xiàn)及原理詳解
面向?qū)ο蟮娜筇匦?/strong>
封裝
所謂封裝,也就是把客觀事物封裝成抽象的類(lèi),并且類(lèi)可以把自己的數(shù)據(jù)和方法只讓可信的類(lèi)或者對(duì)象操作,對(duì)不可信的進(jìn)行信息隱藏。封裝是面向?qū)ο蟮奶卣髦?,是?duì)象和類(lèi)概念的主要特性。 簡(jiǎn)單的說(shuō),一個(gè)類(lèi)就是一個(gè)封裝了數(shù)據(jù)以及操作這些數(shù)據(jù)的代碼的邏輯實(shí)體。在一個(gè)對(duì)象內(nèi)部,某些代碼或某些數(shù)據(jù)可以是私有的,不能被外界訪(fǎng)問(wèn)。通過(guò)這種方式,對(duì)象對(duì)內(nèi)部數(shù)據(jù)提供了不同級(jí)別的保護(hù),以防止程序中無(wú)關(guān)的部分意外的改變或錯(cuò)誤的使用了對(duì)象的私有部分。
我們?cè)趘ue項(xiàng)目中使用混入將公有代碼提出來(lái),混入到每個(gè)需要的組件中,讓我們的代碼更簡(jiǎn)潔
我們也可以將一些公用的方法,工具進(jìn)行封裝,達(dá)到代碼復(fù)用,讓我們的代碼更簡(jiǎn)潔
繼承
所謂繼承是指可以讓某個(gè)類(lèi)型的對(duì)象獲得另一個(gè)類(lèi)型的對(duì)象的屬性的方法。它支持按級(jí)分類(lèi)的概念。繼承是指這樣一種能力:它可以使用現(xiàn)有類(lèi)的所有功能,并在無(wú)需重新編寫(xiě)原來(lái)的類(lèi)的情況下對(duì)這些功能進(jìn)行擴(kuò)展。 通過(guò)繼承創(chuàng)建的新類(lèi)稱(chēng)為“子類(lèi)”或“派生類(lèi)”,被繼承的類(lèi)稱(chēng)為“基類(lèi)”、“父類(lèi)”或“超類(lèi)”。繼承的過(guò)程,就是從一般到特殊的過(guò)程。要實(shí)現(xiàn)繼承,可以通過(guò)“繼承”(Inheritance)和“組合”(Composition)來(lái)實(shí)現(xiàn)。繼承概念的實(shí)現(xiàn)方式有二類(lèi):實(shí)現(xiàn)繼承與接口繼承。實(shí)現(xiàn)繼承是指直接使用基類(lèi)的屬性和方法而無(wú)需額外編碼的能力;接口繼承是指僅使用屬性和方法的名稱(chēng)、但是子類(lèi)必須提供實(shí)現(xiàn)的能力;
實(shí)現(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的私有屬性,通過(guò)改變父類(lèi)的this實(shí)現(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()) // 你好
原型繼承通過(guò)將父類(lèi)的實(shí)例賦值給子類(lèi)的原型,這種方法子類(lèi)可以繼承父類(lèi)的私有方法也可以繼承父類(lèi)的私有方法
寄生組合繼承
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,實(shí)現(xiàn)私有繼承私有,使用object.create實(shí)現(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ò)關(guān)鍵字extends實(shí)現(xiàn)子類(lèi)繼承父類(lèi)的私有和公有,這里需要注意如果子類(lèi)里面寫(xiě)了constructor,就必須寫(xiě)super否則會(huì)報(bào)錯(cuò)
class parent{ constructor(){ this.a=1 } name(){ return 2 } } class child extends parent{ constructor(){ // 這里不寫(xiě)super會(huì)報(bào)錯(cuò),報(bào)錯(cuò)信息如下 } } // ncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new child
多態(tài)
所謂多態(tài)就是指一個(gè)類(lèi)實(shí)例的相同方法在不同情形有不同表現(xiàn)形式。多態(tài)機(jī)制使具有不同內(nèi)部結(jié)構(gòu)的對(duì)象可以共享相同的外部接口。這意味著,雖然針對(duì)不同對(duì)象的具體操作不同,但通過(guò)一個(gè)公共的類(lèi),它們(那些操作)可以通過(guò)相同的方式予以調(diào)用。
重載
函數(shù)重載是指在同一作用域內(nèi),可以有一組具有相同函數(shù)名,不同參數(shù)列表的函數(shù),這組函數(shù)被稱(chēng)為重載函數(shù)。重載函數(shù)通常用來(lái)命名一組功能相似的函數(shù),這樣做減少了函數(shù)名的數(shù)量,避免了名字空間的污染,對(duì)于程序的可讀性有很大的好處。
- js通過(guò)函數(shù)名找到對(duì)應(yīng)的函數(shù)對(duì)象
- 然后根據(jù)函數(shù)按照定義時(shí)的參數(shù),和表達(dá)式參數(shù)列表按順序匹配,多余的參數(shù)舍去,不夠的參數(shù)按undefined處理
- 然后執(zhí)行函數(shù)代碼。
// 可以跟據(jù)arguments個(gè)數(shù)實(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
重寫(xiě)
“實(shí)例中的指針僅指向原型,而不是指向構(gòu)造函數(shù)”。
“重寫(xiě)原型對(duì)象切斷了現(xiàn)有原型與任何之前已經(jīng)存在的對(duì)象實(shí)例之間的關(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();
上面這段代碼通過(guò)使用寄生組合繼承,實(shí)現(xiàn)子類(lèi)私有繼承父類(lèi)私有,子類(lèi)公有繼承父類(lèi)公有,達(dá)到重寫(xiě)父類(lèi)的showProper
面向?qū)ο蟮?大原則
- 單一職責(zé)原則
- 開(kāi)放封閉原則
- 替換原則
- 依賴(lài)原則
- 接口分離原則
單一職責(zé)原則
單一職責(zé)原則就是我們說(shuō)的一個(gè)方法只做一件事,就比如現(xiàn)在的項(xiàng)目結(jié)構(gòu),就遵循了單一職責(zé)原則
開(kāi)放封閉原則
開(kāi)放封閉原則就是對(duì)修改關(guān)閉,對(duì)擴(kuò)展開(kāi)放
class a { add(){ return 11 } } class b extends a{ } let c = new b() console.log(c.add()) // 111
我們可以使用extends繼承父類(lèi),可以再b里面修改add函數(shù),實(shí)現(xiàn)對(duì)修改關(guān)閉,對(duì)擴(kuò)展開(kāi)放
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript基于對(duì)象三大特性(封裝性、繼承性、多態(tài)性)
- JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作示例
- JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
- Javascript 面向?qū)ο筇匦?/a>
- 利用javascript的面向?qū)ο蟮奶匦詫?shí)現(xiàn)限制試用期
- javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級(jí)特性經(jīng)典教程(值得收藏)
- javascript 的面向?qū)ο筇匦詤⒖?/a>
- js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解
- js面向?qū)ο笾R?jiàn)創(chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- javascript 面向?qū)ο缶幊袒A(chǔ) 多態(tài)
- JavaScript面向?qū)ο笾甈rototypes和繼承
- JavaScript面向?qū)ο笕齻€(gè)基本特征實(shí)例詳解【封裝、繼承與多態(tài)】
相關(guān)文章
localStorage設(shè)置有效期和過(guò)期時(shí)間的簡(jiǎn)單方法
眾所周知前端三大緩存,cookie,sessionStorage,localStorage,下面這篇文章主要給大家介紹了關(guān)于localStorage設(shè)置有效期和過(guò)期時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-02-02viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁(yè)面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js,這里為分享一下使用方法,需要的朋友可以參考下2020-04-04關(guān)于uniapp中onReachBottomDistance屬性的使用
這篇文章主要介紹了關(guān)于uniapp中onReachBottomDistance屬性的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Uniapp如何封裝網(wǎng)絡(luò)請(qǐng)求方法demo
這篇文章主要為大家介紹了Uniapp如何封裝網(wǎng)絡(luò)請(qǐng)求方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10