javascript - Understanding Array.isArray Polyfill - Stack Overflow

admin管理员组

文章数量:1406937

I was going through the polyfill of Array.isArray method on MDN, and this is what I found:

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

While this works, I wonder why MDN hasn't listed the following as the polyfill for isArray?

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return arg.constructor === Array;
  };
}

Above code is a bit short and simpler. I wonder if there is any advantage of using MDN's implementation as pared to above one?

I was going through the polyfill of Array.isArray method on MDN, and this is what I found:

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

While this works, I wonder why MDN hasn't listed the following as the polyfill for isArray?

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return arg.constructor === Array;
  };
}

Above code is a bit short and simpler. I wonder if there is any advantage of using MDN's implementation as pared to above one?

• javascript

Share Improve this question Follow asked May 28, 2020 at 20:42 darKnightdarKnight 6,4811515 gold badges5858 silver badges9393 bronze badges 9

• 2 If you get an object from an iframe, for example it's going to be an array but it will not be created from your current Array constructor, so that check will fail. – VLAZ Commented May 28, 2020 at 20:50
• @VLAZ: Didn't quite get that. Why should an object/Array from an iFrame be any different? Can you demonstrate with code what you are trying to say? – darKnight Commented May 28, 2020 at 20:52
• 1 It's an array but es from a different environment. The constructor function is a different instance of Array. And as we know function() {} === function() {} is false. – VLAZ Commented May 28, 2020 at 20:53
• Does this answer your question? Difference between using Array.isArray and instanceof Array – VLAZ Commented May 28, 2020 at 20:58
• instanceof Array is pretty much patible with your suggested == Array. The same problems arise - it fails cross-environment, as you'd be trying to pare different instances of Array. This answer talks about the problem directly. – VLAZ Commented May 28, 2020 at 21:00

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 7

The most important reason that makes the MDN polyfill a safe one to use is that an array is an exotic object. The best way to differentiate an exotic object would be through the use of an exotic feature related to that object – that is to say, an exotic property of the exotic object.

If you look at the specification of the Object.prototype.toString method, you will find that it uses the abstract operation isArray, which checks for exotic array objects.

On the other hand look at the specification of the constructor property. It is not an exotic property of the array, and so javascript code can change it easily.

const x = [];
x.constructor = Object

In fact, the constructor property is more intended for meta programming. You could – in es5 – create subclasses without touching the constructor property.

Now, here are things that can go wrong with your implementation:

const customIsArray = function(arg) {
    return arg.constructor === Array;
};

// 1) won't work with subclasses of Array

class CustomArray extends Array {
    // ...
}

const customArray = new CustomArray()
customIsArray(customArray) // false
Array.isArray(customArray) // true

// 2) won't work across different realms (iframes, web workers, service workers ... if we are speaking about the browser environment)

const iframe = document.createElement('iframe')
document.body.appendChild(iframe)
const IframeArray = iframe.contentWindow.Array;
const iframeArray = new IframeArray();
customIsArray(iframeArray) // false
Array.isArray(iframeArray) // true

// 3) won't work with few edge cases like (customIsArray will return true, while Array.isArray will return false)

const fakeArray1 = { __proto__: Array.prototype }
const fakeArray2 = { constructor: Array }

customIsArray(fakeArray1) // true
Array.isArray(fakeArray1) // false

customIsArray(fakeArray2) // true
Array.isArray(fakeArray2) // false 

One problem would be that a non-array object with a constructor property of Array would pass when it shouldn't:

// Bad polyfill, do not use
Array.isArray = function(arg) {
  return arg.constructor === Array;
};

const badObj = {};
badObj.constructor = Array;
console.log(Array.isArray(badObj));

The above would be a very strange situation, but a polyfill must be as spec-pliant as possible, even if it requires more convoluted code.

本文标签： javascriptUnderstanding ArrayisArray PolyfillStack Overflow