Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e111aa1

Browse files
committed
minor improvements
1 parent 8a13c99 commit e111aa1

File tree

1 file changed

+38
-25
lines changed

1 file changed

+38
-25
lines changed

‎1-js/09-classes/01-class/article.md‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ Sometimes people say that `class` is a "syntactic sugar" (syntax that is designe
127127
function User(name) {
128128
this.name = name;
129129
}
130-
// any function prototype has constructor property by default,
130+
// a function prototype has "constructor" property by default,
131131
// so we don't need to create it
132132

133133
// 2. Add the method to prototype
@@ -146,7 +146,7 @@ Still, there are important differences.
146146

147147
1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually.
148148

149-
And unlike a regular function, a class constructor must be called with `new`:
149+
The language checks for that property in a variety of places. For example, unlike a regular function, it must be called with `new`:
150150

151151
```js run
152152
class User {
@@ -166,6 +166,7 @@ Still, there are important differences.
166166
167167
alert(User); // class User { ... }
168168
```
169+
There are other differences, we'll see them soon.
169170
170171
2. Class methods are non-enumerable.
171172
A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`.
@@ -209,7 +210,6 @@ new User().sayHi(); // works, shows MyClass definition
209210
alert(MyClass); // error, MyClass name isn't visible outside of the class
210211
```
211212

212-
213213
We can even make classes dynamically "on-demand", like this:
214214

215215
```js run
@@ -229,7 +229,7 @@ new User().sayHi(); // Hello
229229
```
230230

231231

232-
## Getters/setters, other shorthands
232+
## Getters/setters
233233

234234
Just like literal objects, classes may include getters/setters, computed properties etc.
235235

@@ -267,22 +267,11 @@ alert(user.name); // John
267267
user = new User(""); // Name is too short.
268268
```
269269
270-
The class declaration creates getters and setters in `User.prototype`, like this:
270+
Technically, such class declaration works by creating getters and setters in `User.prototype`.
271271
272-
```js
273-
Object.defineProperties(User.prototype, {
274-
name: {
275-
get() {
276-
return this._name
277-
},
278-
set(name) {
279-
// ...
280-
}
281-
}
282-
});
283-
```
272+
## Computed names [...]
284273
285-
Here's an example with a computed property name in brackets `[...]`:
274+
Here's an example with a computed method name using brackets `[...]`:
286275

287276
```js run
288277
class User {
@@ -298,13 +287,15 @@ class User {
298287
new User().sayHi();
299288
```
300289

290+
Such features are easy to remember, as they resemble that of literal objects.
291+
301292
## Class fields
302293

303294
```warn header="Old browsers may need a polyfill"
304295
Class fields are a recent addition to the language.
305296
```
306297

307-
Previously, classes only had methods.
298+
Previously, our classes only had methods.
308299

309300
"Class fields" is a syntax that allows to add any properties.
310301

@@ -313,23 +304,45 @@ For instance, let's add `name` property to `class User`:
313304
```js run
314305
class User {
315306
*!*
316-
name = "Anonymous";
307+
name = "John";
317308
*/!*
318309
319310
sayHi() {
320311
alert(`Hello, ${this.name}!`);
321312
}
322313
}
323314
324-
new User().sayHi();
315+
new User().sayHi(); // Hello, John!
316+
```
317+
318+
So, we just write "<property name> = <value>" in the declaration, and that's it.
319+
320+
The important difference of class fields is that they are set on individual objects, not `User.prototype`:
325321

326-
alert(User.prototype.sayHi); // placed in User.prototype
327-
alert(User.prototype.name); // undefined, not placed in User.prototype
322+
```js run
323+
class User {
324+
*!*
325+
name = "John";
326+
*/!*
327+
}
328+
329+
let user = new User();
330+
alert(user.name); // John
331+
alert(User.prototype.name); // undefined
328332
```
329333

330-
The important thing about class fields is that they are set on individual objects, not `User.prototype`.
334+
Technically, they are processed after the constructor has done it's job, and we can use for them complex expressions and function calls:
335+
336+
```js run
337+
class User {
338+
*!*
339+
name = prompt("Name, please?", "John");
340+
*/!*
341+
}
331342

332-
Technically, they are processed after the constructor has done it's job.
343+
let user = new User();
344+
alert(user.name); // John
345+
```
333346

334347
### Making bound methods with class fields
335348

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /