Skip to content

Commit a3f61a0

Browse files
authored
Update article.md
1 parent 1f9ae74 commit a3f61a0

File tree

1 file changed

+16
-17
lines changed
  • 1-js/07-object-oriented-programming/08-class-patterns

1 file changed

+16
-17
lines changed

1-js/07-object-oriented-programming/08-class-patterns/article.md

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).
66
```
77

8-
There's a special syntax construct and a keyword `class` in JavaScript. But before studying it, we should consider that the term "class" comes from the theory of object-oriented programming. The definition is cited above, and it's language-independant.
8+
There's a special syntax construct and a keyword `class` in JavaScript. But before studying it, we should consider that the term "class" comes from the theory of object-oriented programming. The definition is cited above, and it's language-independent.
99

1010
In JavaScript there are several well-known programming patterns to make classes even without using the `class` keyword. And here we'll talk about them first.
1111

@@ -43,7 +43,6 @@ So we can easily add internal functions and variables, like `calcAge()` here:
4343

4444
```js run
4545
function User(name, birthday) {
46-
4746
*!*
4847
// only visible from other methods inside User
4948
function calcAge() {
@@ -52,17 +51,17 @@ function User(name, birthday) {
5251
*/!*
5352

5453
this.sayHi = function() {
55-
alert(name + ', age:' + calcAge());
54+
alert(`${name}, age:${calcAge()}`);
5655
};
5756
}
5857

59-
let user = new User("John", new Date(2000,0,1));
60-
user.sayHi(); // John
58+
let user = new User("John", new Date(2000, 0, 1));
59+
user.sayHi(); // John, age:17
6160
```
6261

6362
In this code variables `name`, `birthday` and the function `calcAge()` are internal, *private* to the object. They are only visible from inside of it.
6463

65-
From the other hand, `sayHi` is the external, *public* method. The external code that creates `user` can access it.
64+
On the other hand, `sayHi` is the external, *public* method. The external code that creates `user` can access it.
6665

6766
This way we can hide internal implementation details and helper methods from the outer code. Only what's assigned to `this` becomes visible outside.
6867

@@ -81,22 +80,22 @@ function User(name, birthday) {
8180

8281
return {
8382
sayHi() {
84-
alert(name + ', age:' + calcAge());
83+
alert(`${name}, age:${calcAge()}`);
8584
}
8685
};
8786
}
8887

8988
*!*
90-
let user = User("John", new Date(2000,0,1));
89+
let user = User("John", new Date(2000, 0, 1));
9190
*/!*
92-
user.sayHi(); // John
91+
user.sayHi(); // John, age:17
9392
```
9493

9594
As we can see, the function `User` returns an object with public properties and methods. The only benefit of this method is that we can omit `new`: write `let user = User(...)` instead of `let user = new User(...)`. In other aspects it's almost the same as the functional pattern.
9695

9796
## Prototype-based classes
9897

99-
Prototype-based classes is the most important and generally the best. Functional and factory class patterns are rarely used in practice.
98+
Prototype-based classes are the most important and generally the best. Functional and factory class patterns are rarely used in practice.
10099

101100
Soon you'll see why.
102101

@@ -117,11 +116,11 @@ User.prototype._calcAge = function() {
117116
};
118117

119118
User.prototype.sayHi = function() {
120-
alert(this._name + ', age:' + this._calcAge());
119+
alert(`${this._name}, age:${this._calcAge()}`);
121120
};
122121

123-
let user = new User("John", new Date(2000,0,1));
124-
user.sayHi(); // John
122+
let user = new User("John", new Date(2000, 0, 1));
123+
user.sayHi(); // John, age:17
125124
```
126125

127126
The code structure:
@@ -154,7 +153,7 @@ function Rabbit(name) {
154153
}
155154

156155
Rabbit.prototype.jump = function() {
157-
alert(this.name + ' jumps!');
156+
alert(`${this.name} jumps!`);
158157
};
159158

160159
let rabbit = new Rabbit("My rabbit");
@@ -170,7 +169,7 @@ function Animal(name) {
170169
}
171170

172171
Animal.prototype.eat = function() {
173-
alert(this.name + ' eats.');
172+
alert(`${this.name} eats.`);
174173
};
175174

176175
let animal = new Animal("My animal");
@@ -202,7 +201,7 @@ function Animal(name) {
202201

203202
// All animals can eat, right?
204203
Animal.prototype.eat = function() {
205-
alert(this.name + ' eats.');
204+
alert(`${this.name} eats.`);
206205
};
207206

208207
// Same Rabbit as before
@@ -211,7 +210,7 @@ function Rabbit(name) {
211210
}
212211

213212
Rabbit.prototype.jump = function() {
214-
alert(this.name + ' jumps!');
213+
alert(`${this.name} jumps!`);
215214
};
216215

217216
*!*

0 commit comments

Comments
 (0)