Extending Object causes jQuery error

Question

So I wrote a function to extend Objects to count how many entries are within them, so it may be used as such:

test = {"foo": "bar", "baz": 7, "darth": "maul"}

test.count()
=> 3

I wrote the code as such:

Object.prototype.count = function() {
  var count = 0, key;
  for (key in this) {
    if (this.hasOwnProperty(key)) {
      count++;
    }
  }
  return count;
}

This is my first attempt at extending with prototype, and I'm getting this error from within jQuery.js:

Uncaught TypeError: Object function () {
  var count = 0, key;
  for (key in this) {
    if (this.hasOwnProperty(key)) {
      count++;
    }
  }
  return count; 
} has no method 'replace'

The stacktrace points back to where I call css on a jQuery object onLoad:

$img.css({left: 20, top: 50});

Not that I think there's anything specific about that line, but I thought it may be good to provide.

Is there something I'm doing wrong here?

Jamie Treworgy · Accepted Answer · 2012-07-25 18:09:58Z

2

A lesson in why it can be a bad idea to extend the prototype of native types. :)

Somewhere in jQuery, it's testing a generic object for the existence of a property called count, and then treating it as a string. Since you've now caused that property to always exist, it found it, but it wasn't a string (as it expected) and broke the code.

answered Jul 25, 2012 at 18:09

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kyle Macey Over a year ago

I've changed the function name a few times to random things with the same result. So, does this mean it's not possible to extend Object when using jQuery? I can write it as a straight function, but the extension made more sense to me (compared to length for strings)

Jamie Treworgy Over a year ago

It could be looking for any properties that it doesn't expect to be there. It's almost universally a bad idea to alter the prototype of Object (and to a lesser degree other types) since this affects everything that inspects object properties. Code like if (myobject.count) { ...} is de facto standard for testing property existence. If you really want to use custom methods on a generic object, then just create your own prototype and use it instead of the native object.

Kyle Macey Over a year ago

Well that's just shotty. Thanks for the help

Jamie Treworgy Over a year ago

.. in the case of this error which you got on the (css method) I'd actually say this is probably also an example of sloppy code in jQuery. It should use hasOwnProperty to iterate through properties, and it appears it doesn't. But that doesn't change the rule; there's just too much risk in adding your own methods or properties to Object, and testing objects with just dot notation is not considered bad practice (so a common name like count would prob. trip you up even in exceptionally well written code)

Collectives™ on Stack Overflow

Extending Object causes jQuery error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related