How this works within nested functions

Question

I have the following code snippet.

var myObject = {
    foo: "bar",

    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

with the following results.

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

I have a few questions about this code snippet.

What is the idea of putting the nested function inside the outer function. How would that benefit real life code?
I'm also struggling with the 'this' keyword, I always thought 'this' represented the global context, so I'm confused with how it works in the outer function but not in the inner function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — Arun P Johny, Aug 06 '15 at 04:10
The default value of `this` will depend on how the function was invoked... — Arun P Johny, Aug 06 '15 at 04:11
What `this` refers to depends on how the function is **called**. `foo()` and `obj.foo()` are two difference ways of calling a function. — Felix Kling, Aug 06 '15 at 04:11
But you can also change the `this` reference by using `call`/`apply` etc — Arun P Johny, Aug 06 '15 at 04:11
Could you please elaborate a little bit more on what you mean by how the function was called? I'm pretty green to javascript. — Code Junkie, Aug 06 '15 at 04:12
possible duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — rnrneverdies, Aug 06 '15 at 04:12

score 2 · Accepted Answer · edited May 23 '17 at 11:43

You really have two different concepts in your question:

this keyword.
closures.

Trying to use this inside a closure is known to confuse many people.

What is the idea of putting the nested function inside the outer function. How would that benefit real life code?

There is very good documentation about closures. If you are not familiar with closures, the gist is that it remembers the environment where the function was defined.

E.g. self.foo does return the correct value.

Applications are mostly functional programming / currying.

E.g. self.foo inside the closure does return the correct value but you did not have to pass the value to the function.

I'm also struggling with the 'this' keyword, I always thought 'this' represented the global context, so I'm confused with how it works in the outer function but not in the inner function.

Inside this block:

   (function() {
        console.log("inner func:  this.foo = " + this.foo);
        console.log("inner func:  self.foo = " + self.foo);
    }());

we are not using an object method, but a simple call. Because you are not using strict mode, this defaults to a global object.

In this other part:

    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);

we are inside an object method; this refers to the object myObject.

exercices

what happens if you use strict mode inside the closure?
what happens if you do window.foo = 'window foo'; before-hand?

score 0 · Answer 2 · answered Aug 06 '15 at 04:22

0

Maybe you can see this to understant the "this" in javascrpt.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

answered Aug 06 '15 at 04:22

afei

11
2

How this works within nested functions

2 Answers2

exercices