继承Array类自定义构造函数后map方法未定义的问题

你遇到的问题核心在于自定义构造函数的参数处理逻辑和Array内置构造函数的行为不匹配，以及调用方式之间的冲突，咱们一步步拆解清楚：

问题到底出在哪里？ #

你的自定义构造函数是：

constructor(items) {
  super(...items);
}

这个构造函数只接收单个参数，并尝试把它展开后传给Array的构造函数。这里藏着两个关键问题：

1. 参数传递的不匹配
   当你调用new Array2([9, 1, 4, 0])时，items是数组[9,1,4,0]，super(...items)等价于new Array(9,1,4,0)，这确实能创建包含四个元素的Array2实例，看起来没问题。但如果你的调用方式不小心写成了new Array2(9,1,4,0)（传递四个独立参数），items会被赋值为第一个参数9，剩下的参数直接被丢弃。此时super(...9)会尝试展开数字9——而数字不是可迭代对象，这会导致super调用失败，this无法被正确初始化为Array2实例，自然this.map就会是undefined，抛出你看到的错误。

2. 默认构造函数的行为差异
   当你移除自定义构造函数时，JavaScript会自动生成一个默认构造函数：

   constructor(...args) {
     super(...args);
   }
   

   这个默认构造函数会接收任意数量的参数，并原封不动地传递给Array的构造函数。不管你是传递单个数组（new Array2([9,1,4,0])）还是多个独立参数（new Array2(9,1,4,0)），它都能正确处理，所以this会被正确初始化，map方法也能正常工作。

如何修正你的代码？ #

如果你想保持自定义构造函数，同时兼容两种调用方式（传递单个数组或多个元素），可以修改构造函数来灵活处理参数：

export default class Array2 extends Array {
  constructor(...items) {
    // 如果只传了一个参数，且这个参数是可迭代对象，就展开它
    if (items.length === 1 && typeof items[0][Symbol.iterator] === 'function') {
      super(...items[0]);
    } else {
      // 否则直接传递所有参数
      super(...items);
    }
  }

  addOne() {
    return this.map(x => x + 1);
  }
}

这样不管你是用new Array2([9,1,4,0])还是new Array2(9,1,4,0)调用，都能正确创建Array2实例，addOne方法也能返回你预期的Array2(4) [10, 2, 5, 1]。

另外，如果你希望map这类数组方法返回的始终是Array2实例（默认其实已经会这样，但可以显式声明），可以添加Symbol.species的静态 getter：

static get [Symbol.species]() {
  return this;
}

内容的提问来源于stack exchange，提问作者StueyKent