Add method to function

Question

I'm new to JavaScript and am learning from the book JavaScript: The Good Parts. In that book, the following recipe is used to augment a method to all functions:

Function.prototype.method = function (name, func) {
 this.prototype[name] = func;
 return this;
 }

I wanted to explore this concept, so I came up with the following script, which aims to add the greet() method to the func() function:

//define how the augmentation will work
Function.prototype.method = function (name, func) {
 this.prototype[name] = func;
 return this;
}
//create a dummy function to augment
function func() {
 //do nothing
}
//create function to be added
func.method('greet', function() {
 console.log("Greetings from greet()!");
});
//access the new function
func.greet();

When I run it, though, I get the error Uncaught TypeError: undefined is not a function. Could someone please tell me what I'm doing wrong.

• Phrogz: JSFiddle: jsfiddle.net/s8aed1bx
• vp_arth: try this[name] instead of this.prototype[name]
• ankush981: @vp_arth That works, but I'd really like to know why. Could you explain or provide me a link I can read from? :)
• vp_arth: @Phrogz already explained it :)
• ankush981: @vp_arth Yeah. I'm still don't understand it 100%, but it will help me look in the right direction. :)

Answer 1

In this case you want to modify the line:

this.prototype[name] = func;

to just

this[name] = func;

Demo: http://jsfiddle.net/s8aed1bx/1/

Alternatively you could use

this.constructor.prototype[name] = func;

but that would add each new method to every function, not just the one you call method on. Or you could use:

var f2 = new func();
f2.greet();

---

Why?

When looking up properties on an object in JavaScript, the object itself is searched, and then the prototype of the constructor of the object is searched (and so on up the chain). The .constructor of func is Function.

In this case what you have done would work if you wrote:

func.method('greet', function() {
 console.log("Greetings from greet()!");
});
var f2 = new func();
f2.greet();

The prototype of a function is used for new instances created by that function. (The objects you create have a .constructor of the creating function itself.)

• ankush981: Wow, thanks! If it's not too much of an effort, care to explain why? :)
• Manwal: Learn new thing today.
• Phrogz: @dotslash Edited with more info.
• ankush981: @Phrogz Superb answer! Couldn't have asked for more. :)
• ankush981: @Manwal I guess it'd be the Function object which serves as the prototype for all functions? My JS fundamentals are quite shaky, though. :P