Are object methods faster than global?

Question

Problem

I can’t believe that I could not find anything about this on the network, maybe I was looking for the wrong thing ...

There is probably little or no difference, but since I'm trying to optimize my code as much as possible, I feel it is worth asking.

Very simple, I would like to know if defining and running a method in an object is faster than defining and executing a function globally.

Examples

Consider this:

(function($){ $.fn.test = function() { // do something here }; })(jQuery); 

And this:

 function test(){ // do something here } 

My question

Which of the above is faster and why? If there is no difference in speed, what would you recommend using?

Thanks in advance

UPDATE 1

How this may be important, I believe it is necessary to explain why I ask this question. I have a library that I have written over the years that contains a large number of functions. Since there are so many of them, I want to know if they will work faster if I have to extend the jQuery object or keep them as they are?

Answer 1

In theory, you just need to count the number of objects that you need to find in order to determine which will be faster. Variables are resolved along a chain of scopes, the script mechanism must first search for the context of the function, then external contexts and, finally, the global context.

Property resolution should first find the object in the scope chain, then the object property or the [[Prototype]] chain.

But in practice, compiler optimization means that the above simplified analysis will be erroneous as often as it is right, and also provides different results in different browsers for different cases.

Typically, such an optimization provides minor changes in performance and should not be considered solely for performance reasons. Create objects and methods that make sense for the architecture of your application, ease of maintenance, and logical grouping.

Answer 2

I did this research about a year ago, and I can say that it is faster to use this.test() .

But it depends on what you need. I do not recommend adding unnecessary functions to jQuery if you only want to create an object for a specific "widget".

Simple object-oriented use:

 function Car(name) { this.name = name; } Car.prototype.startEngine = function() { // Start the engine... }; Car.prototype.drive = function() { this.startEngine(); // Switch the lights, fasten your seatbelt... }; // create a new car var bmw = new Car('BMW'); // Drive the car bmw.drive(); 

Another thing you need to understand is the environment (I hope you understand what I mean). It is better to make a new space of variables and functions, so there are not many variables / functions to look for. Keep in mind that as a list - if it is smaller, it is faster to find things in it. So you create a new “space”:

 (function(){ // Your fresh space. })(); 

JavaScript will try to find things in "local" space, and then try to find things in global space. Immigrate it like this:

 |- global |- function aaa |- function bbb |- var myName |- your local space |- function ccc |- function aaa It will not overwrite global function with the same name |- var someVariable 

As you can see, there are only 3 elements in the "local space", so it’s faster to find things.

Faster to call semi-global functions in local "spaces". And, if you want to make some objects-oriented objects, it is better and faster to expand the "object".

UPDATE If you want to remove your library of functions, you can group them inside an object. I do not think it will be slower.

 var lib = { foo: function() {}, bar: function() {}, test: function() {} }; lib.test(); 

Answer 3

If you want to know which of the two methods works faster, the best way is to profile them. This will give you a result related to your code, not a general concept.

In my opinion, you should not optimize it for speed, but for the convenience and richness of the API. From your question

 function test(){ // do something here } 

is on a global scale, which is always bad. Ideally, you should put this method in a namespace, and sample 1 in your questions does this as part of the jQuery namespace.