如何在 Array.prototype 和 Object.prototype 上的 javascript 中定义方法，使其不会出现在 for in 循环中

Question

I want to define helper methods on the Array.prototype and Object.prototype. My current plan is to do something like:

Array.prototype.find = function(testFun) {
   // code to find element in array
};

So that I can do this:

var arr = [1, 2, 3];
var found = arr.find(function(el) { return el > 2; });

It works fine but if I loop over the array in a for in loop the methods appear as values:

for (var prop in arr) { console.log(prop); }
// prints out:
// 1
// 2
// 3
// find

This will screw up anybody else relying on the for in to just show values (especially on Objects). The later versions of javascript have .map and .filter functions built into arrays but those don't show up on for in loops. How can I create more methods like that which won't show up in a for in loop?

Answer 1

It's quite easy: Don't use for-in loops with Arrays . Blame everybody else who does so - here is a nice snippet to tell them during development.

Of course, if one does an enumeration in a generic function and doesn't know whether he gets an array, a plain object or an object with a custom prototype, you can use hasOwnProperty like this:

for (var prop in anyObj )
    if (Object.prototype.hasOwnProperty.call(anyObj, prop))
        // do something

Notice the explicit use of Object.prototype to get the function - there might be objects that overwrite it (especially in data-maps, the value might not even be a function), objects that do not support it or objects that do not inherit from Object.prototype at all. See also here .

Yet, only a script author who is aware of the problem would filter all his for-in-loops - and some only do it because it gets recommended - and does it mostly wrong, he should have used a for-loop array iteration instead. But our problem are those authors who do not know of it.

An interesting, but Mozilla-only approach would be overwriting the behavior of enumerations on arrays via __iterate__ , as demonstrated here .

Fortunately, EcmaScript 5.1 allows us setting properties to be non-enumerable . Of course, this is not supported in older browsers, but why bother? We'd need to use es5-shims anyway for all the cool higher-order array stuff :-) Use defineProperty like this:

Object.defineProperty(Array.prototype, "find", {
    enumerable: false,
    writable: true,
    value: function(testFun) {
        // code to find element in array
    }
});

Answer 2

Depending on your restrictions:

// In EcmaScript 5 specs and browsers that support it you can use the Object.defineProperty
// to make it not enumerable set the enumerable property to false
Object.defineProperty(Array.prototype, 'find', {
    enumerable: false,  // this will make it not iterable
    get: function(testFun) {
       // code to find element in array
    };
});

Read more about Object.defineProperty here https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty

Answer 3

It's because have to check for hasOwnProperty :

for (var prop in arr) { 
  if (arr.hasOwnProperty(prop)) { 
    console.log(prop) 
  }
}

Now this logs 1, 2, 3.

Answer 4

The above answers miss a point:

enumerable ... Defaults to false . ( mdn )

So simply using Object.defineProperty(Array.prototype, 'myFunc' myFunc) instead of Array.prototype.myFunc = myFunc will resolve the issue.