目錄

• 1.使用閉包
• 2.使用 ES6 類
• 3.使用 ES2020 提案
• 4.使用 WeakMap
• 5.使用 TypeScript

前言：

面嚮物件語言中的 private 關鍵字是一個訪問修飾符，可用於使屬性和方法只能在宣告的類中訪問。這使得隱藏底層邏輯變得容易，這些底層邏輯應該被隱藏起來，並且不應該與類的外部互動。

但是如何在 中實現類似的功能呢？ 沒有保留關鍵字 private ，但在新的標準中 Script 有自己的方法來建立類私有成員，但目前還處於 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,};

http://www.cppcns.com
 
    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,};

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;
    },height) {
        this.width = width;
        this.height = height;
    }

http://www.cppcns.com    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) {
        retumxpNtMVZOrn this.width * percent;
    },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(60www.cppcns.com0,360);

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

總結：

到此這篇關於JavaScript 中建立私有成員的文章就介紹到這了,更多相關JavaScript 中建立私有成員內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！