怎么使用类继承无缝扩展 Array 或 Error 等原生内置对象-js教程-PHP中文网

es6+中可继承array、error等内置对象，但必须在子类构造函数中调用super()并正确传参，否则内部槽位未初始化会导致array.isarray()返回false、length不响应或stack为空；推荐直接使用class extends语法并严格遵循super规则。

怎么使用类继承无缝扩展 array 或 error 等原生内置对象

在现代 JavaScript（ES6+）中，可以通过 class 语法继承原生内置对象（如 Array、Error、Map、Promise 等），但必须注意：**只有在构造函数中调用 super() 并正确传递参数，才能保证实例的内部槽位（internal slots）被正确初始化**，否则会丢失关键行为（比如 Array.isArray() 返回 false，或 err.stack 为空）。

继承 Array：必须用 super() 传参，且不能省略 new.target

直接继承 Array 时，若在子类构造函数中未调用 super(...args)，或未保留 new.target 的语义，会导致实例不是真正的数组——Array.isArray(myArr) 返回 false，myArr.length 不响应式更新，甚至 JSON.stringify 失效。

✅ 正确写法（支持所有原生数组行为）：

class MyArray extends Array {
  constructor(...args) {
    // 必须调用 super，且传入 args
    super(...args);
    // 可在此添加自定义逻辑，例如日志或默认值
    this._createdAt = Date.now();
  }
  customMethod() {
    return `size: ${this.length}`;
  }
}

使用示例：

const arr = new MyArray(1, 2, 3); → Array.isArray(arr) 是 true
arr.push(4); → length 自动更新，arr[3] 可访问
JSON.stringify(arr) 输出 [1,2,3,4]

继承 Error：必须显式设置 name 和 message，并调用 super()

继承 Error 时，仅 super(message) 不足以让堆栈信息完整；还需手动赋值 this.name（否则为 "Error"），且推荐在构造函数末尾调用 Error.captureStackTrace?.(this, MyError)（Node.js）或依赖 V8 的自动捕获（浏览器中通常已支持）。

✅ 推荐写法（跨环境兼容）：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

class ValidationError extends Error {
  constructor(message, code) {
    // 先调用 super，确保 stack 初始化
    super(message);
    // 修正 name（否则为 "Error"）
    this.name = 'ValidationError';
    // 附加自定义属性
    this.code = code;
    // （可选）在 Node.js 中增强 stack（非必需，现代环境通常自动处理）
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, ValidationError);
    }
  }
}

效果：

throw new ValidationError('Invalid email', 'EMAIL_INVALID'); → err.name === 'ValidationError'
err.stack 包含正确文件/行号，且包含 ValidationError 名称
err instanceof ValidationError 和 err instanceof Error 均为 true

哪些内置对象可以安全继承？哪些有坑？

✅ 官方明确支持继承的内置类（ECMAScript 规范要求其实现 [[Construct]] 支持子类化）：

Array、Error、Function、Boolean、Number、String、Date、RegExp
Promise、Map、Set、WeakMap、WeakSet

⚠️ 注意事项：

Object 和 ArrayBuffer 虽然语法上允许 extends，但实际意义有限（Object 子类无特殊内部行为；ArrayBuffer 子类需额外处理 .slice() 等方法）
TypedArray（如 Uint8Array）不支持直接继承（规范禁止），需通过包装或组合实现扩展
所有继承都依赖引擎对 new.target 的正确处理 —— 确保使用现代运行时（Chrome 49+、Firefox 45+、Safari 10.1+、Node.js 6.0+）