javascript如何实现继承_ES6的class与原型继承有什么区别？-js教程-PHP中文网

javascript如何实现继承_ES6的class与原型继承有什么区别？

狼影

发布： 2025-12-20 09:50:39

原创

845人浏览过

ES6 的 class 是原型继承的语法糖，本质未改变继承机制，仍依赖原型链；通过 extends 和 super 实现继承，而 ES5 需手动操作 prototype 和 constructor；两者底层结构一致，但 class 写法更清晰、可读性更高。

javascript如何实现继承_es6的class与原型继承有什么区别？

ES6 的 class 本质是原型继承的语法糖，它没有引入新的继承机制，只是让基于原型的继承写起来更清晰、更接近传统面向对象语言的风格。真正起作用的，仍然是 JavaScript 底层的原型链（[[Prototype]]）。

class 实现继承：用 extends + super

使用 class 实现继承非常直观：

子类通过 extends 关键字继承父类
构造函数中必须调用 super()，否则无法访问 this
super 既可调用父类构造函数，也可访问父类方法（如 super.method()）

示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 必须先调用
    this.breed = breed;
  }
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Max', 'Golden');
dog.speak(); // Max makes a sound.（继承自 Animal）
dog.bark();  // Max barks!

登录后复制

原型继承：手动操作 prototype 和 constructor

在 ES5 及之前，继承靠的是显式设置原型链和修正构造器：

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

用 Object.create(Parent.prototype) 设置子类原型
手动赋值 Child.prototype.constructor = Child，否则 constructor 指向错误
在子类构造函数中用 Parent.call(this, ...) 借用父类构造逻辑

示例：

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

function Dog(name, breed) {
  Animal.call(this, name); // 借用构造
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 建立原型链
Dog.prototype.constructor = Dog; // 修复 constructor

Dog.prototype.bark = function() {
  console.log(`${this.name} barks!`);
};

登录后复制