How can I extend Array without a class declaration?

Question

I was really struggling to make a custom object that could inherit all the properties of an array, but would also behave the same as a normal instance, that is to say, instanceof and constructor would behave like you want them to. I had read that class declarations were just syntactic sugar, so I never turned to them for a solution (I knew very little about them).

Before I had my big breakthrough, I had created this abomination:

function arrayLike() {
    let al = [];

    //make obj.constructor work
    Object.defineProperty(al, 'constructor', {value: arrayLike}); 

    //add methods

    //make (obj instanceof arrayLike) == true
    return new Proxy(al, {
        getPrototypeOf() {
            return arrayLike.prototype;
        },
    })
}

//make (obj instanceof Array) == true
Reflect.setPrototypeOf(arrayLike.prototype, Array.prototype);

It just so happens that I saw a class example very close to what I wanted to do, and then discovered that it was perfectly made for the job:

class arrayLike extends Array {
    //add methods
}

Looking at it in Chrome DevToos, I can see that what I created does not have the same structure as this at all.

If class declarations truly are syntactic sugar, then how the hell do you create this object without it?

Answer 1

Javascript is a language having a form of inheritance which is called prototypal inheritance.

The idea behind it is that given an object, it has an hidden property called prototype which is a reference to another object, which is said to be the prototype object.

This relationship is important when you ask the javascript engine to give you the value of an object property, let's call it foo just to fix the idea. The javascript engine will first check your object to see if it has a property called foo: if the property is defined on your object its value is returned and the search completes. If, otherwise, your object doesn't have a property called foo then its prototype object is searched and the same process is repeated again.

This procedure is repeated recursively until all the so called prototype chain has been explored. The root of the prototype chain is a built-in javascript object that you can reference with the expression Object.prototype and is the object from which all the other javascript objects derive. Notice that, if the foo property is missing in all the objects composing the entire prototype chain, then the value undefined is returned.

This is the real form of inheritance built into javascript and it's the business which really seats behind the ES6 class keywork which is a convenience which hides this mess and gives you the impression that javascript has a form of class inheritance (class inheritance is more widely known and most of programmers find it easier to think of than prototypal inheritance).

The bare minimum that you can do in order to take an object and decide that it should behave like an array is the following:

const myArray = [];
const myObject = { foo: "bar" }

Object.setPrototypeOf(myObject, myArray);

myObject.push("hello");
myObject.push("world");
console.log(myObject.length); // prints 2

This book is the best reference that I know for the javascript language. This is good too, but nowdays is a bit outdated and it's not as easy to follow along as the previous.

An example a bit more involved than the previous one can be implemented by using a function as a constructor. This is actually the ES5 old-school way to implement class-like inheritance, the thing that you did at the time of ES5 in order to mimic classes:

function SpecialArray(name) {
  this.name = name;
}

SpecialArray.prototype = []; 

// fix the constructor property mess (see the book linked above)
Object.defineProperty(SpecialArray.prototype, "constructor", {
  value: SpecialArray,
  enumerable: false,
  writable: true
});

SpecialArray.prototype.getSalutation = function() {
  return "Hello my name is " + this.name;
};

const mySpecialArray = new SpecialArray("enrico");

// you can call the methods and properties defined on Array.prototype
mySpecialArray.push("hello");
mySpecialArray.push("world");
console.log(mySpecialArray.length); // prints 2

// you can use the methods and properties defined on SpecialArray.prototype
console.log(mySpecialArray.name); // prints enrico
console.log(mySpecialArray.getSalutation()); // prints Hello my name is enrico

// important sanity checks to be sure that everything works as expected
console.log(mySpecialArray instanceof Array); // prints true
console.log(mySpecialArray instanceof SpecialArray); // prints true
console.log(mySpecialArray.constructor === SpecialArray); // prints true

// you can iterate over the special array content
for (item of mySpecialArray){
  console.log(item);
}

// you can read special array entries
console.log(mySpecialArray[1]); // prints world

Answer 2

Edit: I study the transpiled code of babel and find that one extra touch is needed to correctly extends built-in class like Array, we need to wrap the Array constructor within a normal Wrapper function first, otherwise the prototype chain would be broken at construction.

function _wrapNativeSuper(Class) {
  _wrapNativeSuper = function _wrapNativeSuper(Class) {
    function Wrapper() {
      var instance = Class.apply(this, arguments)
      instance.__proto__ = this.__proto__.constructor.prototype;
      return instance;
    }
    Wrapper.prototype = Object.create(Class.prototype, {
      constructor: {
        value: Wrapper,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    Wrapper.__proto__ = Class;
    return Wrapper;
  };
  return _wrapNativeSuper(Class);
}

---

The class declaration syntax does 3 things.

1. setup the constructor properly
2. setup the prototype chain properly
3. inherit static properties

So in order to replay what class Foo extends Array {} does in old school js, you need to do those 3 things accordingly.

// 0. wrap the native Array constructor
// this step is only required when extending built-in objects like Array
var _Array = _wrapNativeSuper(Array)

// 1. setup the constructor
function Foo() { return _Array.apply(this, arguments) }

// 2. setup prototype chain
function __dummy__() { this.constructor = Foo }
__dummy__.prototype = _Array.prototype
Foo.prototype = new __dummy__()

// 3. inherit static properties
Foo.__proto__ = _Array

Runnable example below:

function _wrapNativeSuper(Class) {
  _wrapNativeSuper = function _wrapNativeSuper(Class) {
    function Wrapper() {
      var instance = Class.apply(this, arguments)
      instance.__proto__ = this.__proto__.constructor.prototype;
      return instance;
    }
    Wrapper.prototype = Object.create(Class.prototype, {
      constructor: {
        value: Wrapper,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    Wrapper.__proto__ = Class;
    return Wrapper;
  };
  return _wrapNativeSuper(Class);
}

// 0. wrap the native Array constructor
// this step is only required when extending built-in objects like Array
var _Array = _wrapNativeSuper(Array)

// 1. setup the constructor
function Foo() { return _Array.apply(this, arguments) }

// 2. setup prototype chain
function __dummy__() { this.constructor = Foo }
__dummy__.prototype = _Array.prototype
Foo.prototype = new __dummy__()

// 3. inherit static properties
Foo.__proto__ = _Array


// test
var foo = new Foo;
console.log('instanceof?', foo instanceof Foo);

Foo.prototype.hi = function() { return 'hello' }
console.log('method?', foo.hi());