JavaScript继承方式及类与构造函数区别

哈喽！今天心血来潮给大家带来了《JavaScript继承实现方法及类与构造函数区别》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript 中的 class 是构造函数的语法糖，继承本质基于原型链；ES6 extends 自动处理原型链与 super() 调用，而 ES5 需手动实现寄生组合式继承。

JavaScript 中的继承和类与构造函数的关系，核心在于：ES6 的 class 本质是构造函数的语法糖，而继承机制底层始终基于原型链（prototype chain）。

继承的实现方式：从原型链到 extends

JavaScript 原生不支持传统面向对象语言中的“类继承”，而是通过原型对象共享属性和方法。现代写法虽用 class 和 extends，但背后仍是原型操作。

• ES5 手动模拟继承（寄生组合式）：先用 call 继承父构造函数的实例属性，再用 Object.setPrototypeOf(Child.prototype, Parent.prototype) 或 Child.prototype = Object.create(Parent.prototype) 设置原型链，最后修正 constructor 指向。
• ES6 class extends：自动完成上述两步，并强制要求子类构造函数中调用 super()（即父类构造函数），否则报错。例如：

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
    this.breed = breed;
  }
  bark() { console.log(this.name + ' barks'); }
}

编译后实际仍生成基于 function 和原型赋值的代码，Dog.prototype.__proto__ === Animal.prototype 成立。

类（class）和构造函数（function）的区别

表面上看，class 更简洁、有明确的继承语法；本质上，它只是对构造函数的封装，二者在运行时行为高度一致，但存在关键差异：

• 声明提升不同：函数声明会整体提升（可先调用后定义），而 class 声明不会提升，且存在“暂时性死区”（TDZ）——必须先声明才能使用，否则报 ReferenceError。
• 调用方式限制：类必须用 new 调用，直接调用会抛出 TypeError；普通构造函数若不加 new，通常只是普通函数执行（this 指向全局或 undefined），不会报错（除非内部严格校验）。
• 内部机制差异：类的方法默认不可枚举（Object.keys(Class.prototype) 不会返回它们），而手动挂载到 prototype 上的函数是可枚举的；类内部所有代码自动运行在严格模式下。

为什么推荐用 class？

不是因为它改变了继承的本质，而是它降低了出错概率、提升了可读性和一致性：

• 避免手动设置原型链时忘记修正 constructor 或漏掉 super；
• 静态方法（static）、getter/setter、私有字段（#field）等特性语法更自然；
• 配合 Babel 或 TypeScript，能更好对接现代工程实践（如装饰器、类型检查）。

但理解构造函数和原型链仍是调试和深入学习的基础——比如 instanceof 判断、Object.getPrototypeOf() 查链、或手写兼容老环境的 polyfill 时，绕不开它们。

以上就是《JavaScript继承方式及类与构造函数区别》的详细内容，更多关于的资料请关注golang学习网公众号！