initial commit

1 files changed, 201 insertions, 0 deletions

diff --git a/files/zh-cn/web/javascript/reference/classes/private_class_fields/index.html b/files/zh-cn/web/javascript/reference/classes/private_class_fields/index.html
new file mode 100644
index 0000000000..a320876884
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/classes/private_class_fields/index.html
@@ -0,0 +1,201 @@
+---
+title: 类私有域
+slug: Web/JavaScript/Reference/Classes/Private_class_fields
+tags:
+  - JavaScript
+  - 类
+  - 语言特性
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>类属性在默认情况下是公共的，可以被外部类检测或修改。在<a href="https://github.com/tc39/proposal-class-fields">ES2020 实验草案</a> 中，增加了定义私有类字段的能力，写法是使用一个#作为前缀。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h2 id="例子"> 例子</h2>
+
+<h3 id="私有静态字段">私有静态字段</h3>
+
+<p>私有字段可以被类的构造方法（constructor）从内部声明。</p>
+
+<p>静态变量只能被静态方法调用的限制仍然成立。</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>在类评估时，私有静态字段被添加到类构造函数中。</p>
+
+<p>私有静态字段有一个来源限制， 只有定义该私有静态字段的类能访问该字段。</p>
+
+<p>这可能会导致：当使用<strong><code>this</code></strong>时出现意想不到的行为。</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() =&gt; SubClass.basePublicStaticMethod(), TypeError)
+</pre>
+
+<h3 id="私有实例字段">私有实例字段</h3>
+
+<p>私有实例字段使用 <strong>＃名称</strong>（发音为“哈希名称”）声明，这些名称以 <code>#</code>开头。  <code>#</code>是名称本身的一部分， 声明和访问时也需要加上。</p>
+
+<p>封装由语言强制执行。 从作用域之外引用＃名称是语法错误。</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h3 id="私有方法">私有方法</h3>
+
+<h4 id="私有静态方法">私有静态方法</h4>
+
+<p>像它们的公有等价方法一样，私有静态方法是在类本身而非类的实例上调用的。 像私有静态字段一样，只能从类声明内部访问它们。</p>
+
+<p>私有静态方法可能是生成器方法，异步方法和异步生成器方法。</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod1() === 42);
+assert(ClassWithPrivateStaticField.publicStaticMethod2() === 42);
+</pre>
+
+<p>使用<strong><code>this</code></strong>可能会导致意想不到的行为（因为<code>this</code>绑定规则适用）。</p>
+
+<pre class="brush: js notranslate">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h4 id="私有实例方法">私有实例方法</h4>
+
+<p>私有实例方法是类实例上可用的方法，它们的访问方式与私有实例字段相同。</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>私有实例方法可以是生成器方法，异步方法或异步生成器方法。 私有的getter和setter也是可能的：</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>