specifics of closures in JavaScript and anonymous functions

Question

This code results in "!" being logged on the console.

var g = {};
(function() {
    var t = this;
    t.x = "x";
    g.a = function() {
        console.log(t.x);
    };
})();

(function() {
    var t = this;
    t.x = "!";
    g.b = function() {
        console.log(t.x);
    };
})();

g.a();

Do anonymous functions share a this? Am I using this wrong? I don't really understand what's going on here.

I'd like for g.a() to continue returning the value of x defined in the first anonymous function.

I'm using node.js if it makes a difference.

Felix Kling · Accepted Answer · 2011-07-02 20:57:16Z

4

In the immediate functions, this refers to the global object ^[docs]. So in this case in both functions this indeed refers to the same element and you are overwriting x with the second call.

What object this refers to is determined by how the function is called.

If you just execute a function with funcName();, then this refers to the global object.
If the function is assigned to a property of an object, obj.funcName() , this refers to the object.
If you call the function with the new operator, new funcName();, this refers to an empty object that inherits from the functions prototype.

You can also explicitly set this by using call ^[docs] or apply ^[docs].

Instead referring to this, you could create a new object in both functions:

var t = {};

Additional note: It makes no difference whether you run the code in the browser or with node.js. The global object is part of the specification and has to be provided by the execution environment. In browsers it is the window object, I don't what it is in node.js, but it does not matter as long as it follows the specification.

edited Jul 2, 2011 at 20:57

answered Jul 2, 2011 at 20:26

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

7 Comments

Aaron Yodaiken Over a year ago

Doesn't this refer to the function sometimes?

Felix Kling Over a year ago

@luxun: You mean to the function itself? No, never.

Pointy Over a year ago

Well, never unless you specifically set things up so that it does, but that'd be sort-of weird. It certainly doesn't by default or anything.

Aaron Yodaiken Over a year ago

How would you "specifically set things up so that it does"? Thanks.

Alex Wayne Over a year ago

Function call where this is the function object: var func = function() { console.log(this); }; func.apply(func); Which is weird...

|

Alex Wayne · Accepted Answer · 2011-07-02 20:49:52Z

3

Felix Kling is the right long answer. But I wanted to chime in with what I think you actually want:

var g = {};
(function() {
    var x = "x";
    g.a = function() {
        console.log(x);
    };
})();

(function() {
    var x = "!";
    g.b = function() {
        console.log(x);
    };
})();

g.a(); // "x"
g.b(); // "!"

Now g.a() and g.b() both print out x, but each function has their own separate x shared with the closure. If these vars should be private an only accessible internally to each of these functions, this is how you hide them and persist them through multiple calls.

answered Jul 2, 2011 at 20:49

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-07-02 21:10:48Z

1

When I look at this script in the debugger in Chrome as you've shown it, the "this" value in both anonymous functions is set to the global variable "window". That means that each anonymous function is setting the value of window.x so the last one executed wins and is the value that survives, thus window.x == "!" after the second anonymous function executes.

It's unclear to me what you expected "this" to be or what you're actually trying to accomplish with this code so I don't know what alternative to suggest. If you just want the previous state in the anonymous function to survive for the internal function, then you can just rely on local variables (which will survive in the closure) and not use the "this" reference at all. Squeegy's example shows that.

edited Jul 2, 2011 at 21:10

answered Jul 2, 2011 at 20:53

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

specifics of closures in JavaScript and anonymous functions

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related