new Array() vs Object.create(Array.prototype)

Question

A naive confusion:

var arr1 = new Array();
var arr2 = Object.create(Array.prototype);
//Inserting elements in "both arrays"
arr1[0] =0;
arr1[9] =9;
arr2[0] =0;
arr2[9] =9;
arr1.push(10);
arr2.push(10);
console.log(arr1.length); // prints 11
console.log(arr2.length); // prints 1

Both objects inherits Array.prototype, but they behave differently with the [] operator. Why?

Answer 1

In the first case you create an array object that maintains the length property when you access a integer, non-negative property (index).

In the second case you created a regular object that inherits the Array prototype. Using [] on that object is the same as any object and simply sets regular properties on it.

var arr1 = new Array(); // or var arr1 = [];
arr1[0] = 0;
arr1['foo'] = 3;
// arr1 has a length of 1 because 0 is an array index and 'foo' is a regular property.

var arr2 = Object.create(Array.prototype);
arr2[0] = 0;
arr2['foo'] = 3;
// arr2 has a length of 0 because both 0 and 'foo' are regular properties.

The ECMAScript 5 Language Spec describes how length is maintained in section 15.4.

Array objects give special treatment to a certain class of property names. A property name P (in the form of a String value) is an array index if and only if ToString(ToUint32(P)) is equal to P and ToUint32(P) is not equal to 2^(32−1).

[...]

Specifically, whenever a property is added whose name is an array index, the length property is changed, if necessary, to be one more than the numeric value of that array index;