Scope of self-invocation function in Javascript

Question

Why does self-invocation function inside a function don't get the scope of the outer function in JavaScript?

var prop = "global";

var hash = {
    prop: "hash prop",
    foo: function(){
        console.log(this.prop);
        (function bar(){
            console.log(this.prop);
        })();
    }
};

var literal = {
    prop: "object"
};

hash.foo();
// hash prop
// global

hash.foo.call(literal);
// object
// global

Looks like altering the scope of the outer function has no effect on the scope of the inner self-invocation function.

PS: The question is not about how to alter the scope of the inner function. But what is the proper explanation in the "Javascript language" perspective? Does all self executing functions have 'global' scope by default? If so, why?

Ivo Wetzel · Accepted Answer · 2010-11-23 22:38:13Z

7

Your problem is the this and what it references:

foo: function(){
    console.log(this.prop);
    (function bar(){
        console.log(this.prop);  <--- this does not reference to foo here, but instead it refers to the window object
    })();
}

You need to keep a reference to the outer this:

foo: function(){
    console.log(this.prop);

    var that = this;
    (function bar(){
        console.log(that.prop);  <--- tada!
    })();
}

Update
Some explanation. It's all about how JavaScript determines the context when invoking a function.

function Test() {
    this.name = "Test";
    this.bar = function() { console.log("My name is: "+ this.name);}
}

function Blub() {
    this.name = "Blub";
    this.foo = function() { console.log("My name is: " + this.name);}
} 

var a = new Test();
var b = new Blub();

// this works as expected
a.bar(); // My name is: Test
b.foo(); // My name is: Blub

// let's do something fun
a.foo = b.foo; // make an educated guess what that does...

a.foo() // My name is: Test

Huh? Aren't we referencing the method of Blub? No we're not. We are referencing the unbound function of Blub.

JavaScript binds on . (dots) and based on that it decides waht the value of this should be.

Since you're not calling your anonymous function on an object (therefore no .) it will make this reference to the global object, which is - in case of the browser - the window object.

Another example (one might think this would work):

var str = "Hello World";
var ord = str.charCodeAt; // let's make a little shortcut here.... bad idea

ord(0) // no dot...

Instead of the char codes that are in str we get the ones that are in the global object, of course that's not a string so charCodeAt calls toString on which results in "[object DOMWindow]"

edited Nov 23, 2010 at 22:38

answered Nov 23, 2010 at 22:14

Ivo Wetzel

46.8k17 gold badges102 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christian C. Salvadó Over a year ago

this will refer to the global object, not to bar. More info.

Ivo Wetzel Over a year ago

@CMS Yeah small black out here, it's quite late, fixed it.

Leo Lobeto Over a year ago

In your first example this do not references "bar". It references your root object (the window object if you are inside a web browser)

cdhowie · Accepted Answer · 2010-11-23 22:14:11Z

1

You are not applying any object as the this context when you call the inner function, so it gets this set to window by default. If you wanted to call the closure with the same this as the outer function, you would have to do:

(function bar(){
    console.log(this.prop);
}).call(this);

Or:

var that = this;
(function bar(){
    console.log(that.prop);
})();

answered Nov 23, 2010 at 22:14

cdhowie

172k25 gold badges303 silver badges324 bronze badges

Collectives™ on Stack Overflow

Scope of self-invocation function in Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related