JS?中的類Public,Private?和?Protected詳解
前言
原文地址:dev.to/bhagatparwi…
即使 ES6 中引入了 class
關鍵字很好的模擬了類的行為以及使我們可以進行面向對象編程,但 JavaScript 中的類缺失了創(chuàng)建公共、私有和保護成員的能力。
若你之前使用過其他面向對象的編程語言,肯定知道內部和外部接口的重要性。內部接口引用的方法和屬性只能在類的內部獲取。相反,外部接口的方法和屬性可以在內外部都可獲取。
主要有三個關鍵字在起作用: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
上面的例子中,我可以獲取屬性和方法不會產生任何問題,若你更傾向類語法:
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)建私有變量,第一個是閉包:
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 各自維護它們自己的 speed
變量并且外部無法獲取它。在構造函數或類中,我們強制用戶通過方法來獲取屬性而不是直接讀寫。這也就是如何封裝代碼。
第二個方法就是使用 #
符號。
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 是三個方法中最難實現的。我能想到的途徑是通過只存在 getter 而沒有 setter 的方法來實現 protected 。
若你有別的方法實現,請分享一下!
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現方法
本文通過實例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06javascript的動態(tài)加載、緩存、更新以及復用(一)
在做OA、MIS、ERP等信息管理類的項目,經常會遇到引用很多js文件,這就需要用到動態(tài)加載、緩存、更新以及復用等技術,下面我們來討論下2014-06-06