首页
/ 正文

JavaScript 类(class) extends 关键字（一文讲透）

更新时间: 2025-04-15 12:43:35

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

在 JavaScript 开发中，面向对象编程（OOP）的实现方式经历了从 ES5 的构造函数与原型链到 ES6 类（class）的语法革新。其中，extends 关键字作为类继承的核心机制，为代码复用和结构化设计提供了强大支持。本文将深入解析 JavaScript 类(class) extends 关键字 的语法、原理及实际应用场景，通过循序渐进的案例与形象比喻，帮助开发者掌握这一重要工具。

一、类继承的基石：基础概念与语法

1.1 类继承的定义与作用

类继承是面向对象编程中的核心特性之一，允许开发者通过 extends 关键字让一个类（子类）继承另一个类（父类）的属性和方法。这种设计模式能够：

减少重复代码：避免在多个类中编写相同的功能逻辑。
提升代码可维护性：修改父类的方法时，所有子类会自动继承更新。
构建层级关系：通过继承链形成清晰的类结构（如 Animal → Dog → GoldenRetriever）。

1.1.1 类继承的语法结构

class ParentClass {  
  constructor() { /* 初始化逻辑 */ }  
  method() { /* 共享方法 */ }  
}  

class ChildClass extends ParentClass {  
  constructor() {  
    super(); // 调用父类构造函数  
    // 子类特有的初始化逻辑  
  }  
  overrideMethod() {  
    super.method(); // 调用父类方法  
    // 扩展或修改逻辑  
  }  
}

关键点说明：

super() 必须在子类构造函数中最先调用，否则会抛出错误。
super.method() 可以显式访问父类方法，即使子类重写了该方法。

1.2 类继承与 ES5 原型链的对比

ES5 通过原型链实现继承，代码较为繁琐：

// ES5 方式  
function Parent() {  
  this.name = 'Parent';  
}  
Parent.prototype.sayHello = function() {  
  console.log(`Hello from ${this.name}`);  
};  

function Child() {  
  Parent.call(this); // 继承父类属性  
  this.type = 'Child';  
}  
// 继承父类方法  
Child.prototype = Object.create(Parent.prototype);  
Child.prototype.constructor = Child;  

const child = new Child();  
child.sayHello(); // 输出 "Hello from Parent"

而 ES6 的类语法通过 extends 简化了这一过程：

class Parent {  
  constructor() { this.name = 'Parent'; }  
  sayHello() { console.log(`Hello from ${this.name}`); }  
}  

class Child extends Parent {  
  constructor() {  
    super();  
    this.type = 'Child';  
  }  
}  

const child = new Child();  
child.sayHello(); // 同样输出 "Hello from Parent"

对比总结：ES6 类语法将继承逻辑封装在 extends 和 super 中，代码更简洁且语义更清晰。

二、继承机制的深度解析

2.1 继承链与原型链的关系

在 JavaScript 中，extends 关键字本质上是对原型链的封装。当声明 class Child extends Parent 时，JavaScript 会自动完成以下操作：

设置原型对象：Child.prototype 的 [[Prototype]]（隐式原型）指向 Parent.prototype。
继承方法：子类实例会继承父类原型上的所有方法。
构造函数绑定：子类的 constructor 方法默认指向自身，但必须通过 super() 显式调用父类构造函数。

2.1.1 继承链的可视化比喻

可以将继承链想象为“家族族谱”：

父类是家族中的长辈，拥有基础属性（如姓名、年龄）。
子类是后代成员，继承长辈的属性并可能添加自己的特征（如职业、兴趣）。
super() 相当于“向长辈学习基本生存技能”，而子类可以在此基础上发展独特技能。

2.2 多层继承与方法重写

2.2.1 多层继承案例

class GrandParent {  
  constructor() { this.name = 'GrandParent'; }  
  greet() { console.log(`Hi, I'm ${this.name}`); }  
}  

class Parent extends GrandParent {  
  constructor() {  
    super();  
    this.name = 'Parent';  
  }  
}  

