Bruno Finger Bruno Finger - 2 months ago 5
Javascript Question

Adding a function to Array.prototype in IE results in it being pushed in to every array as an element

I have added the following polyfill to

Array
in the beginning of my project:

if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
if (this === null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;

for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}


This works perfectly fine in Chrome and Firefox, but on Internet Explorer 11, this function is actually being pushed in every
Array
as an element of it, and I can even access it like:

var a = [];
a[0]();


This is throwing all sorts of exceptions in IE with functions like
.forEach
where I am expecting some data and this function is found.

Here's a screenshot from IE's developer tools, in this case, this array should have just 2 elements, instead of 3.

IE - wrong

And this is how it should be, from Chrome. In fact, I believe even the actual content is wrong, but i didn't get there yet (it should be an array containing arrays of length 2).

Chrome - correct

How can JavaScript still behave so wrong in IE11, and how can I correctly add this function to the
prototype
instead of in every
Array
instance?

Answer

It's not being "pushed" into every array; you added a property to the prototype object, so it's visible and enumerable in every array instance. That's how prototype properties are supposed to work.

It works in Chrome and Firefox because .find() on the prototype in those environments is defined in such a way as to be visible but not enumerable. You can do that in IE by using Object.defineProperty():

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, "find", {
    value: function(predicate) {
      if (this === null) {
        throw new TypeError('Array.prototype.find called on null or undefined');
      }
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }
      var list = Object(this);
      var length = list.length >>> 0;
      var thisArg = arguments[1];
      var value;

      for (var i = 0; i < length; i++) {
        value = list[i];
        if (predicate.call(thisArg, value, i, list)) {
          return value;
        }
      }
      return undefined;
    }
  });
}

In addition to property "value", which is clearly the value of the new property, the properties "enumerable" and "configurable" default to false. That means that "find" won't show up in any situation that involves iterating through object properties.

Comments