Wie erstelle ich private Variablen in JavaScript?-js-Tutorial-php.cn

Wie erstelle ich private Variablen in JavaScript?

WBOY

Freigeben： 2023-08-23 21:37:02

nach vorne

905 Leute haben es durchsucht

如何在 JavaScript 中创建私有变量？

闭包、符号、WeakMap、类私有字段和代理是一些可用于在 JavaScript 中创建私有变量的技术。每种技术都有优点和缺点，因此选择最适合您要求的技术至关重要。

与许多其他编程语言一样，JavaScript 也有私有变量和公共变量的概念。私有变量只能由属于同一作用域的代码访问和更改，但公共变量可以由任何代码访问和更改。让我们看看在 JavaScript 中创建私有变量的不同技术。

使用闭包

闭包方法是在 JavaScript 中创建私有变量的一种方法。如果一个函数即使在父函数完成并返回之后也可以访问其父函数作用域中定义的变量，那么该函数就是一个闭包。我们可以在函数内部定义一个变量，使其成为私有变量，只能由该函数内部的代码访问。

示例

<html>
<body>
   <div id="demo"></div>
   <script>
      function createPrivateVariable() {
         let privateVariable = "This is a private variable";
         return {
            getValue: function () {
               return privateVariable;
            },
            setValue: function (value) {
               privateVariable = value;
            },
         };
      }
      let privateVar = createPrivateVariable();
      document.getElementById("demo").innerHTML = privateVar.getValue();
   </script>
</body>
</html>

Nach dem Login kopieren

上例中的函数 createPrivateVariable 返回一个具有方法 getValue 和 setValue 的对象。这些方法可以检索或更改在父函数中声明的 privateVariable 的值，因为它们可以访问它。如果您尝试从函数外部访问 privateVariable，则会发生引用错误。

使用符号数据类型

使用符号数据类型是创建私有变量的第二种方法。符号可以用作属性键，因为它们是不同的非字符串标识符。由于它们是唯一的，因此外部程序无法轻松访问或更改它们。

let privateVariable = Symbol();
let obj = {
   [privateVariable]: "This is a private variable"
};
console.log(obj[privateVariable]);

Nach dem Login kopieren

示例

我们可以按如下方式使用上面的代码 -

<html>
<body>
   <div id="demo"></div>
   <script>
      let privateVar = Symbol();
      let obj = {
         [privateVar]: "This is a private variable"
      };
      Object.defineProperty(obj, 'getValue', {
         get: function() {
            return obj[privateVar];
         }
      });
      document.getElementById("demo").innerHTML = obj.getValue;
   </script>
</body>
</html>

Nach dem Login kopieren

在此示例中，已定义名为 privateVariable 的符号，并将其用作对象的属性键。因为它是一个 Symbol，所以无法使用点表示法获取属性的值，但可以使用方括号表示法通过对象访问它。

使用 WeakMap

WeakMaps 可以用作构造私有变量的第三种方法。 JavaScript 引擎仅弱引用 WeakMap 中的键值对，这使您可以将对象与键链接起来。这使得错误地维护对私有变量的引用变得更加困难，因为如果没有对该键的其他引用，垃圾收集器将销毁该键值对。

示例

<html>
<body>
   <div id="demo"></div>
   <script>
      let privateVariables = new WeakMap();
      let obj = {};
      privateVariables.set(obj, "This is a private variable");
      document.getElementById("demo").innerHTML = privateVariables.get(obj);
   </script>
</body>
</html>

Nach dem Login kopieren

在此示例中，我们创建了一个名为 privateVariables 的 WeakMap，用于保存对象的私有变量。 get() 方法用于在使用 set() 方法将私有变量链接到对象后获取该私有变量。但是，私有变量无法从对象形成的范围之外访问，因为只有当您拥有对该对象的引用时才能访问它。

使用面向对象的类语法

使用面向对象的类语法也可以用来创建私有变量。 JavaScript 的 class 关键字使我们能够定义类，这些类充当对象的模板。类可以定义变量，在变量名前加上#符号，生成私有变量；这是一个实验性功能，表示私有变量。不建议在生产代码中使用此功能，因为目前尚未得到广泛支持。

示例

<html>
<body>
   <p id="output"></p>
   <script>
      class MyClass {
         #privateVariable = "This is a private variable";
         getValue() {
            return this.#privateVariable;
         }
         setValue(value) {
            this.#privateVariable = value;
         }
      }
      let obj = new MyClass();
      document.getElementById("output").innerHTML = obj.getValue(); // "This is a private variable"
      obj.setValue("New value");
      document.getElementById("output").innerHTML = obj.getValue(); // "New value"
   </script>
</body>
</html>

Nach dem Login kopieren

在此示例中，使用私有变量#privateVariable、getValue 和setValue 构造了一个名为MyClass 的类。如果类外部的方法尝试访问只能由类内部的方法访问的私有变量，则会发生引用错误。

使用代理对象

最后，使用 Proxy 对象是构造私有变量的另一种选择。可用于拦截或更改其他对象行为的对象称为代理。您可以通过将对象封装在代理中来创建只能由具有代理的代码访问的私有变量。

示例

<html>
<body>
   <div id="demo"></div>
   <script>
      let privateVariable = "This is a private variable-proxy obj.";
      let handler = {
         get: function (target, name) {
            if (name === "privateVariable") {
               return privateVariable;
            }
         },
         set: function (target, name, value) {
            if (name === "privateVariable") {
               privateVariable = value;
            }
         },
      };
      let obj = new Proxy({}, handler);
      document.getElementById("demo").innerHTML = obj.privateVariable;
   </script>
</body>
</html>

Nach dem Login kopieren

在这个例子中，已经构建了一个带有带有 getter 和 setter 方法的处理程序的代理。这些方法可以检索或更改在代理外部定义的私有变量的值并可以访问它。然而，由于引用错误，私有变量将无法从代理外部访问。

Das obige ist der detaillierte Inhalt vonWie erstelle ich private Variablen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!