Javascript 'this' inside an object literal

Question

I am new to javascript. I was doing some hands on "object literals". Below is the code i was trying. BodyLoaded is the event handler for onload event of body tag.

//works - getName returns "bingo"

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return name;
        },
        setName: function (n) {
            name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

//works too - getName returns "bingo"

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return this.name;
        },
        setName: function (n) {
            this.name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

//doesnt work - getName returns ""

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return this.name;
        },
        setName: function (n) {
            name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

The above code returns expected result when calling getName ("bingo"). But if I return this.name in the getName function, it returns and empty string. The strange part is, if i use this.name in both the functions (setName and getName) the code works fine and returns the expected value("bingo"). Trying to understand this behavior.

I don't see the issue with the empty string, but `this` refers to the parent object. — Qantas 94 Heavy, Apr 27 '13 at 11:27
Off topic but avoid using body-onload, use eventlistener `loaded` on `window` instead. — Achshar, Apr 27 '13 at 11:34
Maybe have a look at [Javascript: Do I need to put this.var for every variable in an object?](http://stackoverflow.com/questions/13418669/javascript-do-i-need-to-put-this-var-for-every-variable-in-an-object) — Bergi, Apr 27 '13 at 14:37

score 2 · Accepted Answer · answered Apr 27 '13 at 11:26

2

When you return name from the method, it actually returns the window.name because there is not context involved.

When you call this.name, this points to the dog object which has a name property so it returns that.

answered Apr 27 '13 at 11:26

Arun P Johny

384,651
66
527
531

The question is not about what this is pointing to. Question is why if use this.name or name in both the setName and getName function i get expected result(Bingo). But when i use this.name in getName and simply name in setName it returns an empty string. – Rohit Raisinghani Apr 27 '13 at 12:41
because when you use only `name` it points to `window.name` and `this.name` it points to `dog.name` – Arun P Johny Apr 27 '13 at 13:05
1

please look at the first code. I am using only name in that case. why does name in that case doesnt point to window? – Rohit Raisinghani Apr 27 '13 at 13:42
@user1360433 can you check this demo http://jsfiddle.net/arunpjohny/7a66H/ – Arun P Johny Apr 27 '13 at 13:49

score 1 · Answer 2 · answered Apr 27 '13 at 12:01

If you don't specify this when setting the name value the actual variable that gets set will be window.name. But when you use this.name the actual value that gets set will be dog.name. Just modify the code as given below and see.

function BodyLoaded()
{

    var dog = {

    name: "defaultname",
    getName: function () {
        return this.name;
    },
    setName: function (n) {
        this.name = n;
    }
};

dog.setName("bingo");
console.log(dog.getName());

}

But as per your given code I couldn't understand the reason for getting an empty string. If should actually output value defaultname.

score 0 · Answer 3 · answered Apr 27 '13 at 11:33

0

function Dog() {
    var self = this;

    this.name = "defaultname";
    this.getName = function () {
        return this.name;
        // same as
        // return self.name
    }
}
var myDog = new Dog();
myDog.getName(); // defaultname

answered Apr 27 '13 at 11:33

Catalin

11,503
19
74
147

Javascript 'this' inside an object literal

3 Answers3

Linked