classes.js

文件信息

📄 原文件：01_classes.js
🔤 语言：javascript

JavaScript 类与面向对象本文件介绍 JavaScript 中的类和面向对象编程。

完整代码

javascript

/**
 * ============================================================
 *                JavaScript 类与面向对象
 * ============================================================
 * 本文件介绍 JavaScript 中的类和面向对象编程。
 * ============================================================
 */

console.log("=".repeat(60));
console.log("1. 类基础");
console.log("=".repeat(60));

// ============================================================
//                    1. 类基础
// ============================================================

// --- 类声明 ---
console.log("\n--- 类声明 ---");

class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 实例方法
    introduce() {
        return `我是 ${this.name}，${this.age} 岁`;
    }

    // getter
    get info() {
        return `${this.name} (${this.age})`;
    }

    // setter
    set info(value) {
        const [name, age] = value.split(",");
        this.name = name;
        this.age = parseInt(age);
    }
}

const alice = new Person("Alice", 25);
console.log("实例:", alice);
console.log("方法:", alice.introduce());
console.log("getter:", alice.info);

alice.info = "Bob,30";
console.log("setter 后:", alice.info);

// --- 类表达式 ---
console.log("\n--- 类表达式 ---");

const Animal = class {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} 发出声音`);
    }
};

const dog = new Animal("Dog");
dog.speak();


console.log("\n" + "=".repeat(60));
console.log("2. 静态成员");
console.log("=".repeat(60));

// ============================================================
//                    2. 静态成员
// ============================================================

class MathUtils {
    // 静态属性
    static PI = 3.14159;

    // 静态方法
    static add(a, b) {
        return a + b;
    }

    static multiply(a, b) {
        return a * b;
    }

    // 静态工厂方法
    static createCalculator() {
        return {
            add: this.add,
            multiply: this.multiply
        };
    }
}

console.log("\n--- 静态成员 ---");
console.log("MathUtils.PI:", MathUtils.PI);
console.log("MathUtils.add(3, 5):", MathUtils.add(3, 5));

// 实例不能访问静态成员
// const math = new MathUtils();
// console.log(math.PI);  // undefined


console.log("\n" + "=".repeat(60));
console.log("3. 继承");
console.log("=".repeat(60));

// ============================================================
//                    3. 继承
// ============================================================

class Animal2 {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} 发出声音`);
    }

    move(distance) {
        console.log(`${this.name} 移动了 ${distance}m`);
    }
}

class Dog2 extends Animal2 {
    constructor(name, breed) {
        super(name);  // 调用父类构造函数
        this.breed = breed;
    }

    // 重写方法
    speak() {
        console.log(`${this.name} 汪汪叫`);
    }

    // 调用父类方法
    speakLoud() {
        super.speak();  // 调用父类的 speak
        console.log("（很大声）");
    }

    // 新方法
    fetch() {
        console.log(`${this.name} 去捡球`);
    }
}

console.log("\n--- 继承 ---");
const buddy = new Dog2("Buddy", "Golden Retriever");
console.log("实例:", buddy);
buddy.speak();
buddy.move(10);
buddy.fetch();
buddy.speakLoud();

// instanceof 检查
console.log("\n--- instanceof ---");
console.log("buddy instanceof Dog2:", buddy instanceof Dog2);
console.log("buddy instanceof Animal2:", buddy instanceof Animal2);
console.log("buddy instanceof Object:", buddy instanceof Object);


console.log("\n" + "=".repeat(60));
console.log("4. 私有成员");
console.log("=".repeat(60));

// ============================================================
//                    4. 私有成员
// ============================================================

class BankAccount {
    // 私有字段（# 开头）
    #balance = 0;
    #transactions = [];

    constructor(owner, initialBalance = 0) {
        this.owner = owner;
        this.#balance = initialBalance;
        this.#log("账户创建");
    }

    // 私有方法
    #log(message) {
        this.#transactions.push({
            message,
            time: new Date().toISOString()
        });
    }

    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            this.#log(`存入 ${amount}`);
            return true;
        }
        return false;
    }

    withdraw(amount) {
        if (amount > 0 && amount <= this.#balance) {
            this.#balance -= amount;
            this.#log(`取出 ${amount}`);
            return true;
        }
        return false;
    }

    get balance() {
        return this.#balance;
    }

    getHistory() {
        return [...this.#transactions];  // 返回副本
    }
}

console.log("\n--- 私有成员 ---");
const account = new BankAccount("Alice", 1000);
console.log("初始余额:", account.balance);

