0

I would expect the output of the following code to be:

one
two
three

Here's the code: http://jsfiddle.net/5banB/15/

Why is the function code also in the output and how do I solve it?

And please don't answer: loop only 3 times :)

Code from jsfiddle:

Object.prototype.example = function(args) {
    var elmnt = this;

    for(var a in args)
    {
        elmnt.innerHTML += args[a] + "<br/>";
    }
}

var numbers = ['one', 'two', 'three'];

document.getElementById("mydiv").example(numbers);

​

Output

one
two
three
function (args) { var elmnt = this; for(var a in args) { elmnt.innerHTML += args[a] + "
"; } }

Update:

So how would I go about writing an extension of, say every node in my DOM? What's the preferred way?

Björn Andersson
  • 855
  • 3
  • 11
  • 23
  • Related (duplicate?): http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript – apsillers Dec 17 '12 at 15:12
  • Be *very* careful in your decision to extend `Object.prototype`. It can have unwanted side-effects. Also, it's very rare that `for-in` should be used to iterate indices of an Array. Just use a `for` statement. – I Hate Lazy Dec 17 '12 at 15:18

2 Answers2

0

A for in loop loops over all the enumerable properties on an object.

You've added an example property to every object.

The Object constructor is on the prototype chain of the Array constructor so every array will have an example property.

Generally speaking, if you are using a for in loop, you'll want to use hasOwnProperty to test that the property is directly on the object and not inherited through the prototype chain.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Understanding prototypes is probably a great place to start. You can probably find a plethora of fine articles on google.

http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

Many such articles may also discuss the pure evil of adding functions/properties to Objects prototype and the for loop.

If you think prototypes are what you still want, try using an index based loop on your array instead

for(var i=0;i<arguments[0].length;i++){
    elmnt.innerHTML += args[a] + "<br/>";
}
Shanimal
  • 11,517
  • 7
  • 63
  • 76
  • Is there a better way to extend the functionality of a DOM object? Let's say I want an easy way to perform a task on a set of DOM elements by selecting the element and appending a function to it, like so: document.getElementById("myDiv").example(); – Björn Andersson Dec 18 '12 at 09:27
  • jQuery does this by wrapping elements with functionality on the wrapper. Such as `$('div').css({outline:"4px solid red"}))` or `$('#christmaslist').accordion()` and its designed to be extended (google:jquery plugins) to 'do other stuff' But this has been done a million other ways like backbone, inheritance, angularJS where the controller doesn't even see the DOM. Is it better? 'Better' is debatably objective. imho its better when we stay out of code we have no control over. Ask the prototype community this question, lol, they'll probably flame you until they realize your being serious. Cheers – Shanimal Dec 18 '12 at 15:57