class vs prototype Array.isArray

Question

I have always been told “Classes are just syntactic sugar for prototypes.”

But in this example this shows this isn't true.

function SubArray() {}
SubArray.prototype = new Array( );
console.log(Array.isArray(new SubArray()))  // false

and the same example with classes.

SubArray = class extends Array{}
console.log(Array.isArray(new SubArray()))  // true

Funnily instanceof works fine on both new SubArray instanceof Array. Why isn’t Array.isArray returning true with prototype here?

Answer 1

That's because you did not write the code that class is actually syntactic sugar of:

function SubArray () {
  if (!(new.target)) {
    throw new TypeError("Class constructor SubArray cannot be invoked without 'new'")
  }

  return Reflect.construct(Array, arguments, new.target)
}

Object.setPrototypeOf(SubArray.prototype, Array.prototype)
Object.setPrototypeOf(SubArray, Array)

console.log(Array.isArray(new SubArray())) // true

The above should behave identically to the example you provided using class syntax. Unfortunately not all of this behavior can be accurately reproduced without other ES6 constructs like new.target and Reflect.construct(), but at least those aren't necessarily required in order to produce your desired behavior:

function SubArray () {
  if (!(this instanceof SubArray)) {
    throw new TypeError("Class constructor SubArray cannot be invoked without 'new'")
  }

  return Array.apply(this, arguments)
}

SubArray.prototype = Object.create(Array.prototype)
// the line below is not necessary for Array.isArray()
// but accurately reproduces behavior of `class SubArray extends Array {}`
SubArray.__proto__ = Array // implementation hack if Object.setPrototypeOf() is not available

console.log(Array.isArray(new SubArray())) // true

The key here is that you delegate construction of the instantiated object to the Array constructor in order to initialize the object as an Array exotic object. So hypothetically, all that's strictly necessary is the following:

function SubArray () {
  return Array.call(this)
}

console.log(Array.isArray(new SubArray())) // true

But of course, you won't have access to Array.prototype methods in this case, so you should stick to class syntax or the second example if you have to support ES5.

Edit

I did some tinkering and I personally think this is a horrible idea, but if you want to emulate class as closely as possible in ES5, you can opt out of strict mode in order to have access to arguments.caller:

// DON'T ACTUALLY DO THIS
// just for demonstration purposes

function SubArray () {
  // this is about as close as you can get to new.target in ES5
  if (!(this instanceof SubArray) && !(arguments.caller && this instanceof arguments.caller)) {
    throw new TypeError("Class constructor SubArray cannot be invoked without 'new'")
  }

  return Array.apply(this, arguments)
}

SubArray.prototype.__proto__ = Array.prototype
SubArray.__proto__ = Array

// we want FooBar to extend SubArray sloppily
function FooBar () {
  if (!(this instanceof SubArray) && !(arguments.caller && this instanceof arguments.caller)) {
    throw new TypeError("Class constructor FooBar cannot be invoked without 'new'")
  }

  return SubArray.apply(this, arguments)
}

FooBar.prototype.__proto__ = SubArray.prototype
FooBar.__proto__ = SubArray

try {
  SubArray()
} catch (e) {
  console.log(e.toString())
}

console.log(new SubArray(1, 2, 3))

try {
  FooBar()
} catch (e) {
  console.log(e.toString())
}

console.log(new FooBar(1, 2, 3))

Answer 2

Consider the steps to perform Array.isArray():

IsArray ( argument )

The abstract operation IsArray takes one argument argument, and performs the following steps:

If Type(argument) is not Object, return false.
If argument is an Array exotic object, return true.
If argument is a Proxy exotic object, then
    If the value of the [[ProxyHandler]] internal slot of argument is null, throw a TypeError exception.
    Let target be the value of the [[ProxyTarget]] internal slot of argument.
    Return IsArray(target).
Return false.

Your example fails at the step "If argument is an Array exotic object, return true." because it doesn't have it's own length property.

function SubArray() {}
SubArray.prototype = new Array( );
console.log(Array.isArray(new SubArray())) // false


const sa = new SubArray();
console.log(typeof sa); // object
console.log(Object.getOwnPropertyDescriptor(sa, "length")); // undefined

Answer 3

Thanks to rlemon in chat you can do something similar to what Patrick did with out Reflect and should theoretically have IE11 support.

function Foo() {
    const arr = new Array(...arguments);
    arr.__proto__ = Foo.prototype;
    return arr;
}

Foo.prototype.constructor = Foo;

Foo.prototype.__proto__ = Array.prototype;

Array.isArray( new Foo(123) ) 

Answer 4

This method makes use of iframes and allows you to extend the class if you choose using class extend fuctionality.

var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.body.appendChild(iframe);

frames[frames.length - 1].document.write(
  "<script>parent.SubArray = Array;<\/script>"
);

SubArray.prototype.__proto__ = Array.prototype;
SubArray.__proto__ = Array;
console.log(Array.isArray(new SubArray()));
console.log(new SubArray() instanceof Array);
console.log(new SubArray() instanceof SubArray);

SubArray2 = class extends SubArray {} 

console.log(new SubArray2() instanceof SubArray)

Answer 5

ES5 way of doing things do not allow you to properly to inherit from Array. ES6 makes it work properly.