JS?中的類Public,Private?和?Protected詳解
前言
原文地址:dev.to/bhagatparwi…
即使 ES6 中引入了 class
關(guān)鍵字很好的模擬了類的行為以及使我們可以進(jìn)行面向?qū)ο缶幊蹋?JavaScript 中的類缺失了創(chuàng)建公共、私有和保護(hù)成員的能力。
若你之前使用過其他面向?qū)ο蟮木幊陶Z(yǔ)言,肯定知道內(nèi)部和外部接口的重要性。內(nèi)部接口引用的方法和屬性只能在類的內(nèi)部獲取。相反,外部接口的方法和屬性可以在內(nèi)外部都可獲取。
主要有三個(gè)關(guān)鍵字在起作用:public、protected 和 private。
- public:類的所有成員都可以被類的實(shí)例獲取。
- private:類成員只能在類中被訪問。
- protected:類成員在類以及子類中可以被訪問
在 JavaScript 中 protected 關(guān)鍵字是最難模擬的。
public
publick 是 JavaScript 中默認(rèn)的,如果從對(duì)象上可以獲取的東西,那也可以從它的實(shí)例上獲取。
const myObject = { name: "Parwinder", sayMyName: function () { return this.name; } } console.log(myObject.name); // Parwinder console.log(myObject.sayMyName()); // Parwinder
上面的例子中,我可以獲取屬性和方法不會(huì)產(chǎn)生任何問題,若你更傾向類語(yǔ)法:
class ObjectCreator { name; constructor(name) { this.name = name; } sayMyName() { return this.name; } } const myObject = new ObjectCreator("Parwinder"); console.log(myObject.name); // Parwinder console.log(myObject.sayMyName()); // Parwinder
private
JavaScript 中有很多方法創(chuàng)建私有變量,第一個(gè)是閉包:
function carMonitor() { var speed = 0; return { accelerate: function () { return speed++; } } } var car = new carMonitor(); var redCar = new carMonitor() console.log(car.accelerate()); // 0 console.log(car.accelerate()); // 1 console.log(redCar.accelerate()); // 0 console.log(redCar.accelerate()); // 1 console.log(car.accelerate()); // 2 console.log(redCar.accelerate()); // 2 console.log(speed); // speed is not defined
car 和 redCar 各自維護(hù)它們自己的 speed
變量并且外部無法獲取它。在構(gòu)造函數(shù)或類中,我們強(qiáng)制用戶通過方法來獲取屬性而不是直接讀寫。這也就是如何封裝代碼。
第二個(gè)方法就是使用 #
符號(hào)。
class ObjectCreator { #meaningOfLife; constructor(name) { this.#meaningOfLife = 42; } returnMeaningOfLife() { return this.#meaningOfLife; } #returnAMessage() { return "You will do great things in life"; } } const myObject = new ObjectCreator("Parwinder"); console.log(myObject.returnMeaningOfLife()); // 42 console.log(myObject["#meaningOfLife"]); // undefined console.log(myObject.#meaningOfLife); // SyntaxError console.log(myObject.#returnAMessage); // SyntaxError
從語(yǔ)言層面強(qiáng)制封裝了代碼,外部直接獲取 #
引用的字段則會(huì)報(bào)錯(cuò)。public 和 private 字段同時(shí)存在不會(huì)沖突,在同一個(gè)類中既可以有私有的 #meaningOfLife 也可以有公共的 meaningOfLife。
類中使用 # 符號(hào)來聲明私有成員是在 ES2019/ES10 中引入的。
protected
就像我前面說的在 JavaScript 中 protected 是三個(gè)方法中最難實(shí)現(xiàn)的。我能想到的途徑是通過只存在 getter 而沒有 setter 的方法來實(shí)現(xiàn) protected 。
若你有別的方法實(shí)現(xiàn),請(qǐng)分享一下!
class NameGenerator { _name; constructor(name) { this._name = name; } get name() { return this._name; } } let nameGenerator = new NameGenerator("John"); console.log(`My name is ${nameGenerator.name}`); // My name is John nameGenerator.name = "Jane"; // Cannot assign to 'name' because it is a read-only property.
到此這篇關(guān)于JS 中的類Public,Private 和 Protected詳解的文章就介紹到這了,更多相關(guān)JS Public,Private ,Protected內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)煙花和福字特效
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)放煙花特效和用字符“$”繪制“?!弊?,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2022-01-01使用typescript類型實(shí)現(xiàn)ThreeSum
這篇文章主要介紹了使用typescript類型實(shí)現(xiàn)ThreeSum,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以一下,希望對(duì)你學(xué)習(xí)又是幫助2022-08-08JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總
這篇文章主要介紹了js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法,以實(shí)例形式匯總并分析了幾種常用的JavaScript動(dòng)態(tài)加載腳本的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-11-11javascript的動(dòng)態(tài)加載、緩存、更新以及復(fù)用(一)
在做OA、MIS、ERP等信息管理類的項(xiàng)目,經(jīng)常會(huì)遇到引用很多js文件,這就需要用到動(dòng)態(tài)加載、緩存、更新以及復(fù)用等技術(shù),下面我們來討論下2014-06-06各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對(duì)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)(也稱倒計(jì)時(shí)跳轉(zhuǎn))做一下總結(jié),以備不時(shí)之需,經(jīng)常使用的朋友可以參考下2013-10-10