trying to understand javascript Function.prototype

Question

I trying to understand this piece of code

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

what does "this" refering to in the function body ? Is it refering to Function.prototype ? Is it trying to add a member to Function.prototype.prototype , namely Function.prototype.prototype[name] ?

Answer 1

Function in Function.prototype are called on Function instances.
Therefore, this refers to the function you called it on.

this.prototype would refer to the prototype of the function you called it on.

For example:

function MyClass() { }
MyClass.method("myMethod", function() { });
var c = new MyClass();
c.myMethod(); //MyClass.prototype.myMethod

• brymck: +1 Also, to add a bit to this answer, the return this; at the end just makes the function available for chaining, i.e. something like MyClass.method("a", function() {}).method("b", function() {}); and so forth.
• RobG: Chaining or tail calling is not always a good idea as it can make code hard to read and difficult to debug.

Answer 2

"this" refers to the new function you have created on the right-hand side of the assignment statement.

Answer 3

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

This means that functions inherit a method property from Function.prototype. e.g.

 function Foo(){}
 alert(typeof Foo.method); // function

When called as Foo.method() then within the method function, this will refer to Foo, so:

 Foo.method('sayHi', function(){alert('hi');});

creates a sayHi property of Foo.prototype and assigns it a value of the supplied function. Note that Foo doesn't inherit the function assigned by method, only objects created by Foo (i.e. instances of Foo) have the method.

Notes

A function's this keyword is set by the call, so if you call method some other way it will likely misbehave:

 var c = { method: Foo.method };
 alert(typeof c.method); // function
 c.method('sayHi', function(){alert('hi');}); // this.prototype is undefined

• Ouroboros: Well, why is this.prototype undefined (in last line of code given in notes)? I understand that even for a object created using literal, the prototype is Object.prototype. So here, this.prototype should refer to Object.prototype. But obviously, I see your point that value of 'this' depends on caller. Can you please let me know if I am thinking on correct lines?
• RobG: The object assigned to c is a plain object that doesn't have a public prototype property (it only has one public property, method). When called as c.method(), this references c, but c doesn't have a public prototype property so within method this.prototype returns undefined. There is often confusion regarding the default public prototype of Function objects and the private, internal [[Prototype]] of all Objects (including Functions, Arrays, Dates, etc.) that is used for inheritance.

Answer 4

Function object vs Function instance object

First of all, in javascript, a function is also an object. From this, I mean not the object created by new () construct, but the function itself. To avoid confusion, I would refer such objects as Function object, and for object created using new () construct of a function as Function instance object.

_ proto _ and prototype properties

Any function object in javascript has two properties: _ proto _ and prototype. Moreover, any Function instance object (created using new constructor) has a property _ proto _ . The _ proto _ is what defines the inheritance. Some good resource on this could be found at

http://zeekat.nl/articles/constructors-considered-mildly-confusing.html

How is inheritance defined?

An object objA inherits another object objC if objA and objC are connected through any number of _ proto _ . So if objA has _ proto _ equal to objB, and objB has _ proto _ equal to objC, then objA inherits objB and objC, while objB inherits objC.

What is meant by inheritance?

It means any inheriting object can use any property of inherited object.

What is Function.prototype

It is the object whom _ proto _ of every function object refers. This means every Function object has access to properties of Function.prototype, since every Function object inherits Function.prototype object. This also means that if method property is added to Function.prototype object, it would be available to all the possible Function objects in javascript. This includes Strings, Number, etc.

this.prototype[name] = func;

'this' refers to Function object when the 'method' is invoked from Function objects like Number, String, etc. Which means that we now have a new property in Function object with name "name", and its a function 'func'.

What good is prototype property of Function object

A function object's prototype is referred to by the Function instance object's _ proto _ created using that function's new construct.

If the following was executed:

Number.method('integer', function () {...});

then Number.prototype has that integer method defined in it. This means each Number function instance object, e.g. new Number (2.4), would "inherit" this new property 'integer' from Number.prototype, since that Number function instance object would have its _ proto _ set to Number.prototype.