class Child extends Parent {  
  constructor() {  
    super(); // 先调用 Parent 的构造函数  
    this.type = 'Child';  
  }  
}  

const child = new Child();  
child.greet(); // 输出 "Hi, I'm Parent"

关键观察：

多层继承中，每个子类的 super() 会逐级向上调用父类的构造函数。
如果子类未重写父类方法（如 greet()），则直接继承父类行为。

2.2.2 方法重写与 `super` 的协同使用

class Animal {  
  speak() { console.log('Animal makes a sound'); }  
}  

class Dog extends Animal {  
  speak() {  
    super.speak(); // 调用父类方法  
    console.log('Dog barks!'); // 添加子类逻辑  
  }  
}  

const dog = new Dog();  
dog.speak();  
// 输出：  
// Animal makes a sound  
// Dog barks!

方法重写的规则：

子类可通过同名方法覆盖父类实现，但需显式调用 super.method() 保留父类逻辑。
若完全不想保留父类方法，可直接删除 super 调用。

2.3 静态方法与继承

静态方法属于类本身而非实例，其继承逻辑与实例方法不同。

class Parent {  
  static staticMethod() {  
    return 'Static from Parent';  
  }  
}  

class Child extends Parent {  
  static staticMethod() {  
    return super.staticMethod() + ' (overridden)'; // 需通过 super 访问父类静态方法  
  }  
}  

console.log(Child.staticMethod()); // 输出 "Static from Parent (overridden)"

关键区别：

静态方法通过 super 访问父类方法，但语法与实例方法相同。
静态方法的继承需显式重写，不会自动继承父类的静态方法。

三、实战案例与进阶技巧

3.1 继承与设计模式结合

3.1.1 工厂模式与继承的结合

// 父类：基础形状工厂  
class Shape {  
  constructor(width, height, color) {  
    this.width = width;  
    this.height = height;  
    this.color = color;  
  }  
  draw() { console.log(`Drawing ${this.color} shape`); }  
}  

// 子类：矩形工厂  
class Rectangle extends Shape {  
  area() {  
    return this.width * this.height;  
  }  
}  

// 子类：圆形工厂  
class Circle extends Shape {  
  constructor(radius, color) {  
    super(2 * radius, 2 * radius, color); // 通过直径传递宽高  
    this.radius = radius;  
  }  
  circumference() {  
    return 2 * Math.PI * this.radius;  
  }  
}  

const circle = new Circle(5, 'blue');  
circle.draw(); // 输出 "Drawing blue shape"  
console.log(circle.circumference()); // 输出约 31.4159

设计模式价值：通过继承，Rectangle 和 Circle 共享了 Shape 的属性与 draw() 方法，同时各自扩展了独特功能。

3.2 高级技巧：混入（Mixin）与继承的互补

问题背景：若需向多个不相关的类添加相同功能（如日志记录或缓存），继承可能因层级冲突导致设计僵化。
解决方案：使用 Mixin（组合式继承）与 extends 结合：

// Mixin 定义：日志记录功能  
const LoggerMixin = (superclass) => class extends superclass {  
  log(message) {  
    console.log(`[${new Date().toISOString()}] ${message}`);  
  }  
};  

// 应用到不同类  
class User extends LoggerMixin(EventEmitter) {  
  // 继承了 EventEmitter 和 Logger 功能  
}  

class Product extends LoggerMixin(Shape) {  
  // 继承了 Shape 和 Logger 功能  
}

核心思想：通过函数返回类的方式，将通用功能以“组合”而非“继承”的方式复用，避免单一继承的局限性。

四、常见问题与调试技巧

4.1 继承时的常见错误

4.1.1 忘记调用 `super()`

class Parent { constructor() { console.log('Parent initialized'); } }  
class Child extends Parent {  
  constructor() {  
    // 错误：未调用 super()  
  }  
}  

new Child(); // 抛出错误：必须调用 super()

解决方法：在子类构造函数中始终以 super() 开头。

4.1.2 静态方法未正确覆盖

class Parent {  
  static calc() { return 1; }  
}  

