CODEWITHSUNDEEP
javascriptobjectthis
Fluidbyte
Fluidbyte

Reputation: 5210

Javascript 'this' versus object name

A question spurred by curiosity, if I have the following code, what's the benefit (beyond just the simplicity) of calling a property via this instead of user in the show_name method?

var user = {

    name : 'John Doe',

    show_name : function(){

        alert(this.name);

        // OR

        alert(user.name);
    }
};

Upvotes: 12

Views: 3071

Answers (7)

WTK
WTK

Reputation: 16961

By using this you ensure that after changing your variable name e.g. from user to something your code still works.

Other than that, I imagine that (on some browsers) there may be some performance gain too, since with user.name browser has to lookup in context outside your function while using this.name sticks to current context.

Sample Code

var user = {
    name : 'John Doe',
    show_name : function(){
        alert(user.name);
    }
};

var something = user; // Passing the object to another variable
user = null;          // Make the user variable point to something else

something.show_name();

If you run the code above, you'll hit an error at the following line:

alert(user.name); // <-- user is null, so this will produce the following Error:

Uncaught TypeError: Cannot read property 'name' of null

Now, if we switch to this instead of user, our code will work:

var user = {
    name : 'John Doe',
    show_name : function(){
        alert(this.name);
    }
};

var something = user; // Passing the object to another variable
user = null;          // Make the user variable point to something else

something.show_name();

The above code will work since this will point to the object that executed the show_name function (this can be found in the left side of the . dot method notation and it's the object pointed to by something).

REFERENCES:

To learn more about how the execution context (in our example the object) affects the this binding, read this excerpt from the wonderful book You Don't Know JS by Kyle Simpson.

The following chapters thoroughly explain how this behaves in various contexts (but the whole series is worth reading!):

Chapter 1: this Or That?

Chapter 2: this All Makes Sense Now!

Upvotes: 9

Yuriy N.
Yuriy N.

Reputation: 6087

In case when jQuery is used this references to jQuery object. So, my choice is not to use this at all. 

var user = {

name : 'John Doe',

alertName : function(){

    //  alert(this.name); //never

     alert(user.name);
  }
};
showName : function(){
    $('#show').click(function(){
        //this here references jQuery object 
        $('#username').val(user.name);
    });

};

Also, object literal, generally, should not be used for creating multiple objects, so, using this inside object literal gives no benefits over using object variable name.

Upvotes: -1

RobG
RobG

Reputation: 147363

Whether you use this or the function name depends on how the function will be called.

A function's this value is set by how the function is called or by bind, so if the function will always be called as a method of a suitable object, use this. But if it might be called any other way, or this should only reference a particular object, either use bind or the object name.

e.g. given the OP example, consider:

var x = user.showName;
x();

In the above, showName is called without setting its this, so it defaults to the global object and this.name within the function will likely no be what is expected.

Changing the function name is not a particularly onerous issue given the availability of reasonably powerful search and replace functionality in text editors.

Incidentally, this question is asked frequently. There is no "correct" answer, only advice on how to make choices in certain cases.

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

this here specifies that the object is part of the current name space and is accessible inside the object .. lets suppose your object name changes from user to newUser there will not be any dependency and remove any coupling issues..

Upvotes: 0

Sirko
Sirko

Reputation: 74036

The difference becomes obvious, if you have a look at this example. It creates a second object and sets the prototype accordingly.

var user = {

    name : 'John Doe',

    show_name : function(){

        alert(this.name);

        // OR

        alert(user.name);
    }
};

user2 = Object.create( user );
user2.name = "someone else";

user2.show_name();

Here this.name refers to the current object's name property, whereas user.name always refers to the original name property.

Upvotes: 17

SDC
SDC

Reputation: 14222

If you're making multiple copies of an object, you need this so you can reference the current obect. Using the name would reference the default object, not the copy you're working with.

Upvotes: 0

Quentin
Quentin

Reputation: 943209

You can use the same function in multiple places and have it be context sensitive.

function foo() {
  alert(this.name);
}

var a = { alert: foo, name: "A" };
var b = { alert: foo, name: "B" };
a.alert();
b.alert();

Upvotes: 4

Related Questions