Javascript Augmenting basic types (prototype inheritance)

Question

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?

Answer 1

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.

Answer 2

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.