aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/javascript/referencia/classes/private_class_fields/index.html
blob: 5826cc125b5942bb1948b30c5b25856280b8f71f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
---
title: Private class fields
slug: Web/JavaScript/Referencia/Classes/Private_class_fields
translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
---
<div>
<p><font><font>Las propiedades de la clase son públicas de forma predeterminada y se pueden examinar o modificar fuera de la clase. </font><font>Sin embargo, existe </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=es&amp;u=https://github.com/tc39/proposal-class-fields&amp;usg=ALkJrhgmG5nvuZjYd2YQRSuRJHti_gdXeQ" rel="noopener"><font><font>una propuesta experimental</font></font></a><font><font>  para permitir la definición de campos de clase privados utilizando un </font></font><code>#</code><font><font>prefijo </font><font>hash </font><font>.</font></font></p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">class ClassWithPrivateField {
  #privateField
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world'
 }
}

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD
}
</pre>

<h3 id="Campos_estáticos_privados"><font><font>Campos estáticos privados </font></font></h3>

<p><font><font>Los campos privados son accesibles en el constructor de clases desde dentro de la propia declaración de clases.</font></font></p>

<p><font><font>La limitación de las variables estáticas que se llaman solo por métodos estáticos aún se mantiene</font></font></p>

<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD

  static publicStaticMethod() {
    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
  }
}

console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>

<p><font><font>Los campos estáticos privados se agregan al constructor de la clase en el momento de la evaluación de la clase.</font></font></p>

<p><font><font>Existe una restricción de procedencia en los campos estáticos privados. </font><font>Solo la clase que define el campo estático privado puede acceder al campo.</font></font></p>

<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>.</font></font></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 { }

let error = null

try {
  SubClass.basePublicStaticMethod()
} catch(e) { error = e}

console.assert(error instanceof TypeError)
</pre>

<h3 id="Campos_de_instancia_privados"><font><font>Campos de instancia privados</font></font></h3>

<p><font><font>Los campos de instancia privados se declaran con </font></font><strong><font><font># nombres </font></font></strong><font><font> (pronunciados " </font></font><em><font><font>nombres hash</font></font></em><font><font> "), que son identificadores con el prefijo </font></font><code>#</code><font><font>. </font><font>El </font></font><code>#</code><font><font>es una parte del nombre propio. </font><font>También se utiliza para la declaración y el acceso.</font></font></p>

<p><font><font>La encapsulación es impuesta por el lenguaje. </font><font>Es un error de sintaxis referirse a </font></font><code>#</code><font><font>nombres que están fuera del alcance.</font></font></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="Métodos_privados"><font><font>Métodos privados</font></font></h3>

<h4 id="Métodos_estáticos_privados"><font><font>Métodos estáticos privados</font></font></h4>

<p><font><font>Al igual que su equivalente público, los métodos estáticos privados se invocan en la propia clase, no en instancias de la clase. </font><font>Al igual que los campos estáticos privados, solo se puede acceder a ellos desde dentro de la declaración de clase.</font></font></p>

<p><font><font>Los métodos estáticos privados pueden ser funciones generadoras, asíncronas y asíncronas.</font></font></p>

<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
    static #privateStaticMethod() {
        return 42
    }

    static publicStaticMethod1() {
        return ClassWithPrivateStaticMethod.#privateStaticMethod();
    }

    static publicStaticMethod2() {
        return this.#privateStaticMethod();
    }
}

console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
</pre>

<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>. </font><font>En el siguiente ejemplo se </font></font><code>this</code><font><font>hace referencia a la </font></font><code>Derived</code><font><font>clase (no a la </font></font><code>Base</code><font><font>clase) cuando intentamos llamar </font></font><code>Derived.publicStaticMethod2()</code><font><font>, y por lo tanto exhibe la misma "restricción de procedencia" que se mencionó anteriormente:</font></font></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="Métodos_de_instancia_privada"><font><font>Métodos de instancia privada</font></font></h4>

<p><font><font>Los métodos de instancia privada son métodos disponibles en instancias de clase cuyo acceso está restringido de la misma manera que los campos de instancia privada.</font></font></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><font><font>Los métodos de instancia privada pueden ser funciones generadoras, asíncronas o asíncronas. </font><font>Los getters y setters privados también son posibles:</font></font></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="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("javascript.classes.private_class_fields")}}</p>

<h2 id="See_also">See also</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>