JS 中的類Public,Private 和 Protected詳解

Posted on by

前言

原文地址：dev.to/bhagatparwi…

即使 ES6 中引入瞭 class 關鍵字很好的模擬瞭類的行為以及使我們可以進行面向對象編程，但 JavaScript 中的類缺失瞭創建公共、私有和保護成員的能力。

若你之前使用過其他面向對象的編程語言，肯定知道內部和外部接口的重要性。內部接口引用的方法和屬性隻能在類的內部獲取。相反，外部接口的方法和屬性可以在內外部都可獲取。

主要有三個關鍵字在起作用：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 中有很多方法創建私有變量，第一個是閉包：

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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：