Whats the difference between using 'this' and the object name for reference inside the object?

Question

If I have the following code:

var obj = {

    x: 34,

    init: function() {
        alert(this.x);
        alert(obj.x)
    }

};

Both al

Answer 1

this inside the function is not necessarily the same as obj. It depends on how the function is called.

• if called using obj.init(), obj will be the same as this.
• if called using an event handler, or something like setTimeout setTimeout(obj.init, 500), this will be the global object (window in browsers, unless you're using strict mode)

Good MDN reference on all of this

Answer 2

I would say there are two differences here:

1. this can get shadowed. Creating an anonymous function in JavaScript can unfortunately replace this with a reference to the new anonymous function you're in, and not the current object you want access to.
2. When you're not worrying about shadowing, this is more flexible if the name of the object changes.

this is probably faster in this case because JavaScript won't need to look up the reference.

Answer 3

Besides the shadowing and so on mentioned in the previous answers, using this is more generic and thus will work more effectively in certain scenarios. Let me illustrate.

var object = {
    name: 'John Doe',
    print: function () {
        console.log(object.name);
    }
};

var anotherObject = Object.create(object);

object.print(); // John Doe
anotherObject.print(); // John Doe

anotherObject.name = 'Jane Doe';
console.log(anotherObject.name); // Jane Doe
anotherObject.print(); // John Doe

What I'm doing here is that I'm creating an object that has a name 'John Doe' and then I create anotherObject that inherits from it. Now in this scenario, you would expect anotherObject.print() to print its own name. But it doesn't.

This is because your function is tied to that particular object. If I would have used this instead, it would have referred to the new object appropriately.

Also, imagine what happens if I were to do this.

delete object.name;
anotherObject.print() // Error!

http://jsfiddle.net/uxy08zxz/

This is because even though you think it has nothing to do with that previous object, its function still refers to that very property. Doesn't it?

Hence, keep it generic. Use this. Keeps your code drier, I say.