How to add Javascript function to every object?

Question

I'm wondering how can I attach a function to be available for each object on the page. I know that I can do it like this:

mything = {
    init: function(SELECTOR){

    },
    destroy: function(){

    }
};

But then it is available to me only this way: mything.init(SELECTOR);

What I want is to be able to do the same thing this way:

$('.mydiv, input, whatever').myFunction({ 'my' : 'arg', 'my2' : 'arg2' });
$('.mydiv').myFunction('destroy');

I know that there are plenty of Javascript tutorials out there but I don't know how to search for this type of functionality. Any help would be appreciated!

You dont seem to want to extend every object (a crazy idea). You seem to only want to extend jQuery objects (a good idea). That is a very important distinction. — Alex Wayne
– Alex Wayne, Commented Jan 30, 2013 at 9:41
the first function seems like a custom selector. It's possible to extend the selectors that can be used to also include your own custom build selection logic — Rune FS
– Rune FS, Commented Jan 30, 2013 at 9:48

jAndy · Accepted Answer · 2013-01-30 09:39:17Z

4

In your case, it looks like it is just enough for you to extend the jQuery.prototype.

jQuery.extend( jQuery.fn, mything );

However, it is of course possible, even if not very recommendable, to go that ultimate root and extend the Object.prototype. This really would add those functions to every and each object.

answered Jan 30, 2013 at 9:39

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

3 Comments

Atadj Over a year ago

Thank you! That's what I'm looking for :) I just wanted to know where to look for more information and now I know that I should seek for prototype.

Rune FS Over a year ago

it would add it to almost any object hoist objects are not required to have Object as the prototype. E.g. console in IE9 does not have object as it's prototype

jAndy Over a year ago

@RuneFS: you're right. Also self-defining objects created by Object.create( null ) wouldn't be affected.

Michael Aaron Safyan · Accepted Answer · 2013-01-30 09:39:22Z

2

This isn't necessarily a great idea (it's a terrible idea), but you can accomplish this with prototypes:

Object.prototype.myFunction = function() {
  console.log('Called myFunction');
};

And you can see what happens for an arbitrary object:

document.myFunction();

Note that adding to the prototypes of classes other than your own (and especially the builtin objects or classes belonging to libraries other than your own) can induce lots of confusion. This is one of the reasons why Google's own style guide recommends against this (despite much temptation to add String.startsWith, String.endsWith, and many other useful operations to builtin types).

answered Jan 30, 2013 at 9:39

Michael Aaron Safyan

96k16 gold badges140 silver badges200 bronze badges

Comments

LeGEC · Accepted Answer · 2013-01-30 09:57:55Z

1

The clean way to do what you describe is to wrap your code inside a jQuery plugin.

Here is the official jquery plugin guide. Read through it, it is actually quite simple to understand.

The part about wrapping functions (so that $(selector).myFunction() calls init, $(selector).myFunction('doThis') calls doThis, etc...) is here.

edited Jan 30, 2013 at 9:57

answered Jan 30, 2013 at 9:45

LeGEC

53.4k5 gold badges69 silver badges127 bronze badges

Collectives™ on Stack Overflow

How to add Javascript function to every object?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related