JavaScript 中創建私有成員

Posted on by

前言：

面向對象編程語言中的 private 關鍵字是一個訪問修飾符，可用於使屬性和方法隻能在聲明的類中訪問。這使得隱藏底層邏輯變得容易，這些底層邏輯應該被隱藏起來，並且不應該與類的外部交互。

但是如何在 JavaScript 中實現類似的功能呢？ 沒有保留關鍵字 private ，但在新的標準中 JavaScript 有自己的方法來創建類私有成員，但目前還處於 ES2020 試驗草案中，並且語法比較奇怪，以 # 作為前綴。下面介紹幾種在 JavaScript 代碼中實現私有屬性和方法的方式。

1.使用閉包

使用閉包可以使用私有屬性或者方法的封裝。利用閉包可以訪問外部函數的變量特征。

如下代碼片段：

function MyProfile() {
    const myTitle = "DevPoint";

    return {
        getTitle: function () {
            return myTitle;
        },
    };
}
const myProfile = MyProfile();
console.log(myProfile.getTitle()); // DevPoint

這可以轉化為將最頂層的自調用函數調用分配給一個變量，並且隻用函數返回來公開它的一些內部函數：

const ButtonCreator = (function () {
    const properties = {
        width: 100,
        height: 50,
    };

    const getWidth = () => properties.width;
    const getHeight = () => properties.height;
    const setWidth = (width) => (properties.width = width);
    const setHeight = (height) => (properties.height = height);

    return function (width, height) {
        properties.width = width;
        properties.height = height;

        return {
            getWidth,
            getHeight,
            setWidth,
            setHeight,
        };
    };
})();
const button = new ButtonCreator(600, 360);
console.log(button.getHeight()); // 360

2.使用 ES6 類

為瞭使代碼更類似於 OOP 方法，可以使用 ES6 中引入的 class 關鍵字。要使屬性和方法私有，可以在類之外定義它們。

就對上面的 ButtonCreator 的例子使用 class 進行重構：

const properties = {
    width: 100,
    height: 50,
};

class ButtonCreator {
    constructor(width, height) {
        properties.width = width;
        properties.height = height;
    }

    getWidth = () => properties.width;
    getHeight = () => properties.height;
    setWidth = (width) => (properties.width = width);
    setHeight = (height) => (properties.height = height);
}
const button = new ButtonCreator(600, 360);
console.log(button.getHeight()); // 360

現在假設屬性是公共的，但想在私有方法中使用它們，其中上下文指向 ButtonCreator，可以通過以下方式實現它：

const privates = {
    calculateWidth() {
        return this.width;
    },
};

class ButtonCreator {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getWidth = () => privates.calculateWidth.call(this);
    getHeight = () => this.height;
    setWidth = (width) => (this.width = width);
    setHeight = (height) => (this.height = height);
}
const button = new ButtonCreator(600, 360);
console.log(button.getHeight()); // 360

上面的代碼使用瞭 Function.prototype.call，它用於調用具有給定上下文的函數。在例子中，使用 ButtonCreator 類的上下文。

如果私有函數也需要參數，可以將它們作為附加參數傳遞以調用：

const privates = {
    calculateWidth(percent) {
        return this.width * percent;
    },
};

class ButtonCreator {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getWidth = () => privates.calculateWidth.call(this, 0.1);
    getHeight = () => this.height;
    setWidth = (width) => (this.width = width);
    setHeight = (height) => (this.height = height);
}
const button = new ButtonCreator(600, 360);
console.log(button.getWidth()); // 60

3.使用 ES2020 提案

還處於 ES2020 試驗草案中，引入瞭私有方法或者屬性的定義，語法比較奇怪，以 # 作為前綴。

class ButtonCreator {
    #width;
    #height;
    constructor(width, height) {
        this.#width = width;
        this.#height = height;
    }
    // 私有方法
    #calculateWidth() {
        return this.#width;
    }

    getWidth = () => this.#calculateWidth();
    getHeight = () => this.#height;
    setWidth = (width) => (this.#width = width);
    setHeight = (height) => (this.#height = height);
}
const button = new ButtonCreator(600, 360);
console.log(button.width); // undefined
console.log(button.getWidth()); // 600

4.使用 WeakMap

這種方法建立在閉包方法之上，使用作用域變量方法創建一個私有 WeakMap，然後使用該 WeakMap 檢索與此相關的私有數據。這比作用域變量方法更快，因為所有實例都可以共享一個 WeakMap，所以不需要每次創建實例時都重新創建方法。

const ButtonCreator = (function () {
    const privateProps = new WeakMap();
    class ButtonCreator {
        constructor(width, height, name) {
            this.name = name; // 公共屬性
            privateProps.set(this, {
                width, // 私有屬性
                height, // 私有屬性
                calculateWidth: () => privateProps.get(this).width, // 私有方法
            });
        }

        getWidth = () => privateProps.get(this).calculateWidth();
        getHeight = () => privateProps.get(this).height;
    }
    return ButtonCreator;
})();
const button = new ButtonCreator(600, 360);
console.log(button.width); // undefined
console.log(button.getWidth()); // 600

這種方式對於私有方法的使用有點別扭。

5.使用 TypeScript

可以將 TypeScript 用作 JavaScript 的一種風格，可以使用 private 關鍵字從面向對象的語言中真正重新創建功能。

class ButtonCreator {
    private width: number;
    private height: number;
    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }
    private calculateWidth() {
        return this.width;
    }
    public getWidth() {
        return this.calculateWidth();
    }
    public getHeight() {
        return this.height;
    }
}
const button = new ButtonCreator(600, 360);

console.log(button.getWidth()); // 600
console.log(button.width); // error TS2341: Property 'width' is private and only accessible within class 'ButtonCreator'.

總結：

到此這篇關於JavaScript 中創建私有成員的文章就介紹到這瞭,更多相關JavaScript 中創建私有成員內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：