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 alerts displays 34. But what is the difference, and is one better than the other?

http://jsfiddle.net/4scz435q/

I made a test in jsperf, and it seems this is a bit faster, but I still don't understand the inner workings of the two versions. http://jsperf.com/name-vs-this-in-obj

Answer 1

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.