Follows an extract from Closure: The Definitive Guide by Michael Bolin. It might look a bit lengthy, but it's saturated with a lot of insight. From "Appendix B. Frequently Misunderstood JavaScript Concepts":

What this Refers to When a Function is Called

When calling a function of the form foo.bar.baz(), the object foo.bar is referred to as the receiver. When the function is called, it is the receiver that is used as the value for this:

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.
obj.addValues(20);

If there is no explicit receiver when a function is called, then the global object becomes the receiver. As explained in "goog.global" on page 47, window is the global object when JavaScript is executed in a web browser. This leads to some surprising behavior:

var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
f(20);
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN

Even though obj.addValues and f refer to the same function, they behave differently when called because the value of the receiver is different in each call. For this reason, when calling a function that refers to this, it is important to ensure that this will have the correct value when it is called. To be clear, if this were not referenced in the function body, then the behavior of f(20) and obj.addValues(20) would be the same.

Because functions are first-class objects in JavaScript, they can have their own methods. All functions have the methods call() and apply() which make it possible to redefine the receiver (i.e., the object that this refers to) when calling the function. The method signatures are as follows:

/**
* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
*/
Function.prototype.call;
/**
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function
*/
Function.prototype.apply;

Note that the only difference between call() and apply() is that call() receives the function parameters as individual arguments, whereas apply() receives them as a single array:

// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

The following calls are equivalent, as f and obj.addValues refer to the same function:

obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

However, since neither call() nor apply() uses the value of its own receiver to substitute for the receiver argument when it is unspecified, the following will not work:

// Both statements evaluate to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

The value of this can never be null or undefined when a function is called. When null or undefined is supplied as the receiver to call() or apply(), the global object is used as the value for receiver instead. Therefore, the previous code has the same undesirable side effect of adding a property named value to the global object.

It may be helpful to think of a function as having no knowledge of the variable to which it is assigned. This helps reinforce the idea that the value of this will be bound when the function is called rather than when it is defined.

End of extract.

I have built quite a large "single-page" javascript website, that generats all HTML on the client. Server provides JSON only responses. I used Google Closure tools for the following reasons:

• Google Closure Templates allows designing templates in high level templating language (named soy) which is compiled either to pure javascript functions to run on the client or java code to run on the server site.

• Google Closure Compiler, which allows separating javascript code to modules and provides autmatic dependency injection for uncompiled mode. Good program structure and modularisation is necessary for any project exceeding simple html decoration. This is hard to achieve with frameworks like jQuery or dojo. In advanced compiled mode it transforms your javascript to shorter an more efficient equivalent, eliminates dead code and do dramatic reduction in size, which can shrink the original codebase to few % of the original size.

• Google Stylesheets is meta css language which works great with closure compiler.

• Google Closure Library is huge and well tested javascript library and with closure compiler, you only take what is needed.

To streamline the development, I'm using plovr, written by Michale Bolin, a former googler, one of the members of the original Closure Compiler Team.

I can recommend reading Michale's book: Closure, the Definitive Guide.

I must but warn, the initial leraning curve might be quite steep, but it is well worth the pain. Google used this tools to write almost all their web projects.

Just one more thing

If you feel really adventurous, and want to peep in to the future, I recomend upgrading the former strategy with Clojure/ClojureScript. For the start, watch this very persuasive talk of Rich Hickey and make sure to check Clojurescript one project.

goog.inherits(childConstructor, parentConstructor)

goog.inherits() establishes the prototype chain from the child constructor to the parent constructor.

/**
 * Inherit the prototype methods from one constructor into another.
 * @param {Function} childCtor Child class.
 * @param {Function} parentCtor Parent class.
 */
goog.inherits = function(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  /** @override */
  childCtor.prototype.constructor = childCtor;
};

In addition to prototype properties, constructors may have "own" properties (i.e. instance-specific properties added to this). Since goog.inherits() does not call the parent constructor, own properties are not copied to the child constructor and any initialization code in the parent does not get executed. For these reasons, the standard pattern is to chain constructors as in the following example.

/**
 * @param {string} name The parent's name.
 * @constructor
 */
var Parent = function(name) {
  /**
   * @type {string}
   * @private
   */
  this.name_ = name;
}

/**
 * @param {string} name The child's name.
 * @constructor
 * @extends {Parent}
 */
var Child = function(name) {
  Parent.call(this, name);
}
goog.inherits(Child, Parent);

goog.base(self, opt_methodName, var_args)

goog.base() is a helper function for calling parent methods so that you do not need to explicitly use call() or apply().

If [goog.base()] is called from a constructor, then this calls the superclass contructor with arguments 1-N.

If this is called from a prototype method, then you must pass the name of the method as the second argument to this function. If you do not, you will get a runtime error. This calls the superclass' method with arguments 2-N.

This function only works if you use goog.inherits to express inheritance relationships between your classes.

In Closure code it is common to chain constructors with goog.base() rather than calling the parent constructor explicitly.

/**
 * @param {string} name The child's name.
 * @constructor
 * @extends {Parent}
 */
var Child = function(name) {
  goog.base(this, name);
}
goog.inherits(Child, Parent);

Further Reading

• Inheritance Patterns in JavaScript by Michael Bolin
• An Examination of goog.base() by Michael Bolin
• Closure: The Definitive Guide by Michael Bolin
• JavaScript Patterns by Stoyan Stefanov (see Chapter 6: "Code Reuse Patterns" for a detailed analysis of the pattern used to implement goog.inherits() - Classical Pattern #5--A Temporary Constructor)