Question

Possible Duplicate:
Javascript: Do I need to put this.var for every variable in an object?

I’m struggling to understand functions and objects in javascript. It is said that also functions are objects and objects are kind of “associative arrays” i.e. collections of key-value pairs. I understand that if I write

function myFunction() {
    var value = 0;
}
alert(myFunction.value); //then this gives me "undefined"

because variables have function scope. But if I write

function myFunction() {
    this.value = 0;
}
alert(myFunction.value); //then this gives me "undefined" too.

But finally, If I write

function myFunction() {
    this.value = 0;
}
myFunction.value = 0;
alert(myFunction.value); //then this gives me 0

So I can give myFunction property “value” but from “outside”. Can someone explain what is going on and why this.value = 0; doesnt create property “value”.

Answer 1

Let’s look at all three cases individually:

function myFunction()
{
    var value = 0;
}

Here, you’re declaring a variable in the function’s scope. Each time the function is called, the variable will be created (and memory will be allocated). When the function returns, the variable goes out of scope – the variable value is flagged and will be GC’ed. The scope can’t be accessed from a scope “higher” than this function’s scope… if this function defined a function within its scope, that function will have access to the variable value (look into closures for more details). Bottom line: the variable only exists as when the function is called, and won’t exist after the function returns.

function myFunction()
{
    this.value = 0;
}

Here, you’re defining a function that could be a constructor, a method, an event handler or a combination of all of the above. this is a reference that will point to the context in which the function is called. This contexted is determined “ad hoc” and may vary:

myFunction();// global scope, this points to window
var anObject = {method: myFunction};
anObject.method();//called in the object's context, this points to object
console.log(abObject.value);//logs 0
var instance = new myFunction();//as constructor
console.log(instance.value);//logs 0
document.getElementById('anInputField').onclick = myFunction;//on click, value will be set to 0

In the last case:

function myFunction()
{
    this.value = 0;
}
myFunction.value = 0;

It wouldn’t have made any difference if you’d have written this:

function myFunction()
{}
myFunction.value = 0;

Because, as I explained above: this references whatever the context is at the time the function is called. This needn’t be myFunction, in fact: more often than not it won’t be:

var anObject = {method: myFunction};
myFunction.value = 101;//myFunction.value is changed
anObject.method();
console.log(anObject.value);//0 -> the function still sets the value property to 0

If you want to access a function’s properties inside that function, the easiest way is to reference that function like any other object:

function myFunction()
{
    this.value = myFunction.value;
}
myFunction.value = 101;

Caution:
Just a friendly warning: it’s not very safe to use this in functions without checking for globals… If a function is called without an explicit context, JS uses the global (window) object by default. This means that every line that assigns a property to whatever object this happens to be pointing too will set a global variable:

function myFunction()
{
    this.foo = 'bar';
}
myFunction();
console.log(window.foo);//logs bar EVIL GLOBAL

A few ways to prevent the global object from being cluttered with globals:

function mySafeFunction()
{
    'use strict';//throws errors, check MDN
    //this defaults to null, instead of window
    impliedGlobal = 'Error';//doesn't work
    this.onGlobal = 'Error';//null.property doesn't work
}
//same goes for constructors, but a more precise check can be used, too (and works on older browsers)
function SafeConstructor()
{
    if (!(this instanceof SafeConstructor))
    {//this doesn't point to SafeConstructor if new keyword wasn't used
        throw new Error('Constructor wasn\'t called with new keyword');
        //or "correct" the error:
        return new SafeConstructor();
    }
    console.log(this);// will always point to the SafeConstructor object
}