Javascript factory pattern variable scoping

Question

I am following a tutorial that is showing the factory pattern to create objects in javascript. The following code has me stumped as to why it works.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>6-2.htm</title>
</head>
<body>
<script type="text/javascript">
function createAddress(street, city, state, zip) {
  var obj = new Object();
  obj.street = street;
  obj.city = city;
  obj.state = state;
  obj.zip = zip;
  obj.showLabel = function() {
    //alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
    //var obj;
    alert(obj.street + "\n" + obj.city + ", " + obj.state + " " + obj.zip);
  };
  return obj;
};

var JohnAddr = createAddress("12 A St.", "Johnson City", "TN", 37614);
var JoeAddr = createAddress("10061 Bristol Park", "Pensacola", "FL", 32503);

JohnAddr.showLabel();
JoeAddr.showLabel();
</script>
</body>
</html>

the first commented line seems proper to me (using the this keyword in the showLabel function). i'm not sure how using obj in its place is working. obj would have to reference a global variable somewhere because within that function when its run there is no obj defined, right? since i make 2 objects, its not just luck in this case that both get displayed fine, the older values for obj's contents are stored and referenced properly. but how? if i uncomment the second comment then it breaks and i understand why, now im explicitly telling js that i'm talking about a local variable and there is none.

score 6 · Accepted Answer · edited May 23 '17 at 11:55

Welcome to the world of closures. You are right to sense what you feel to behave as if it's a global but not quite global. That's how closures behave.

Basically in javascript when a function returns not all local variables are necessarily garbage collected/freed like in Java or C. If there is a reference to that variable then that variable survives in the scope of the function where it is defined.

Technically the mechanics are different and some people try to explain it that way and end up confusing a lot of other people. To me, closures are a sort of 'private' global variables in that like globals, they are shared accross functions but they are not declared in the global scope. It's just like what you describe feeling upon encountering this feature.

Here are some of my other answers here on stackoverflow related to javascript closures which I believe are worth reading:

Hidden Features of JavaScript?

Please explain the use of JavaScript closures in loops

Or you can just google the phrase "javascript closure" to explore the subject.

Additional answer.

As for the explanation of why this works in your code (as opposed to *cough* attempting to correct your code so that this would work even though it works in the uncorrected version *cough* ;-):

Javascript has late bindings. Very late, very-very late. Not only is this not bound during compile time, it is not even bound during run time. It is bound at execution time - that is, until a function is called you can't know what this really points to. The caller basically gets to decide what the value of this is, not the function where this is used.

Some funky javascript late binding maneuvers:

function foo () {
    alert(this.bar);
}

var bar = "hello";
var obj = {
    foo : foo,
    bar : "hi"
};
var second_obj = {
    bar : "bye"
};

foo(); // says hello, 'this' refers to the global object and this.bar
       // refers to the global variable bar.

obj.foo(); // says hi, 'this' refers to the first thing before the last dot
           // ie, the object foo belongs to

// now this is where it gets weird, an object can borrow/steal methods of
// another object and have its 'this' re-bound to it

obj.foo.call(second_obj); // says bye because call and apply allows 'this'
                          // to be re-bound to a foreign object. In this case
                          // this refers to second_obj

In your code, this conveniently refers to the object invoking the function as its method which is why it works even though you are apparently not using supposedly correct constructor syntax.

WHOA this is all very contrary (but interesting nonetheless) to what i've been wired to beleive. i really appreciate your input! what i think that helped me most is, if i see parenthesis (passing the variable in) it will behave as i expect it, but when i don't see them, i should be taking a closer look. — Ankur, Dec 10 '10 at 17:21

Josiah Ruddell · Answer 2 · 2010-12-10T16:26:37.040

The reason obj works inside the showLabel function is because obj is a local variable. The function is declared every time create address is called. In JavaScript we call this a closure.

Generally speaking the prototype object creation is preferred over this factory pattern.

Now have a look at this prototype example:

var Address = function(street, city, state, zip){
    this.street = street;
    this.city = city;
    this.state = state;
    this.zip= zip;
};

Address.prototype.showLabel = function(){
    alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
}

Now when I create a new address with new keyword:

// create new address
var address = new Address('1', '2', '3', '4');
address.showLabel(); // alert

The code will behave exactly like you expect. However if I do not use the new keyword this inside the constructor is actually the window object.

// create new address
var address = Address('1', '2', '3', '4'); // address == undefined
window.showLabel(); // address was added to window

I hope this clears things up a little bit.

the prototype pattern is more elegant i agree. i was coming from an academic POV and i wanted to learn why the factory pattern worked. thanks! — Ankur, Dec 10 '10 at 17:22

score 1 · Answer 3 · answered Dec 10 '10 at 16:04

1

function Address(street, city, state, zip) {

  this.street = street;
  this.city = city;
  this.state = state;
  this.zip = zip;
  this.showLabel = function() {
    //alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
    //var obj;
    alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
  };
};

var JohnAddr = new Address(...);
JohnAddr.showLabel();

answered Dec 10 '10 at 16:04

Bonshington

3,970
2
25
20

+1 doesn't answer his question about scope, but it's a nice elegant solution. – Zevan Dec 10 '10 at 16:07

score 0 · Answer 4 · answered Dec 10 '10 at 16:02

0

This is part of the weirdness of js, showLabel is a closure and has access to obj because it was in scope when created - a new closure is created each time createAddress is called.

To use 'this' in the way you're expecting you'd need to use the new operator so:

var foo = new createAddress(...

And be assigning the member variables to 'this'.

In this case where new isn't used 'this' is the global object.

answered Dec 10 '10 at 16:02

Tom

43,583
4
41
61

okay, i can accept that but then why does using the first commented line work? (without the other 2 lines i mean). if this.street would really be assigning window.street, then why does a second call to showLabel return a different value, and not lose the old value due to overwriting? – Ankur Dec 10 '10 at 16:12
am i right by answering my question by saying the following: `this` is a special variable and despite the closure it will still reference the object in which the function is a member of. or am i totally not getting this? – Ankur Dec 10 '10 at 16:35
@Ankur: see my answer. In short what you are saying is right. – slebetman Dec 10 '10 at 16:39

Javascript factory pattern variable scoping

4 Answers4