JavaScript 类级字段

在任何面向对象的编程语言中，类都可以有私有和公共字段。字段只不过是保存信息的变量。在面向对象的编程语言中有两种类型的字段，即实例字段和静态字段。实例成员属于特定实例。

示例：如果我们创建 3 个实例（对象），则内存中将有 3 个实例字段副本，而无论我们创建多少个实例，静态字段都只会有一个副本。简单来说，静态变量是所有对象通用的变量。

Private Instance fields：默认情况下，一个类的所有属性都是公共的，可以在类外修改。所以，为了声明一个私有类字段，我们需要使用#前缀。

句法：

#variableName

让我们看下面的例子：

Javascript

class IncrementCounter {
 
    // Private variable
    #value = 0;
 
    // Public variable
    Count = 0;
 
    Increment() {
        this.#value++;
    }
}
 
const counter = new IncrementCounter();
 
// Raises an error
console.log(counter.#value);
 
// Calling the increment function
counter.increment();
 
// Printing the private variable value
console.log(counter.#value);

输出：

console.log(counter.#value); 
^
SyntaxError: Private field ‘#value’ must be declared in an enclosing class 
at wrapSafe (internal/modules/cjs/loader.js:1054:16) 
at Module._compile (internal/modules/cjs/loader.js:1102:27) 
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) 
at Module.load (internal/modules/cjs/loader.js:986:32) 
at Function.Module._load (internal/modules/cjs/loader.js:879:14) 
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) 
at internal/main/run_main_module.js:17:47

解释：在上面的例子中，我们使用#声明了一个私有变量。运行上述脚本将显示错误，因为我们试图访问类外部的私有变量，因此“必须在封闭类中声明私有字段 '#value'”。所以我们尝试通过定义如下函数来获取值：

Javascript

class IncrementCounter {
    #value = 0;
 
    increment() {
        this.#value++;
    }
 
    value() {
 
        // Returning the value of
        // a private variable
        return this.#value;
    }
}
 
const counter = new IncrementCounter();
 
// Calling the function value()
console.log(counter.value());
 
// Calling the function increment()
counter.increment();
 
// Calling the function value()
console.log(counter.value());

输出：

0
1

私有静态字段：可以使用关键字 static 来创建静态字段。有时甚至静态字段也被隐藏起来，您可以将它们设为私有。

句法：

static #staticFieldName

让我们看下面的例子：

Javascript

class User {
 
    // Private static field of string type
    static #name = "";
 
    // Private static field
    static #age
 
    // Constructor function
    Person(user_name, user_age) {
        User.#name = user_name;
        User.#age = user_age;
        return User.#name + ' ' + User.#age;
    }
}
 
// Create an object user1
user1 = new User();
console.log(user1.Person("John", 45));
 
// Create an object user2
user2 = new User()
console.log(user1.Person("Mark", 35));

输出：

John 45
Mark 35

说明：要调用静态字段，我们需要使用构造函数类的名称。在上面的示例中，我们通过使用关键字 static 和 # 作为私有字段并将其初始化为空字符串来创建私有静态字段名称。同样，我们正在创建一个私有静态字段 age。现在为了调用上面创建的字段，我们使用构造函数类 User 的名称作为 User.#name 和 User.#age。

公共实例字段：默认情况下，类的所有属性都是公共的，可以在类外轻松访问。您可以连同声明一起初始化变量的值。

让我们看下面的例子：

Javascript

class IncrementCounter {
 
    // Public instance field
    value = 1;
 
    Increment() {
        return this.value++;
    }
}
 
const counter = new IncrementCounter();
 
// Accessing a public instance field
console.log(counter.value);
 
// Calling the Increment function
counter.Increment();
 
// Printing the updated value
console.log(counter.value);

输出：

1
2

说明：在上面的例子中， value 被声明为一个公共实例并初始化为 1，所以我们可以很容易地使用counter.value来访问它。在构造函数、方法以及类外部访问和修改公共实例字段没有任何限制。

公共静态字段：正如我们之前讨论过的，静态字段是使用 static 关键字作为 static staticFieldName 创建的。

让我们看下面的例子：

Javascript

class Example {
 
    // Private static field
    static value = 42;
}
 
// Accessing a public static field using
// name of the Constructor class
console.log(Example.value)
 
console.log(Example.value === 42);

输出：

42
true

说明：如您所见，我们可以通过使用类名轻松访问类外的公共静态字段。