How do I add a method to a function?

Question

Specifically, how can I write prototypes that allow chaining, such as the following:

$('myDiv').html('Hello World').fadeIn('slow');

Answer 1

The technique you're describing is called fluent interface, and it involves returning the same kind of object from all chainable functions. That object's prototype contains the function definitions.

The linked article includes example code in various languages, including javascript.

Answer 2

Just return the appropriate stuff from the functions. The basic rule of thumb is take any method that would normaly return nothing and make it return this instead.

function Constructor(){};
Constructor.prototype = {
 foo: function(){
 console.log('foo');
 return this;
 },
 bar: function(x){
 console.log('bar', x);
 return this;
 }
}
var obj = new Constructor();
obj.foo().bar(17).bar(42).foo();

Answer 3

In that particular situation, each method returns this. So:

// ... this has to be the most impractical class I've ever written, but it is a
// great illustration of the point.
var returner = new function() {
 this.returnThis = function(){
 console.log("returning");
 return this
 }
 }
 var ret2 = returner.returnThis().returnThis().
 returnThis().returnThis() // logs "returning" four times.
 console.log( ret2 == returner ) // true

Answer 4

Chaining example:

var avatar = function() {
 this.turnLeft = function {
 // some logic here
 return this;
 }
 this.turnRight = function {
 // some logic here
 return this;
 }
 this.pickUpItem = function {
 // some logic here
 return this;
 }
};
var frodo = new avatar();
frodo.turnLeft().turnRight().pickUpItem();