Differences between class and prototype Array.isArray

Question

Differences between class and prototype Array.isArray

Throughout my coding journey, I've often heard the saying "Classes are just syntactic sugar for prototypes."

However, an interesting example challenges this notion.

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

In contrast, consider the same example using classes.

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

Surprisingly, instanceof works correctly with both new SubArray instanceof Array. But why does Array.isArray fail to return true with prototypes in this case?

javascript arrays class prototype

Answer 1

Answer №1

If you're wondering why the code for the class is essentially sugar-coated, here's an example of how it can be achieved in ES5:

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

To mimic the behavior of the provided class syntax example in ES5, some workarounds are needed:

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)
SubArray.__proto__ = Array

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

The essence is to delegate object construction to the Array constructor for proper initialization as an Array exotic object. The minimalistic version would look like this:

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

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

However, access to Array.prototype methods will be limited in this case. Therefore, sticking to class syntax or the improved ES5 version is recommended.

Edit

An experimental approach to closely emulate class in ES5 involves opting out of strict mode to utilize arguments.caller:

// WARNING: This is NOT recommended
// Demonstrating close emulation of new.target using ES5
// For educational purposes only

function SubArray () {
  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

// Sloppy extension of FooBar from SubArray
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

If you're wondering why the code for the class is essentially sugar-coated, here's an example of how it can be achieved in ES5:

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

To mimic the behavior of the provided class syntax example in ES5, some workarounds are needed:

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)
SubArray.__proto__ = Array

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

The essence is to delegate object construction to the Array constructor for proper initialization as an Array exotic object. The minimalistic version would look like this:

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

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

However, access to Array.prototype methods will be limited in this case. Therefore, sticking to class syntax or the improved ES5 version is recommended.

Edit

An experimental approach to closely emulate class in ES5 involves opting out of strict mode to utilize arguments.caller:

// WARNING: This is NOT recommended
// Demonstrating close emulation of new.target using ES5
// For educational purposes only

function SubArray () {
  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

// Sloppy extension of FooBar from SubArray
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 3

Answer №2

Exploring the process of executing Array.isArray():

IsArray ( argument )

The IsArray abstract operation involves a single argument, and follows these 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.

An instance that does not adhere to "If argument is an Array exotic object, return true." would lack its unique 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 4

Exploring the process of executing Array.isArray():

IsArray ( argument )

The IsArray abstract operation involves a single argument, and follows these 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.

An instance that does not adhere to "If argument is an Array exotic object, return true." would lack its unique 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 5

Answer №3

Kudos to rlemon for sharing a solution in the chat that allows you to achieve similar results to what Patrick did without using Reflect, and potentially enabling IE11 support.

function Bar() {
    const list = new Array(...arguments);
    list.__proto__ = Bar.prototype;
    return list;
}

Bar.prototype.constructor = Bar;

Bar.prototype.__proto__ = Array.prototype;

Array.isArray( new Bar(456) )

Answer 6

Kudos to rlemon for sharing a solution in the chat that allows you to achieve similar results to what Patrick did without using Reflect, and potentially enabling IE11 support.

function Bar() {
    const list = new Array(...arguments);
    list.__proto__ = Bar.prototype;
    return list;
}

Bar.prototype.constructor = Bar;

Bar.prototype.__proto__ = Array.prototype;

Array.isArray( new Bar(456) )

Answer 7

Answer №4

This unique approach utilizes iframes to offer the flexibility of extending a class through the use of class extend functionality.

let 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 8

This unique approach utilizes iframes to offer the flexibility of extending a class through the use of class extend functionality.

let 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 9

Answer №5

Traditional ES5 methods do not support proper inheritance from the Array object, but ES6 has rectified this issue.

Answer 10

Traditional ES5 methods do not support proper inheritance from the Array object, but ES6 has rectified this issue.

Differences between class and prototype Array.isArray

Answer №1

Edit

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to loop through an array in JavaScript using a for loop?

Initiate the React application with the given external parameters

Is it possible to utilize the output of a function nested within a method in a different method?

A guide to resizing images for uploading in Node.js using Jimp without the need for refreshing the page

Invoking a JavaScript function using jQuery's AJAX

Incapable of merging various arrays together

Use angular, javascript, or FormIo to set the cookie value to a dropdown list within a form as it loads

Automatically scroll the page upon loading if the user is at the top of the page

Resizing an iframe dynamically based on the content of the URL without displaying a scroll bar using JavaScript

Angular JS - showcasing and modifying model within textarea while also ensuring updates occur when model is altered

Node.js async.series not functioning properly within Express application - response being triggered prematurely

Tips for accessing user input in JavaScript functions

A guide to correctly importing a Json File into Three.js

Error encountered when attempting to dynamically alter property values of an object using Typescript

Creating a circular shape around a specific location on a map is a common task in Openlayers. Here's a

Unleashing the Power of RxJS with OR Conditions

Utilizing ngModel on input elements inside a custom directive, ensuring compatibility with other ng-* attributes

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

Generating unique ObjectIDs for each object is crucial before saving documents in Mongoose

Retrieve the radio button value without using a key when submitting a form in JSON