“var” variables, "this" variables and "global" variables - inside a JavaScript Constructor

Question

After my last question, this one is more accurate for me:

example:

function Foo() {
    this.bla = 1;
    var blabla = 10;
    blablabla = 100;
    this.getblabla = function () { 
        return blabla; // exposes blabla outside
    }
}
foo = new Foo();

what I understand now:

this.bla = 1;     // will become an attribute of every instance of FOO.
var blabla = 10;  // will become a local variable of Foo(will **not** become an attribute of every instance of FOO), which could be accessed by any instance of FOO - only if there's a method like "this.getBlabla". that's a "closer" ?
blablabla = 100;  // will define a **new** (or change if exist) global(window) variable.

Do I understand correctly?

Also - if I include var blabla = 10; and the getblabla function that uses it in the contractor, then for every instance of Foo("foo"...), there will be saved a Foo contractor function in the memory that includes this "private" variable. or will it be the same Foo function as place for the private variables - for ALL instances(like "foo") of Foo?

Your first three assertions are correct. I don't entirely follow what you are asking for your last question. Can you clarify? Can you also try variables not named so similarly? It is hard to follow. Thanks. — Brad, Aug 14 '12 at 16:59
It's complicated also to me. I mean - tha'ts a closure, right? and it's a contractor - so, for every instance of Foo, there will be a new closure of Foo in the memory? how does this stuff works ? thanks. — Daniel, Aug 14 '12 at 17:03

score 7 · Accepted Answer · answered Aug 14 '12 at 17:30

Just to focus on the scope, I'm going to run through this example, (with clearer variables) Afterwards, I'll connect it back to your variables.

var x = "Global scope";
var y = "Not changed.";

function Foo() {
    this.x = "Attribute of foo";
    var x = "In foo's closure";
    y = "Changed!"
    this.getX = function () { 
        return x;
    }
}

// do some logging

console.log(x); // "Global scope"
console.log(y); // "Not changed"
foo = new Foo();
console.log(y); // "Changed!"
console.log(foo.x); // "Attribute of foo"
console.log(x); // "Global scope"
console.log(foo.getX()); // "In foo's closure"

The line: this.x is equivalent to this.bla, and it defines an externally available attribute of a Foo object. y is equivalent to blablabla=100 and then the x within foo is equivalent to your blablabla within foo. Here's a really rough jsfiddle you can run to see this.

score 2 · Answer 2 · answered Aug 14 '12 at 17:28

Everything you've said is correct. (Of course, an error will be thrown at the blablabla assignment in Strict Mode.

On the second half, there's nothing special about the constructor function. It just acts like any other function in that it creates a closure that persists as long as its referenced (the lifetime of this.getblabla in this case).

Take this example:

function initBlaBla() {
    var blabla = 10;
    this.getblabla = function () { 
        return blabla; // exposes blabla outside
    }
}

function Foo() {
    this.bla = 1;
    blablabla = 100;
    initBlaBla.call(this);
}

foo = new Foo();

Here, the Foo constructor doesn't form a closure and its scope gets released immediately. initBlaBla on the other hand creates a closure. Interestingly, the compiler may see that blabla is never written to and optimize this.getblabla to always return 10 and never save the closure scope. This can be seen when you break execution in a function inside a closure and try reading a value it doesn't internally reference.

The closure scope will get released and queued for garbage collection if you call any of the following:

delete foo.getblabla;
foo.getblabla = "Anything!";
foo = "Anything else.";

score 1 · Answer 3 · answered Aug 14 '12 at 17:10

Yes, you understand it!
As for the second part of the question, it is all about inheritance, just like the relation between (global) window and the functions defined in it's scope (think root). So everything you do not re-specify, will be looked up at the ancestor.

This is a tremendous good video by Crockford, who explains it REALLY well.

“var” variables, "this" variables and "global" variables - inside a JavaScript Constructor

3 Answers3

Linked