当前位置：首页 > news >正文

前端碎碎念笔记：JavaScript 对象的继承与多态

news 2025/10/15 7:33:39

▌这玩意是啥？

继承就像遗传——小狗继承了动物的“会叫”“会睡觉”的技能；多态就像个性，不同动物都会叫，但叫声各有千秋。在 JavaScript 里，用 extends 关键字就能让一个类继承另一个类的属性和方法，再用“重写”让它们各自发挥特长。

▌能干啥？

继承能减少重复代码，把通用逻辑放在父类里。多态能让同一个方法名在不同类中有不同行为，这样代码看起来更干净，也更灵活。

▌看个例子：

// 父类别：动物
class Animal {
constructor(name, age) {this.name = name;  // 动物名称this.age = age;    // 动物年龄}// 父类别的方法speak() {return`${this.name} 发出声音`;}// 共同行为sleep() {return`${this.name} 正在睡觉`;}
}// 子类别：狗（继承动物）
class Dog extends Animal {
constructor(name, age, breed) {super(name, age);   // 调用父类别构造函数this.breed = breed; // 狗狗品种（子类独有属性）}// 覆写父类别的 speak 方法（多型）speak() {return`${this.name} 汪汪叫`;}// 子类别独有方法fetch() {return`${this.name} 去捡球`;}
}// 子类别：猫（继承动物）
class Cat extends Animal {
constructor(name, age, color) {super(name, age);   // 调用父类别构造函数this.color = color; // 猫咪颜色（子类独有属性）}// 覆写父类别的 speak 方法（多型）speak() {return`${this.name} 喵喵叫`;}// 子类别独有方法climb() {return`${this.name} 爬树`;}
}// 实际使用范例
const dog = new Dog("小白", 3, "柴犬");
const cat = new Cat("小花", 2, "橘色");console.log(dog.speak()); // 输出：小白 汪汪叫
console.log(cat.speak()); // 输出：小花 喵喵叫
console.log(dog.sleep()); // 输出：小白 正在睡觉（继承自父类）
console.log(cat.sleep()); // 输出：小花 正在睡觉（继承自父类）
console.log(dog.fetch()); // 输出：小白 去捡球（子类独有）
console.log(cat.climb()); // 输出：小花 爬树（子类独有）const animals = [dog, cat];
animals.forEach(animal => {
console.log(animal.speak()); // 各自展现不同的叫声
});

▌咋用？