只要心怀希望，就没有到不了的远方！
你是否觉得代码越来越复杂，像一堆散落的积木难以管理？本节课将教你用 面向对象编程（OOP） 的思维，像搭乐高一样组织代码，通过「类与对象」「继承」打造可复用的代码模块！最后开发「动物世界模拟器」，让小猫小狗在网页上活起来！
一、面向对象核心概念
1. 类 vs 对象：蓝图与实物
-
类（Class）：设计图纸（比如“汽车设计图”）
-
对象（Object）：根据图纸制造的实物（比如“一辆红色宝马”）
2. 面向对象三大特性
| 特性 | 比喻 | 作用 |
|---|---|---|
| 封装 | 手机外壳包裹电路 | 隐藏细节，暴露安全接口 |
| 继承 | 子承父业 | 复用已有类的功能 |
| 多态 | 同一接口不同表现 | 不同对象调用相同方法结果不同 |
二、构造函数与原型链
1. 构造函数：对象的“施工队”
function Dog(name, age) {
// 属性初始化
this.name = name;
this.age = age;
// 方法定义
this.bark = function () {
console.log(this.name + this.age + '岁了，' + '旺旺旺旺！');
};
}
// 创建实例
const myDog = new Dog('旺财', 2);
myDog.bark(); //旺财2岁了，旺旺旺旺！
2. 原型链：家族的“传家宝”
// 通过原型共享方法（节省内存）
Dog.prototype.eat = function() {
console.log(this.name + '在啃骨头~');
};
myDog.eat(); // 旺财在啃骨头~
三、Class 语法糖：更现代的写法
1. 基础类定义
class Animal {
constructor(name) {
this.name = name;
}
// 方法（自动挂载到原型）
speak() {
console.log(`${this.name}发出声音`);
}
}
const animal = new Animal('小狗');
animal.speak(); // 小狗发出声音
2. 继承：子类复用父类能力
class Cat extends Animal {
constructor(name, color) {
super(name); // 调用父类构造函数
this.color = color;
}
// 重写父类方法
speak() {
super.speak(); // 可选：先执行父类方法
console.log('喵喵~');
}
}
const myCat = new Cat('咪咪', '白色');
myCat.speak();
// 输出：
// 咪咪发出声音
// 喵喵~
四、实战：动物世界模拟器
1. 功能演示
2. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="createCat()">生成猫咪</button>
<button onclick="createDog()">生成小狗</button>
<div id="animalList"></div>
<script>
class Animal {
constructor(name) {
this.name = name;
this.id = Date.now();
}
introduce() {
return `我是 ${this.name}`;
}
}
class Cat extends Animal {
constructor(name) {
super(name);
}
speak() {
return '喵~';
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
return '汪！';
}
}
function createCat() {
const cat = new Cat('猫咪' + Math.floor(Math.random() * 100));
showAnimal(cat);
}
function createDog() {
const dog = new Dog('小狗' + Math.floor(Math.random() * 100));
showAnimal(dog);
}
function showAnimal(animal) {
const div = document.createElement('div');
div.innerHTML = `
<p>${animal.introduce()}，我的ID是 ${animal.id}</p>
<button onclick="alert('${animal.speak()}')">叫一声</button>
`;
document.getElementById('animalList').appendChild(div);
}
</script>
</body>
</html>
五、常见问题解答
1. 为什么用面向对象？
- 代码更易维护：修改猫的行为无需影响狗
- 提升复用性：通过继承快速扩展功能
- 更贴合现实思维：用“对象”描述事物更直观
2. 什么时候该用 class？
- 需要创建多个相似对象时（如用户、商品）
- 需要层次化组织功能时（如动物 → 猫 → 布偶猫）
3. 注意事项
- constructor 是类的“初始化方法”，new 时自动调用
- 类方法之间不需要逗号分隔
- 静态方法用 static 关键字定义（类直接调用）
下节预告
第 15 课：设计模式——代码的“武林秘籍”
-
单例模式：确保唯一实例
-
观察者模式：实现消息通知
-
实战：实现全局状态管理
回复【JS】获取本课源码+工具包！
