第 20 章 Class 的基本语法

Class 的基本语法

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
// 类的定义
class Point {
// 构造方法
constructor(x, y) {
this.x = x;
this.y = y;
}

// 类方法
toString() {
return '(' + this.x + ',' + this.y + ')';
}
}

// 类的数据类型是函数,类本身是构造函数
typeof Point // "fuction"
Point === Point.prototype.constructor // true

// Object.assign 方法可以一次向类添加多个方法
Object.assign(Point.prototype, {
toString() {},
toValue() {}
})

// 类的内部定义的所有方法都是不可枚举的
Object.keys(Point.prototype) // []
Object.getOwnPrototypeNames(Point.prototype) // ["constructor", "toString"]

// 类的实例
let point = new Point(2, 3);
point..toString(); // (2, 3)

point.hasOwnPrototype('x'); // true
point.hasOwnPrototype('y'); // true
point.hasOwnPrototype('toString'); // false
point.__proto__.hasOwnPrototype('toString'); // true

// 取值函数(getter)和存值函数(setter)
class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: ' + value);
}
}

let inst = new MyClass();
inst.prop = 123; // setter: 123
inst.prop; // 'getter'

// 静态方法
class Foo {
static classMethod() {
return 'hello';
}
}

Foo.classMethod(); // 'hello'

let foo = new Foo();
foo.classMethod(); // TypeError: foo.classMethod is not a function

// 静态方法可以被继承
class Bar extends Foo() {
}

Bar.classMethod(); // 'hello'

// 静态方法也可以从 super 对象上调用
class Bar extends Foo() {
static classMethod() {
return super.classMethod() + ', too';
}
}

Bar.classMethod(); // 'hello, too'

// 实例属性的新写法
class IncreasingCounter {
constructor() {
this._count = 0;
}
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
//等同于
class IncreasingCounter {
_count = 0;
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}

// 好处整齐
class Foo {
bar = 'hello';
baz = 'world';

constructor() {
// ...
}
}

// 提案:静态属性加 static 关键字
class MyClass() {
static myStaticProp = 42;

constructor() {
console.log(MyClass.myStaticProp); // 42
}
}

// 提案:私有属性和私有方法加 # 关键字
class Foo {
#a;
#b;

constructor(a, b) {
this.#a = a;
this.#b = b;
}
#sum() {
return #a + #b;
}
printSum() {
console.log(this.#sum());
}
}

// Class 内部使用 new.target,返回当前类名
-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!