javascript - 子类化 JavaScript 数组 - 构造函数参数未传递给数组

Question

我想子类化一个 javascript 数组并将构造函数参数传递给该数组。我拥有的是:

function SubArray(arguments) {
    Array.apply(this, arguments);
}

SubArray.prototype = Array.prototype;

测试未表明参数正在传递给数组

var x = new SubArray("One", "Two", "Three");
// Object[]
// x.length = 0

而当我使用数组执行此操作时，我得到了这个

var x = new Array("One", "Two", "Three");
// Object["One", "Two", "Three"]
// x.length = 3

我做错了什么？

Answer 1

ES6

在 ES6 中，您可以使用 class 语法扩展 Array

class SubArray extends Array {
    constructor() {
        super(...arguments);
    }
    first() {
        return this[0];
    }
}

length 将按预期工作

var sa = new SubArray('foo', 'bar');
sa[2] = 'baz';
sa.length; // 3
sa.first(); // "foo"
sa instanceof SubArray; // true

---

ES5 之前

直到并包括 ES5，没有办法在不丢失功能的情况下以通常的构造函数原型(prototype)方式干净地扩展 Array，相反，您必须向 Array 实例添加属性

function SubArray() {
    var arr = Array.apply(null, arguments);
    arr.first = function () {return this[0];};
    return arr;
}

使用它不再需要 new 作为一个 Object 从函数返回，并且 instanceof 将无法确定 子数组。

var sa = SubArray('foo', 'bar');
sa[2] = 'baz';
sa.length; // 3
sa.first(); // "foo"
sa instanceof SubArray; // false -- this gets broken

---

ES5(慢)

在行为比速度更重要的 ES5 环境中，您可以根据需要使用 Object.setPrototypeOf (see MDN warning) 强制原型(prototype)链。 , 这“有点像 hack” 看起来像

function SubArray() {
    var arr = Array.apply(null, arguments);
    Object.setPrototypeOf(arr, SubArray.prototype);
    return arr;
}
SubArray.prototype = Object.create(Array.prototype);
SubArray.prototype.first = function () {return this[0];};

同样，不再需要 new，但这次实例的行为完全符合正常扩展时的预期。

var sa = SubArray('foo', 'bar');
sa[2] = 'baz';
sa.length; // 3
sa.first(); // "foo"
sa instanceof SubArray; // true