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()); // 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 各自維護(hù)它們自己的 speed 變量并且外部無法獲取它。在構(gòu)造函數(shù)或類中，我們強(qiáng)制用戶通過方法來獲取屬性而不是直接讀寫。這也就是如何封裝代碼。

第二個方法就是使用 # 符號。

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

從語言層面強(qiáng)制封裝了代碼，外部直接獲取 # 引用的字段則會報錯。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.

到此這篇關(guān)于JS 中的類Public,Private 和 Protected詳解的文章就介紹到這了,更多相關(guān)JS Public，Private ，Protected內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: