I just started reading on Douglas Crockford's "Javascript The Good parts" where he explains about Augmenting basic types.

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

The moment after doing this, the addMethod becomes available for all basic objects like String, Number etc. That leaves me puzzled

1. Why does this happen when I haven't added it to Object.prototype?

2. Why adding a method to Function.prototype gets reflected in all basic objects?

I just started reading on Douglas Crockford's "Javascript The Good parts" where he explains about Augmenting basic types.

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

The moment after doing this, the addMethod becomes available for all basic objects like String, Number etc. That leaves me puzzled

1. Why does this happen when I haven't added it to Object.prototype?

2. Why adding a method to Function.prototype gets reflected in all basic objects?

• javascript
• inheritance
• prototypal-inheritance

• No, it is JavaScript's implementation of prototype inheritance that is silly. Its weird using-Function-as-constructor style gives you none of the potential advantages of prototypes, while still being gratuitously different from the class-based inheritance that most programmers understand. It is nice to understand exactly what JavaScript prototypes are doing, but don't expect an epiphany that makes it obvious why that model makes sense. Because it doesn't. – bobince Commented Sep 3, 2009 at 15:16

3 Answers 3

He probably meant The moment after doing this, the addMethod becomes available for all basic objects object types like String, Number etc. This is because the String object is a function (but objects created by String are not).

E.g., given

var s = '';

You can do

String.addMethod(...);

but not

s.addMethod(...);

A brief explanation of the JavaScript type system comes here:

JavaScript does not have the normal concept of classes. Instead, you can achieve somewhat the same by turning any function into a constructor by puttin the new keyword in front of it when it is invoked.

E.g: given

function MyFunction(x) { this.myX = x; }

if you invoke it like

var myObj = new MyFunction(10);

it will create an object called myObj. This object will have a single member variable called myX. The function MyFunction is considered the constructor of the object (and is stored in the "constructor" property.

(Bonus question: What will happen if you invoke the function above without the new keyword, i.e. var x = MyFunction(10). The answer will probably surprise any sensible person.)

Now you have seen how any arbitrary function can be turned into a constructor. The built-in objects are exactly the same, string objects are created by the function String, numbers are created by the function Number, etc.

Just as those built-in objects are created by functions, each of those functions are also created by the "Function" function (yikes!).

Now on to prototypes.

in the example above, if you somewhere write

MyFunction.prototype.someNewMethod = function() {}

all objects created by the MyFunction constructor/function will appear to have an extra member function called someNewMethod. You can do many other funky things with prototypes, like replacing the prototype, or replacing the prototype's prototype, but I'm not an expert at that.

In object-oriented javascript, a function can serve as a class & constructor. So if your class was named MyObject, you could do the following:

// create a class/constructor
function MyObject() {
   // ...
}

// add a static method to the MyObject class
MyObject.someFunction = function() {
   // ...
}

// add an instance method to the MyObject Class
MyObject.prototype.someFunction = function() {
   // ...
}

In your example, the addMethod was added as an instance method to the Function class, which means it is available to all instances of Function. The MyObject function/class/constructor is an instance of Function, so you can call addMethod on it. This works with most any object-type, but not HTMLElements in IE and some other browsers.

1. Functions in JavaScript are objects. All objects have a hidden link to Object.prototype. Thus for the first declaration:

   > `Function.prototype.addMethod=function(name,func) {}
   

   You have declared a function that is linked to Function.prototype which itself is linked to Object.prototype.

2. For the second part its just an assignment where you are setting the name value pair to the Object.prototype and will return the add method to all String, Number objects since it is all declared in the prototype.