Subclassing JavaScript arrays - constructor arguments not passing to array

Question

I want to subclass a javascript Array and pass constructor arguments to the array. What I have is:

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

SubArray.prototype = Array.prototype;

Test does not indicate that arguments are being passed to the Array

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

Whereas when I do this with an Array I get this

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

What am I doing wrong?

Array is a DOM host Object, sadly you can't extend it like this :( as you saw, .length won't work as expected, .apply won't work as expected, you have to create a normal Array instance and add properties to it as desired — Paul S.
– Paul S., Commented Jan 14, 2016 at 22:53
You need ES6 in order to subclass the Array object. It is considered an exotic object (due to its peculiar .length property) that has issues when trying to subclass in ES5 or earlier. — jfriend00
– jfriend00, Commented Jan 14, 2016 at 22:59

Paul S. · Accepted Answer · 2016-01-15 02:08:08Z

6

ES6

In ES6 you can extend Array using the class syntax

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

length will work as expected

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

Pre-ES5

Up to and including ES5 there is no way to cleanly extend Array in the usual constructor-prototype way without losing functionality, instead you have to add properties to an Array instance

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

Using this no longer requires new as an Object is returned from the function, and instanceof will not be able to determine SubArray.

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

ES5 (slow)

In an ES5 environment where behaviour is more important than speed, you can force the prototype chain as desired using Object.setPrototypeOf (see MDN warning), this is "a bit of a hack" and would look like

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];};

Again, new is no-longer required but this time the behaviour of instances is exactly as would be expected if it was extended normally.

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

edited Jan 15, 2016 at 2:08

answered Jan 14, 2016 at 23:06

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matthew Layton Over a year ago

Presumably though, ES6 is not fully adopted yet, therefore compatibility issues may arise?

Paul S. Over a year ago

@series0ne Yes, even in browsers like Chrome you have to be in "use strict"; for it to work at the moment. I've provided an ES5 solution too

Lapys Over a year ago

I'm a bit late but to summarize:

function SubArray() { return Array.apply(this, arguments) }; SubArray.prototype = Array.prototype; new SubArray("One", "Two", "Three")

works pretty fine just as well.

Paul S. Over a year ago

@Lapys if you do that then add something to SubArray.prototype it also gets added to Array.prototype (as it is the same object), so you've polluted Array.prototype with the SubArray code

Collectives™ on Stack Overflow

Subclassing JavaScript arrays - constructor arguments not passing to array

1 Answer 1

ES6

Pre-ES5

ES5 (slow)

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ES6

Pre-ES5

ES5 (slow)

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related