Extending JavaScript Arrays While Keeping Native Bracket-Notation Functionality

Array.apply looks like a nice way to clone an array (its children still only being copied by reference). myArr.concat() and myArry.slice() works as well.

I've had luck sub-classing Array by simply assigning myConstructor.prototype = []; and this.length inside myConstructor.

IE7 doesn't set the length property correctly but you can test for it with something like:

function Catalog () {
	this.length = 0;
}
	 
Catalog.prototype = [];
	 
var cat = new Catalog();
		 
cat.push(1);
		 
if ( !cat.length ) {
		 
	Catalog.prototype = {};
			 
	var arrayMethods = [
		"join",
		"pop",
		"push",
		"reverse",
		"shift",
		"slice",
		"sort",
		"splice",
		"unshift"];
 
	for ( var i = 0, max = arrayMethods.length; i < max; i++ ) {
		Catalog.prototype[ arrayMethods[i] ] = Array.prototype[ arrayMethods[i] ];
	}
 
}
 
// Fix to string Array.prototype.toString errors
Catalog.prototype.toString = Object.prototype.toString;
 
// Fix concat
Catalog.prototype.concat = function () {
	return Array.prototype.concat.apply( this.slice(), arguments );
};

@Ben:

If you were actually trying to do something like this for real code, I wouldn't bother defining things in the Collection.prototype--I'd just immediately extend the Array object you create in the Collection() constructor.

Since you're not actually returning an instance of the Collection, adding the methods to the Collection doesn't gain you anything and the looping in the injectClassMethods() just slows things down.

I'd instead, just do:

collection = (Array.apply( collection, arguments ) || collection);

collection.add = function (){};
collection.addAll = function ();

The end result is the same, but you've removed some of the unneeded processing.

@Ben,

I tried the Catalog example in FF from my previous post and it seemed to work fine at first.

var foo = new Catalog();
foo.push( "a" ); // ["a"]
foo[0] = 1; // [1]
foo.length === 1; // true

But then I dug a little deeper to try and get at the problem you were seeing and I realized my approach comes with a caveat that I hadn't realized before. The Catalog class can only use direct assignment with existing indexes because the length property is no longer maintained properly when adding new indexes directly and in some cases (like adding to an empty array in FF) the assignment itself fails.

var foo = new Catalog();
foo[0] = "a"; // [] in FF, ["a"] in Chrome
foo.length === 1; // false

I guess I've never noticed this behavior because adding to an array using push feels better to me than assigning it directly.

Thanks for pointing this out. It is good to know the the limitations of the prototype = [] solution.

I like the idea of extending Array and Object, but I've found that doing so can have unexpected results. For example, extending Array breaks attribute handling in SVGElement in Webkit.

Awesome article. I've been looking for something like this. I have one question that I am going to explore on my own, but I thought it might be valuable for others ending up here.

If I am going to inherit the Collection class into a more-specific (Type)Collection class, do I need to: repeat these procedures a second time in the (Type)Collection constructor, move these procedures up into the (Type)Collection constructor (and remove from Collection) or do nothing but inherit Collection?

I am fairly new to javascript (at least on any real level), but I understand enough to know what's going on here. My guess is that I would need to repeat this in my (Type)Collection class.

Thanks.

Thanks a lot ;)

I'm here to figure out how to fix the .concat method. As a note, @BobGray's method works, but only in one direction. Here's what I mean:

If you use this to fix concat:

Catalog.prototype.concat = function () {
return Array.prototype.concat.apply( this.slice(), arguments );
};

Then this will work:

myCatalog.concat([1,3,7]);

But this will not:

[1.3.7].concat(myCatalog);

I believe this is because concat inspects the [[Class]] internal property of the arguments it is given in order to determine whether it's dealing with an array or not. Source: http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 bullet 5.b.

I have not found a solution for this, but would definitely like one.

@Gordon,

Check out Backbone's extend implementation. You should be able to write both the array extension and an extend method on your base Collection class.

http://backbonejs.org/docs/backbone.html#section-206

I am trying to translate Ben's code into this use case now.

@Ben,

Have you run this test against it?

function isArray(x) { return [].concat(x)[0] !== x; }

I pulled it from the below StackOverflow question. Concat works against and internal and maybe unsettable property so I think it may be impossible to actually extend an array perfectly using any method, but would love some confirmation.

http://stackoverflow.com/questions/8672204/can-you-set-the-internal-class-property-of-an-ecmascript-object

I'll answer myself--looks like concat works property against the Nadel Array Extension method :)

function concatWorks(x) { return [].concat(x)[0] !== x; }
myCollection = new Collection();
console.log(concatWorks(myCollection)); // true

You can skip the loop by using apply in the add method:
// Check to see if the item is an array.
if (Array.isArray(value)) {

// Add each sub-item using default push() method.
Array.prototype.push.apply(this, value);

}

A small performance improvement.

How would one go about if trying to get this type to pass instanceOf tests? That checks on the prototype, and as you are returning an array that of course fails. "No can do" is also an answer, btw :)