Question

I’ve been reading through quite a few articles on the ‘this’ keyword when using JavaScript objects and I’m still somewhat confused. I’m quite happy writing object orientated Javascript and I get around the ‘this’ issue by referring the full object path but I don’t like the fact I still find ‘this’ confusing.

I found a good answer here which helped me but I’m still not 100% sure. So, onto the example. The following script is linked from test.html with <script src="js/test.js"></script>

if (!nick) {
    var nick = {};
}

nick.name= function(){
    var helloA = 'Hello A';
    console.log('1.',this, this.helloA);

    var init = function(){
        var helloB = 'Hello B';
        console.log('2.',this, this.helloB);
    }

    return {
        init: init
    }
}();

nick.name.init();

What kind of expected to see was

1. Object {} nick.name, 'Hello A'
2. Object {} init, 'Hello B'

But what I get is this?

1. Window test.html, undefined
2. Object {} init, undefined

I think I understand some of what’s happening there but I would mind if someone out there explains it to me.

Also, I’m not entirely sure why the first ‘console.log’ is being called at all? If I remove the call to the init function //nick.name.init() firebug still outputs 1. Window test.html, undefined. Why is that? Why does nick.name() get called by the window object when the html page loads?

Many thanks

Answer 1

Also, I’m not entirely sure why the first ‘console.log’ is being called at all?

nick.name = function(){
    // ...
}();

Here you define a function, call it immediately (hence ()) and assign its return value ({init: init}) to nick.name

So the execution is:

1. Create a variable called nick if there isn’t one with a non-falsey value already
2. Create an anonymous function that…
3. Creates a variable called helloA in its own scope
4. Outputs data using console.log containing “1” (as is), this (the window because the function is executing in the global context instead of as a method), and this.helloA (window.helloA, which doesn’t exist.
5. Defines a function called init
6. Returns an object which gets assigned to nick.name
7. Then you call nick.name.init() which executes the init function in the context of name.
8. This defines helloB
9. Then it console.logs with “2” (as is), this (name), and this.helloB (nick.name.helloB – which doesn’t exist)

So the first output you get is from console.log('1.',this, this.helloA);

I think your main problem is that you are confusing this.foo (properties on the object on which a method is being called) with variable scope (variables available to a function)