is there a difference between the following two code examples (speedwise, best practice, etc)?

This:

function() {
    var me = this;
    me.doSomething();
    me.doAnotherThing();
};

Or this:

function() {
    this.doSomething();
    this.doAnotherThing();
}

Is there a difference if I call upon the scope several times? Do I use a variable or just use the scope?

is there a difference between the following two code examples (speedwise, best practice, etc)?

This:

function() {
    var me = this;
    me.doSomething();
    me.doAnotherThing();
};

Or this:

function() {
    this.doSomething();
    this.doAnotherThing();
}

Is there a difference if I call upon the scope several times? Do I use a variable or just use the scope?

• javascript
• performance
• scope
• best-fit

Share Improve this question Follow edited Aug 27, 2014 at 12:34 Bojangles 102k5050 gold badges174174 silver badges209209 bronze badges asked Aug 27, 2014 at 12:29 DinkhellerDinkheller 5,10466 gold badges4141 silver badges7171 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

In JavaScript, scopes are inherited. Therefore when you want to access a variable from a parent scope, the engine will first look in the current scope, see if it exists there, and will then search in the parent scope. It will continue until it founds what you are asking for.

The this variable is available in the local scope (actually in the activation object) and the engine will be able to resolve it immediately. As such, there is no performance reason to cache it.

However, this bees interesting when you access variables from parent scopes. For example let's say you want to access the document variable (from the global scope) several times in a function. By caching it, the engine will only have to resolve it once, thus increasing the performance:

function foo() {
  var doc = document;

  doc.getElementsByTagName('body');
  doc.querySelectorAll('div');
}

Anyway, as of today this is more interesting as a theoretical approach since most of the modern JS engines are able to optimize it nicely (http://jsperf./scope-resolution-cached-not-cached).

---

Scoping inheritance is an important part of the JavaScript language, I strongly remend those two readings for a better prehension:

• High Performance JavaScript, Nicholas C. Zakas (Chapter 2)
• What is the Execution Context & Stack in JavaScript?

They're both the same except that me is a reference to this.

That can be very useful when you have different contexts inside your main one because this will always refer to the context its called in, while me will be reference to your main context.

Example

function MainFunction(){
  var me = this;

  function secondFunction(){
    // this refers to this anonymous function
    this.varName = 'something';
    // me is a reference to MainFunction
    me.varName = 'something';

  }

}

To answer the specific question, and not get too theoretical, there is a very very small difference in speed between your two examples.

Creating the extra variable lookup will very slightly slow down your script. Because creating the variable is one extra operation and the two pieces of code are otherwise essentially the same. Since you are creating objects with member functions, a very small performance hit could be magnified if you have thousands of objects.

As always, your performance is going to vary across browsers. Here's a jsPerf test that shows that the difference is minimal:

http://jsperf./variable-caching-this

Look at Ops/Sec

Chrome 36.0.1985.143 m - Excluding variable definition is faster

Opera 24.0 - Excluding variable definition is faster

Firefox 31.0 - Excluding variable definition is faster

IE 11 - Excluding variable definition is faster

Is there a difference if I call upon the scope several times?

For me there is no difference when you call just the scope several times pared to variable because it does the same job only you assigned this to a variable.

Do I use a variable or just use the scope? It depends upon the situation, because sometimes you need to cached the this so that it will not mixed up to other. Consider this.

function blabla() {
   var thisis = this;
   $.each(function() { 
     //`this` here is not equal to `thisis` so if you need `thisis` here you will assign to a variable first.
   });
}

Im sorry for using jquery here.