当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript类与继承实现全解析

JavaScript类与继承实现全解析

2025-12-04 10:34:43 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript类与继承实现详解》，聊聊，希望可以帮助到正在努力赚钱的你。

JavaScript的OOP基于原型，ES6引入class语法糖使代码更清晰。通过class定义类，constructor初始化属性，方法挂载到原型上；extends实现继承，super调用父类构造函数；支持静态方法和私有字段（#开头），增强封装性，提升开发体验。

JavaScript面向对象编程_类与继承实现

JavaScript 的面向对象编程（OOP）虽然不像 Java 或 C++ 那样基于类的系统，但从 ES6 开始引入了 class 语法糖，让开发者可以用更直观的方式实现类与继承。实际上，JavaScript 依然是基于原型（prototype）的继承机制，但 class 让代码结构更清晰、易于理解。

类的定义与使用

在 ES6 中，可以通过 class 关键字定义一个类。类中可以包含构造函数 constructor 和实例方法。

示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  }
}

const person1 = new Person("小明", 25);
person1.greet(); // 输出：你好，我是小明，今年25岁。

上面代码中，constructor 是类的构造方法，用于初始化实例属性。其他方法如 greet 会自动挂载到类的原型上，所有实例共享。

继承的实现

通过 extends 关键字可以实现类的继承，子类可以继承父类的属性和方法，并可通过 super 调用父类的构造函数或方法。

示例：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类构造函数
    this.grade = grade;
  }

  study() {
    console.log(`${this.name}正在学习，年级是${this.grade}。`);
  }

  // 重写父类方法
  greet() {
    console.log(`我是学生 ${this.name}，年龄${this.age}，年级${this.grade}。`);
  }
}

const student1 = new Student("小红", 20, "大三");
student1.greet(); // 输出：我是学生 小红，年龄20，年级大三。
student1.study(); // 输出：小红正在学习，年级是大三。

注意：super() 必须在 this 之前调用，否则会报错。子类通过 super 继承父类的实例属性，同时可以扩展自己的属性和方法。

静态方法与私有字段（可选现代语法）

类还支持静态方法和私有字段，进一步增强封装性。

static 方法属于类本身，不能通过实例调用。
# 开头的字段为私有字段，只能在类内部访问。

示例：

class Teacher extends Person {
  #salary; // 私有字段

  constructor(name, age, subject, salary) {
    super(name, age);
    this.subject = subject;
    this.#salary = salary;
  }

  static introduce() {
    console.log("这是教师类，用于管理教师信息。");
  }

  getSalary() {
    return this.#salary;
  }
}

const teacher1 = new Teacher("王老师", 35, "数学", 8000);
teacher1.greet();         // 可以调用继承的方法
console.log(teacher1.getSalary()); // 8000，通过公有方法访问私有字段
Teacher.introduce();      // 静态方法直接通过类调用

私有字段增强了数据安全性，避免外部误操作；静态方法适合工具型功能，不依赖实例状态。

基本上就这些。JavaScript 的类与继承语法简洁，底层仍是原型链，但开发体验接近传统 OOP 语言，合理使用能让代码更模块化、易维护。

以上就是《JavaScript类与继承实现全解析》的详细内容，更多关于继承,原型,ES6,JavaScript类,class语法糖的资料请关注golang学习网公众号！

继承原型 ES6 JavaScript类 class语法糖