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

11次阅读

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!`); };

核心 区别:写法、可读性与底层一致性

写法上class 是声明式、结构化语法;原型继承是命令式、需手动维护原型链。

可读性上class 更易理解继承关系和执行顺序(比如 super() 强制调用位置),而原型方式容易遗漏 constructor 修复或 call 步骤,导致隐性 bug。

底层上:两者最终都生成相同的原型链结构。例如 Dog.prototype.__proto__ === Animal.prototype 在两种方式下都为 true

限制上class 内部方法默认不可枚举(for…in 不会遍历到),而手动挂载到 prototype 上的方法默认可枚举(除非显式设 enumerable: false)。

注意事项:class 并非“真类”,仍受原型规则约束

class 不是 Java/C++ 那样的类,它不能被实例化为“类型”本身,也不能实现多继承。所有行为依然依赖原型查找:

  • 方法调用时,引擎仍沿 obj.__proto__ → Constructor.prototype → …… → Object.prototype 查找
  • 静态方法(static)实际定义在类本身(即构造函数)上,而非其 prototype
  • 子类的 super 在方法内部指向父类的 prototype,本质仍是原型访问

所以,理解原型链仍是掌握 JavaScript 继承的关键——class 只是让你少写几行容易出错的代码。

以上就是

星耀云
版权声明:本站原创文章,由 星耀云 2025-12-19发表,共计1801字。
转载说明:转载本网站任何内容,请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。
text=ZqhQzanResources