JS?中的類Public,Private?和?Protected詳解
前言
原文地址：dev.to/bhagatparwi…
即使 ES6 中引入了 class 關鍵字很好的模擬了類的行為以及使我們可以進行面向對象編程，但 JavaScript 中的類缺失了創(chuàng)建公共、私有和保護成員的能力。
若你之前使用過其他面向對象的編程語言，肯定知道內(nèi)部和外部接口的重要性。內(nèi)部接口引用的方法和屬性只能在類的內(nèi)部獲取。相反，外部接口的方法和屬性可以在內(nèi)外部都可獲取。
主要有三個關鍵字在起作用：public、protected 和 private。
- public：類的所有成員都可以被類的實例獲取。
- private：類成員只能在類中被訪問。
- protected：類成員在類以及子類中可以被訪問
在 JavaScript 中 protected 關鍵字是最難模擬的。
public
publick 是 JavaScript 中默認的，如果從對象上可以獲取的東西，那也可以從它的實例上獲取。
const myObject = {
name: "Parwinder",
sayMyName: function () {
return this.name;
}
}
console.log(myObject.name); // Parwinder
console.log(myObject.sayMyName()); // Parwinder上面的例子中，我可以獲取屬性和方法不會產(chǎn)生任何問題，若你更傾向類語法：
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()); // Parwinderprivate
JavaScript 中有很多方法創(chuàng)建私有變量，第一個是閉包：
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 definedcar 和 redCar 各自維護它們自己的 speed 變量并且外部無法獲取它。在構造函數(shù)或類中，我們強制用戶通過方法來獲取屬性而不是直接讀寫。這也就是如何封裝代碼。
第二個方法就是使用 # 符號。
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從語言層面強制封裝了代碼，外部直接獲取 # 引用的字段則會報錯。public 和 private 字段同時存在不會沖突，在同一個類中既可以有私有的 #meaningOfLife 也可以有公共的 meaningOfLife。
類中使用 # 符號來聲明私有成員是在 ES2019/ES10 中引入的。
protected
就像我前面說的在 JavaScript 中 protected 是三個方法中最難實現(xiàn)的。我能想到的途徑是通過只存在 getter 而沒有 setter 的方法來實現(xiàn) protected 。
若你有別的方法實現(xiàn)，請分享一下！
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.到此這篇關于JS 中的類Public,Private 和 Protected詳解的文章就介紹到這了,更多相關JS Public，Private ，Protected內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文為大家詳細介紹下JavaScript怎么將相對地址轉換為絕對地址，具體的示例如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
本文主要介紹了javascript的異步編程相關知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了Ionic3 UI組件之Gallery Modal的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
js實現(xiàn)完美兼容各大瀏覽器的人民幣大小寫相互轉換
在基于網(wǎng)頁的打印輸出或報表中，經(jīng)常會牽扯到金額的大寫，每次都打上去很麻煩，所以想法用一個JavaScript客戶端腳本來實現(xiàn)自動轉換，只需在需要顯示大寫金額的時候調用該JS函數(shù)，下面我們就來匯總下吧2015-10-10
給指定元素的后面追加一些自己想要實現(xiàn)的效果或者是一些屬性之類的，有木有遇到過，接下來為大家詳細介紹下追加的實現(xiàn)代碼，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了純JS代碼實現(xiàn)隔行變色鼠標移入高亮的相關資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
看看執(zhí)行后有什么效果,無論textbox1.text是什么值,都會時放條件判斷.為什么呢2009-06-06
這篇文章主要介紹了js數(shù)組對象里面如何獲取某個屬性值相等的對象問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文小編給大家分享一道js面試題--指針、帽子和女朋友的題目，非常有意思，感興趣的朋友參考下吧2016-11-11
淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問題
下面小編就為大家?guī)硪黄獪\談javascript控制HTML5的全屏操控,瀏覽器兼容的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10