Question

When I run this code:

var Test = function() {
    return this.stuff;
};

Test.stuff = 'Neat!';

document.write(Test() || 'Not neat.');

Why do I get ‘Not neat.’? Why can’t I access the stuff property using this.stuff?

Answer 1

While other people have posted why this occurs (the understanding of this is incorrect), here is one solution which will work reliably.

Update: As Raynos noted, when using strict mode functions in ECMAScript 5th Edition, it is invalid to use arguments.callee (it will throw a TypeError). Thus caution should be exercised if using this approach. (When using a [correct] ECMAScript 5th edition engine, there is no reason to use arguments.callee over the name given to the function which is bound to the new scope — see the end of the answer.)

var Test = function() {
   // arguments.callee is the current function, if any
   return arguments.callee.stuff
}
Test.stuff = 'Neat!'
alert(Test() || 'Not neat.') // Neat!

Another is to use a closure:

var Test = (function () {
  function fn () {
    // closure over fn, which names this function-object
    return fn.stuff
  }
  fn.stuff = 'Neat!' // here
  return fn          // do not combine with function declaration!
})()
Test.stuff = 'Neat!' // or here
alert(Test() || 'Not neat.') // Neat!

Or, a closure over a variable directly:

var Test = (function () {
  var stuff = 'Neat!'
  return function () {
    // variable closure, no property
    return stuff
  }
})()
alert(Test() || 'Not neat.') // Neat!

Or… so many ways.

Happy coding.

---

Another approach that was pointed out by Aadit M Shah is to use the function identifier to refer to the current function:

var Test = function Temp () {
   return Temp.stuff
}
Test.stuff = 'Neat!'
alert(Test() || 'Not neat.') // Neat! (But see below.)

As Aadit points out, this is valid, as per the ECMAScript 5th edition specification, page 99:

The Identifier in a FunctionExpression can be referenced from inside the FunctionExpression’s FunctionBody to
allow the function to call itself recursively. However, unlike in a FunctionDeclaration, the Identifier in a FunctionExpression cannot be referenced from and does not affect the scope enclosing the FunctionExpression.

However, some browsers (at least IE9) implements this incorrectly (and I am not sure if the above noted behavior is well-defined in the 3rd edition). Consider:

var x = function y () { return y }; y = 42; x();

In IE9 it will yield 42 and in FF8 it will yield the function-object. IE9 is incorrect here as it introduces y as a variable in the enclosing scope, which is forbidden by ECMAScript for function expressions. Here is an in-context example of how this incorrect implementation can lead to different results:

var Test = function Temp () {
   return Temp.stuff
}
Test.stuff = "Neat!"
Temp = {}
alert(Test() || 'Not neat.') // 'Not neat.' in IE9, 'Neat!' in FF8