jQuery conflict with native prototype

Question

I have a problem using jQuery with native JavaScript (NOT prototype.js). When using the following code, jQuery 1.9.1 with an error message:

Object.prototype.myVeryGreatFunction = function() {
    // ...
}

[Error] TypeError: undefined is not a function (evaluating 'U[a].exec(s)')
ft (jquery.min.js, line 4)
wt (jquery.min.js, line 4)
st (jquery.min.js, line 4)
find (jquery.min.js, line 4)
init (jquery.min.js, line 3)
b (jquery.min.js, line 3)
(anonymous function) (read.control.js, line 59)
c (jquery.min.js, line 3)
fireWith (jquery.min.js, line 3)
ready (jquery.min.js, line 3)
H (jquery.min.js, line 3)

When I remove the prototype definition, everything works great. Unfortunately I can't easily update jQuery because this is in a plugin for a CMS, so it has to work with old versions for compatibility reasons.

Is there any known issue with that or a fix for that?

Googling actually shows me solutions like using jQuery.noConflict() and private function wrapping. But as mentioned above I'm not using prototype.js, but native JS object prototyping.

Answer 1

You can avoid these problems by making your extensions to the native prototypes as non-enumerable:

Object.defineProperty(Object.prototype, 'myVeryGreatFunction',{
  value : function() {},
  enumerable : false
});

Object.defineProperty documentation on MDN

As Jan Dvorak mentioned, this solution does not work for old browsers (IE8-).

Answer 2

There is no safe way in older browsers to extend Object.prototype without breaking jQuery. The jQuery authors specifically say (somewhere...) that jQuery will break if you just add new enumerable properties to Object.prototype.

The only safe way requires ECMAScript 5, and its Object.defineProperty function, which allows non-enumerable properties to be added to objects.

The jQuery noconflict() function doesn't help - it's a solution to an entirely different problem.