This and new, a close relationship

A JavaScript object is created with the new reserved word. The word this refers to its attributes.

More precisely, an object is defined like a function. Depending on whether you make a call or you create a new instance, the definition is used as a function or an object. We will see how in detail with examples.

Changing a global variable in an object

If you assign a variable inside an object, either you refer to it as an object or as a function, the variable is changed at a global level.

var test1 = 10;
function class1()
{
  test1 = 20;
}
new class1();
document.write(test1);

test1 = 50;
class1();
document.write(test1);

What we should notice is that we have created an object with new class1 without assigning a variable and therefore without reference to the created instance: the definition has become an object. Then we can still refer to the definition by a function call. As meanwhile we changed the value of the variable test1, we verify that the call has reassigned the same variable.

As we did not assign the instance to a variable, however, the statement serves only as a container where you can change global variables, and use local variables for internal calculations. If you want to call a method or access an attribute externally, you need obviously a reference to this instance.

This and global variables

Trying the reserved word this.

var test2 = 10;
function class2()
{
  test2 = 20;   // we change the global variable
  this.test2 = 30; // we try to change the variable locally
}

class2();
document.write(test2);

This is the global variable that has been modified with the instruction this.test2 = 30.

Going local with var

The var reserved word declares a variable with a local visibility function. If you use the same variable with this, is it local or global? We check ...

function class3()
{
  var test3 = 10;
  return(this.test3);
}
var x = class3();
document.write("x= " + x);

The result is undefined because "test3" doesn't exist globally and "class3" is in fact not an object but a function.

Combining var and this

We try to use var first to limit the visibility to the definition, then this to refer to the container, but will it limit the visibility to the container?

var test4 = 10;
function class4()
{
  var test4 = 20;
  this.test4 = 30;
  test4 = 40;
}
class4();
document.write("test4= " + test4);

This is clearly not the case, without this, we see that the assignment changes the contents of the local variable, but this has a different effect: the assignment is made on the global variable!
To confirm this was then added an assignment to 40 without this that modifies the local variable.

Not using this

We now check the global variable remains unchanged when not using this.

var test5 = 10;
function class5()
{
  var test5 = 20;
}
class5();
document.write("test5= " + test5);

This is the case, the variable is 10, the value assigned globally.

Now using new

With new an instance is created, so the function becomes the definition of an object, while remaining useful as a function elsewhere.

var test6 = 10;
function class6()
{
  var test6 = 20;
  this.test6 = 30;
}
x = new class6();
document.write("test6= " + test6);

The variable "test6" is changed locally thanks to this and because we have created an object with new.

The conclusion of all these demonstrations is that the this reserved word does not work when calling the function, or rather it applies to the global scope without another container, and that a function is an object only when the new reserved word is used. If the function was contained in another function this will still apply to the global scope. Demonstration:

var test7 = 10;
function class8()
{
  function class7()
  {
    this.test7 = 50;
  }
  class7();
}
x = class8();
document.write("test7= " + test7);

If you want the visibility of this to be limited to "class7" we will declare new class7() in "class8" and also new class8().

var test8 = 10;
function class8()
{
  function class7()
  {
    this.test8 = 50;
  }
  new class7();
}
x = new class8();
document.write("test8= " + test8);

So the variables in the definition of a function become attributes when it is an object. These attributes are public, but we may create the equivalent of private attributes using var and without using this. JavaScript becomes object-oriented by the mere fact of the word new!

In conclusion, how objects are defined in JavaScript gives them a universality that facilitates code reuse for different purposes, that the ability of the programmer will allow him to operate. No other language does offer this freedom.

See also...

Dynamic objects in JavaScript. Essentials. Instances, attributes, methods.

© 2013 Xul.fr