Name: proposal-class-fields
Owner: Ecma TC39
Description: Orthogonally-informed combination of public and private fields proposals
Created: 2017-05-14 14:59:18.0
Updated: 2018-05-24 18:43:28.0
Pushed: 2018-05-05 21:52:40.0
Homepage: https://tc39.github.io/proposal-class-fields/
Size: 153
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Daniel Ehrenberg, Jeff Morrison
Stage 3
This document proposes a combined vision for public fields and private fields, drawing on the earlier Orthogonal Classes and Class Evaluation Order proposals. It is written to be forward-compatible with the introduction of private methods and decorators, whose integration is explained in the unified class features proposal. Methods and accessors are defined in a follow-on proposal.
To define a counter widget which increments when clicked, you can define the following with ES2015:
s Counter extends HTMLElement {
icked() {
this.x++;
window.requestAnimationFrame(this.render.bind(this));
nstructor() {
super();
this.onclick = this.clicked.bind(this);
this.x = 0;
nnectedCallback() { this.render(); }
nder() {
this.textContent = this.x.toString();
ow.customElements.define('num-counter', Counter);
With the ESnext field declarations proposal, the above example can be written as
s Counter extends HTMLElement {
= 0;
icked() {
this.x++;
window.requestAnimationFrame(this.render.bind(this));
nstructor() {
super();
this.onclick = this.clicked.bind(this);
nnectedCallback() { this.render(); }
nder() {
this.textContent = this.x.toString();
ow.customElements.define('num-counter', Counter);
In the above example, you can see a field declared with the syntax x = 0. You can also declare a field without an initializer as x. By declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, as declared fields are always present.
The above example has some implementation details exposed to the world that might be better kept internal. Using ESnext private fields and methods, the definition can be refined to:
s Counter extends HTMLElement {
= 0;
icked() {
this.#x++;
window.requestAnimationFrame(this.render.bind(this));
nstructor() {
super();
this.onclick = this.clicked.bind(this);
nnectedCallback() { this.render(); }
nder() {
this.textContent = this.#x.toString();
ow.customElements.define('num-counter', Counter);
To make fields private, just give them a name starting with #.
By defining things which are not visible outside of the class, ESnext provides stronger encapsulation, ensuring that your classes' users don't accidentally trip themselves up by depending on internals, which may change version to version.
Note that ESnext provides private fields only as declared up-front in a field declaration; private fields cannot be created later, ad-hoc, through assigning to them, the way that normal properties can.
See the draft specification for full details.
For the rational for the syntax used for private fields, see the relevant FAQ.
This proposal provides fields which are orthogonal on the following axes:
The variety of forms is visible in this example:
s C {
= 2;
];
Omitted from this proposal are private methods and accessors, private members of object literals, and decorators. These may be added in a later proposal, as detailed in the unified class features proposal.
class C, and are analogous to comma-separated definitions from var, let and const. They may be immediately useful when declaring multiple static fields, but later are useful in conjuction with decorators.