JavaScript继承机制，怎么实现模块导出？-js教程-PHP中文网

javascript继承通过class+extends实现原型链复用，模块导出用export/default共享代码；二者独立但可组合，如导出继承后的子类，需注意esm环境要求与导入顺序。

javascript继承机制，怎么实现模块导出？

JavaScript 中的继承和模块导出是两个独立但常一起使用的概念：继承解决对象间的行为复用（如 class extends），模块导出解决代码组织与共享（如 export / import）。它们不互相依赖，但可以组合使用——比如导出一个继承自父类的子类。

继承怎么实现？

现代 JavaScript 主要通过 class + extends 实现基于原型的继承：

父类定义通用方法和属性，子类用 extends 继承，并可重写或扩展
子类构造函数中必须调用 super() 初始化父类实例上下文
所有继承关系最终仍基于原型链（Child.prototype.__proto__ === Parent.prototype）

例如：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}
<p>class Dog extends Animal {
constructor(name, breed) {
super(name); // 必须调用
this.breed = breed;
}
bark() {
console.log("Woof!");
}
}</p>

模块导出怎么写？

ES 模块（ESM）使用 export 关键字导出变量、函数、类等，供其他文件导入：

export default：每个模块最多一个默认导出，导入时名称可自定义
export（命名导出）：可多个，导入时需用原名或重命名
可直接导出类、函数、对象，也支持导出继承后的子类

例如导出上面的 Dog 类：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

// animal.js
export default class Animal { /* ... */ }
<p>export class Dog extends Animal { /<em> ... </em>/ }</p><p>// 或者导出为默认：
// export default class Dog extends Animal { ... }</p>

继承类怎么导出？

把继承后的类当作普通值导出即可，没有特殊语法：

导出默认子类：export default class MyComponent extends React.Component { ... }
命名导出子类：export class Button extends HTMLElement { ... }
也可先定义再导出：class Form extends EventEmitter {}; export { Form };

导入时按常规方式使用：

// main.js
import Animal from './animal.js';
import { Dog } from './animal.js';
<p>const dog = new Dog('Buddy', 'Golden');
dog.speak(); // Buddy makes a sound
dog.bark();  // Woof!</p>