account.deposit(500);
console.log("存入后:", account.balance);

account.withdraw(200);
console.log("取出后:", account.balance);

// 无法访问私有成员
// console.log(account.#balance);  // 语法错误
// account.#log("hack");  // 语法错误

console.log("交易记录:", account.getHistory());


console.log("\n" + "=".repeat(60));
console.log("5. 抽象模式");
console.log("=".repeat(60));

// ============================================================
//                    5. 抽象模式
// ============================================================

/**
 * JavaScript 没有原生抽象类，但可以模拟
 */

class Shape {
    constructor() {
        if (new.target === Shape) {
            throw new Error("Shape 是抽象类，不能直接实例化");
        }
    }

    // 抽象方法
    area() {
        throw new Error("子类必须实现 area 方法");
    }

    perimeter() {
        throw new Error("子类必须实现 perimeter 方法");
    }

    // 具体方法
    describe() {
        return `面积: ${this.area()}, 周长: ${this.perimeter()}`;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }

    perimeter() {
        return 2 * (this.width + this.height);
    }
}

class Circle extends Shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius ** 2;
    }

    perimeter() {
        return 2 * Math.PI * this.radius;
    }
}

console.log("\n--- 抽象模式 ---");

// const shape = new Shape();  // 错误：不能实例化

const rect = new Rectangle(4, 5);
const circle = new Circle(3);

console.log("矩形:", rect.describe());
console.log("圆形:", circle.describe());


console.log("\n" + "=".repeat(60));
console.log("6. 混入 (Mixin)");
console.log("=".repeat(60));

// ============================================================
//                    6. 混入
// ============================================================

/**
 * JavaScript 不支持多继承，但可以使用混入模式
 */

// 定义混入
const Flyable = {
    fly() {
        console.log(`${this.name} 正在飞行`);
    },
    land() {
        console.log(`${this.name} 已着陆`);
    }
};

const Swimmable = {
    swim() {
        console.log(`${this.name} 正在游泳`);
    },
    dive() {
        console.log(`${this.name} 正在潜水`);
    }
};

// 使用混入
class Duck {
    constructor(name) {
        this.name = name;
    }

    quack() {
        console.log(`${this.name}: 嘎嘎！`);
    }
}

// 混入方法
Object.assign(Duck.prototype, Flyable, Swimmable);

console.log("\n--- 混入 ---");
const duck = new Duck("Donald");
duck.quack();
duck.fly();
duck.swim();

// 函数式混入
function withTimestamp(target) {
    target.prototype.getTimestamp = function() {
        return new Date().toISOString();
    };
    return target;
}

@withTimestamp  // 需要装饰器支持
class Event {
    constructor(name) {
        this.name = name;
    }
}

// 手动应用
withTimestamp(Duck);
console.log("时间戳:", duck.getTimestamp());


console.log("\n" + "=".repeat(60));
console.log("7. 原型链");
console.log("=".repeat(60));

// ============================================================
//                    7. 原型链
// ============================================================

console.log("\n--- 类的原型链 ---");
console.log("Dog2.prototype:", Dog2.prototype);
console.log("buddy.__proto__ === Dog2.prototype:", buddy.__proto__ === Dog2.prototype);
console.log("Dog2.prototype.__proto__ === Animal2.prototype:",
    Dog2.prototype.__proto__ === Animal2.prototype);

// 方法在原型上
console.log("\n--- 方法位置 ---");
console.log("hasOwnProperty 'name':", buddy.hasOwnProperty("name"));  // true，在实例上
console.log("hasOwnProperty 'speak':", buddy.hasOwnProperty("speak"));  // false，在原型上

// 检查原型链
console.log("\n--- 原型链检查 ---");
console.log("Object.getPrototypeOf(buddy):", Object.getPrototypeOf(buddy) === Dog2.prototype);


console.log("\n【总结】");
console.log(`
类基础：
- class 声明定义类
- constructor 定义构造函数
- 实例方法、getter、setter

静态成员：
- static 关键字
- 属于类本身，不属于实例

继承：
- extends 关键字
- super 调用父类
- 可以重写方法

私有成员：
- # 开头的字段和方法
- 类外部无法访问

设计模式：
- 抽象类模式
- 混入模式
- 工厂模式

原型链：
- 类是原型继承的语法糖
- 方法在 prototype 上
- 实例属性在实例上
`);

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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440

classes.js ​

完整代码 ​

💬 讨论

classes.js

完整代码