class Child extends Parent {  
  // 错误：未声明静态方法时，无法通过 super 调用  
  calc() { return super.calc() + 1; } // 报错  
}  

// 正确写法：  
class Child extends Parent {  
  static calc() {  
    return super.calc() + 1;  
  }  
}

4.2 调试工具与技巧

4.2.1 使用 `instanceof` 判断继承关系

class A {}  
class B extends A {}  

const b = new B();  
console.log(b instanceof B); // true  
console.log(b instanceof A); // true

4.2.2 通过 `Object.getPrototypeOf()` 查看原型链

const protoChain = [];  
let current = Child.prototype;  
while (current) {  
  protoChain.push(current.constructor.name);  
  current = Object.getPrototypeOf(current);  
}  
console.log(protoChain); // 输出类似 ["Child", "Parent", "Object"]

五、结论

JavaScript 类(class) extends 关键字 是现代前端开发中不可或缺的工具，它通过简洁的语法和直观的继承机制，帮助开发者构建模块化、可维护的代码结构。从基础的父子类关系到复杂的多层继承与 Mixin 组合，掌握 extends 的核心原理与最佳实践，能够显著提升代码的复用性与设计优雅度。

行动建议：

从简单案例入手，逐步实践多层继承与方法重写。
使用 instanceof 和 Object.getPrototypeOf() 分析原型链。
结合设计模式（如工厂、组合）深化对继承的理解。

通过持续的实践与探索，开发者将能够灵活运用 extends 关键字，打造出高效、可扩展的 JavaScript 项目。

JavaScript 类(class) extends 关键字（一文讲透）

一、类继承的基石：基础概念与语法

1.1 类继承的定义与作用

1.1.1 类继承的语法结构

1.2 类继承与 ES5 原型链的对比

二、继承机制的深度解析

2.1 继承链与原型链的关系

2.1.1 继承链的可视化比喻

2.2 多层继承与方法重写

2.2.1 多层继承案例

2.2.2 方法重写与 `super` 的协同使用

2.3 静态方法与继承

三、实战案例与进阶技巧

3.1 继承与设计模式结合

3.1.1 工厂模式与继承的结合

3.2 高级技巧：混入（Mixin）与继承的互补

四、常见问题与调试技巧

4.1 继承时的常见错误

4.1.1 忘记调用 `super()`

4.1.2 静态方法未正确覆盖

4.2 调试工具与技巧

4.2.1 使用 `instanceof` 判断继承关系

4.2.2 通过 `Object.getPrototypeOf()` 查看原型链

五、结论

最新发布

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1 最新破解版安装教程（附激活码~）

DataGrip 2025.1 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1 最新激活码，破解版安装教程（至2099年~）

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

JavaScript 类(class) extends 关键字（一文讲透）

一、类继承的基石：基础概念与语法

1.1 类继承的定义与作用

1.1.1 类继承的语法结构

1.2 类继承与 ES5 原型链的对比

二、继承机制的深度解析

2.1 继承链与原型链的关系

2.1.1 继承链的可视化比喻

2.2 多层继承与方法重写

2.2.1 多层继承案例

2.2.2 方法重写与 super 的协同使用

2.3 静态方法与继承

三、实战案例与进阶技巧

3.1 继承与设计模式结合

3.1.1 工厂模式与继承的结合

3.2 高级技巧：混入（Mixin）与继承的互补

四、常见问题与调试技巧

4.1 继承时的常见错误

4.1.1 忘记调用 super()

4.1.2 静态方法未正确覆盖

4.2 调试工具与技巧

4.2.1 使用 instanceof 判断继承关系

4.2.2 通过 Object.getPrototypeOf() 查看原型链

五、结论

最新发布

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1 最新破解版安装教程（附激活码~）

DataGrip 2025.1 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1 最新激活码，破解版安装教程（至2099年~）

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

2.2.2 方法重写与 `super` 的协同使用

4.1.1 忘记调用 `super()`

4.2.1 使用 `instanceof` 判断继承关系

4.2.2 通过 `Object.getPrototypeOf()` 查看原型链