Javascript class, why is this var accessible after instantiation

Question

Javascript newbie here, this block of code doesn't make sense.

function Warrior(n){
 var name = n;
 this.name = function(n){
   if( n ) name=n;
    return name;
  }  
}

Warrior.prototype.toString = function(){
    return "Hi! my name's "+this.name();
}

Converting the instance of Warrior to a string works, calling the name function works with or without params... why, shouldn't var name die right after the class is constructed? Why does it seem to linger? And if vars stay, then why use this?

You will want to read [How do Javascript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/111200#111200). That will explain it all. — jfriend00, Aug 31 '14 at 07:26
Also, in your `Warrior()` constructor, `this.name` and `var name` are completely different variables. `var name` is a local variable of your constructor function and `this.name` is a property of the newly constructed object. — jfriend00, Aug 31 '14 at 07:28

score 1 · Answer 1 · answered Aug 31 '14 at 07:18

Any function can create variables in its own scope and access any variable in its scope or any containing scopes. If a variable is still accessible in some way, it will still exist, and an inner function is one way that a variable can remain accessible. The question, then, is how to make the function that can access the variable accessible; that can be done through this. Here, it is.

score 1 · Answer 2 · edited May 23 '17 at 11:49

shouldn't var name die right after the class is constructed?

No, name variable needs to be available to the Closure exposed by this.name function.

if vars stay, then why use this?

In JavaScript, this is used to expose public methods and data as properties of the constructed object. Variables (declared with the var keyword) are internal to the function unless exposed by a Closure (just like in your case).

Also, there's no such thing as 'class' in JavaScript. There are objects but their structure and inheritance are defined using functional style and prototypical inheritance.

See Introduction to Object-Oriented JavaScript.

Wayne · Answer 3 · 2014-08-31T08:11:27.763

The variable dies unless it is still in use by an object. There are several ways to create closure.

"this" in your function points to the invoking function, by default the window object. Unless a new constructor is used.

thisObject = new Warrior("hello");

Would point this to the new thisObject.

This can be used within the inner function to point to a none global this (this would then point to the invoking functions namespace) ... then you would return the function to maintain the private n variable.

myobject = Warrior("hello");

But that is not the method your partial code is indicating.

function Warrior(n){
 var name = n;
 alert(this);
 this.name = function(n){
   if( n ) name=n;
    return name;
  }  
}
Warrior("hello");
window.alert(name);

see output of alerts below.

enter image description here

myObject = new Warrior("name");

would create the closure function in your example. MyObject becomes the this.

Javascript class, why is this var accessible after instantiation

3 Answers3