JavaScript中的原型链继承与Class语法糖-js教程-PHP中文网

JavaScript中的原型链继承与Class语法糖

狼影

发布： 2025-11-20 11:55:31

原创

810人浏览过

JavaScript继承基于原型链，ES6的class是其语法糖。通过Object.create()建立原型链，实现方法共享；class中extends本质仍是设置原型指向。例如，Student extends Person使子类继承父类属性方法，super()调用父构造函数。class语法更清晰、易维护，推荐现代项目使用，但需注意：方法在原型上、必须用new调用、无变量提升、私有字段用#定义。尽管class写法直观，底层仍依赖原型链，理解二者关系有助于掌握JS对象模型，结合使用更高效。

javascript中的原型链继承与class语法糖

JavaScript中的继承机制和其他面向对象语言有所不同，它基于原型链实现。ES6引入的class语法让代码看起来更接近传统类式语言，但底层依然依赖原型链。理解这两者的关系有助于写出更清晰、可维护的代码。

原型链继承的基本原理

在JavaScript中，每个对象都有一个内部属性[[Prototype]]，指向其原型对象。当我们访问一个对象的属性时，如果该对象本身没有这个属性，引擎会沿着原型链向上查找，直到找到或到达原型链末端（null）为止。

通过构造函数创建实例时，构造函数的prototype属性就是实例的原型。例如：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

// 建立原型链连接
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const s = new Student("Alice", 8);
s.greet(); // 输出: Hello, I'm Alice

登录后复制

这里通过Object.create()让Student.prototype继承自Person.prototype，实现了原型链上的方法共享。

立即学习“Java免费学习笔记（深入）”；

Class语法糖的本质

ES6的class并不是全新的继承模型，而是上述原型继承的语法封装。用class重写上面的例子：

OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

111

查看详情

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log("Hello, I'm " + this.name);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

const s = new Student("Alice", 8);
s.greet(); // 输出: Hello, I'm Alice

登录后复制

这段代码的行为和前面完全一致。class只是让原型继承的写法更直观、更易读。extends关键字背后仍然是设置子类原型指向父类原型，并处理构造函数调用。