在 JavaScript 中建立私有屬性

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中建立私有屬性
Tahseen Tauseef 2023年1月30日 2022年5月10日
JavaScript JavaScript Property
  1. JavaScript 中的 ES6 類
  2. JavaScript 中的公共屬性
  3. JavaScript 中的私有屬性
  4. 在 JavaScript 中建立私有屬性的不同方法
在 JavaScript 中建立私有屬性

本文將解釋 ES6 類、使用 ES6 類的私有屬性，以及如何在 JavaScript 中建立和宣告這些私有屬性。此外，討論和解釋了在 JavaScript 中實現 private 關鍵字的不同方法。

JavaScript 中的 ES6 類

物件導向是一種基於現實世界建模的程式設計正規化。它將程式視為通過方法進行通訊的物件的集合。

ES6 也支援這些物件導向的元件。

在 ES6 中，class 關鍵字可用於構建類。宣告類或利用類表示式可用於將它們包含在程式碼中。

語法：

class Class_name {
}
//declaring a class

var var_name = new Class_name {
}
//class expression

JavaScript 中的公共屬性

關鍵字 this 在 JavaScript 中宣告公共屬性和方法。它們可以在指定函式的內部和外部訪問。

JavaScript 中的私有屬性

在物件導向的語言中，private 關鍵字是一個訪問修飾符，它限制對指定類中的屬性和方法的訪問。這使得隱藏應該被窺探而不是在教室外參與的潛在邏輯變得簡單。

但是，使用 JavaScript，你怎麼能達到同樣的效果呢？private 不是保留關鍵字；相反，它只能用作變數。

語法：

const private = 'private';
private.js
//private is not a reserved keyword, and you can set it to anything.

在 JavaScript 中建立私有屬性的不同方法

幸運的是，有一些解決方案可以在 JavaScript 中實現私有屬性和函式。實現私有屬性的方法如下：

在 JavaScript 中使用 closure() 建立私有屬性

使用 closure() 是在 JavaScript 中實現私有屬性的選擇之一。可以訪問周圍函式變數的內部函式稱為閉包。

例子：

(function one() {
    var a = 'Hello World';

    // The scope of the outer function is accessible to this inner function.
    (function two() {
        console.log(a); // This will give output of "Hello World"
    })();
})();

輸出：

使用 closure() 建立私有屬性

你可以訪問此連結以檢視此程式碼的工作情況。這意味著將變數分配給最頂層的自呼叫函式呼叫，並且僅通過函式返回公開其內部函式的一部分。

在 JavaScript 中使用 ES6 類建立私有屬性

ES6 類本身不支援私有屬性。但是，你可以通過將新屬性放在類函式 Object() { [native code] } 中來獲得類似的效果。我們可以利用 getter 和 setter 來訪問隱藏的屬性，而不是將它們附加到物件上。

值得注意的是，該類的每個新例項都重新定義了 getter 和 setter。你可以利用 ES6 中引入的 class 關鍵字來使你的程式碼更類似於 OOP 方法。

在你的類之外宣告屬性和方法以使它們成為私有的。

例子：

class Person {
    constructor(name) {
        var _name = name
        this.setName = function(name) { _name = name; }
        this.getName = function() { return _name; }
    }
}

在 JavaScript 中使用最新的 ECMAScript 提案建立私有屬性

以後也許可以使用官方的方式使用私有欄位。目前，這是在撰寫本文時的第 3 階段提案。

有了今天最新版本的 Babel，你已經可以使用它了。要定義私有屬性或方法，請在它們前面加上一個雜湊。

例子：

class Something {
    #property;

    constructor(){
        this.#property = "test";
    }

    #privateMethod() {
        return 'hello world';
    }

    getPrivateMessage() {
        return this.#property;
    }
}

const instance = new Something();
console.log(instance.property); // It will show "undefined"
console.log(instance.privateMethod); // This will show "undefined"
console.log(instance.getPrivateMessage()); // This will show "test"

你可以點選這個連結來觀看上面程式碼段的執行。

在 JavaScript 中從私有屬性訪問公共屬性

你必須明白，這是一個 MODULE，而不是一個需要例項化的類。要從私有屬性訪問公共屬性，請使用 self. 在公共方法/變數中，在私有方法中沒有任何內容，它都會起作用。

例子：

var PersonModule = (function(){
    var self = {};

    var privateChangeNameToBob = function(){
        self.name = "World";
    };

    self.sayHello = function(){
        console.log("Hello " + self.name);
    };

    self.changeName = function(){
        privateChangeNameToBob();
    };
    self.name = "";

    return self;
})();
PersonModule.name = 'Test';
PersonModule.changeName();
PersonModule.sayHello();

輸出：

從私有屬性示例訪問公共屬性

單擊此連結以訪問此程式碼的執行。

相關文章 - JavaScript Property