在JavaScript中隐式添加构造函数原型的方法

Question

The following is a code snippet from Crockford's JavaScript: The Good Parts :

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

Crockford goes onto explain that

"By augmenting Function.prototype with a method method, we no longer have to type the name of the prototype property. That bit of ugliness can now be hidden."

I'm basically at a loss to understand this point. What did we have to do before that we no longer have to do now?

Answer 1

He's saying that instead of writing:

MyType.prototype.myMethod = function() {
    ..
};

you can write this:

MyType.method("myMethod", function() {
    ...
});

with the possibility (given the return this ) of dot-chaining another call:

MyType.method("method1", function() {
    ...
}).method("method2", function() {
    ...
});

Meh.

Answer 2

Code break down:

Function.prototype.method

Every object in JavaScript allows prototypes . It's JavaScript way of inheritance. Function is the master object from which all other functions are created. When you set a prototype on it all Function objects inherit that property. In this case the function method .

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

If you wanted the expand your own functions with other methods you need to type:

  somefunction.prototype.name = function(){}

With this method you can do just this:

  somefunction.method(name, function)

This funky bit does that:

  this.prototype[name] = func;

It refers to the Function object using the this keyword. The proceeds to the prototype for inheritance. Sets the function to the prototype using [name] . This converts the string name to a property. Why so? Because:

 this.prototype.name 

would not work properly. If you use the code above, every time a new method is added it will be referenced by name and not the name you'sve chosen.

Why is prototype[example] the same as prototype.example. Because in JavaScript every property is stored in a arrayish list on the object and can be called like you call an item from an array using Object[].

Answer 3

Lets prove corckford's statement:

"By augmenting Function.prototype with a method method, we no longerhave to type the name of the prototype property. That bit of ugliness can now be hidden."

Here crockford wanted to say you can manipulate Function.prototype to achieve many different functionality for your personal usage.It is a functionality added to the function.prototype to add new method/property to any function.Functions in javascript inherits form Function.prototype.lets break down your code.

Function.prototype.method = function (name, func) {

in this line Function.prototype is added a new method.This method receive two arguments. name satands for a new methods name .And func stands for its functionality.I think you are familiar with what is methods and properties are.Functions are first class object in javascript.So they can be added new properties and methods during runtime.

this.prototype[name] = func;

Here this refers to the function which calls it. [name] is method name and func is the method's functionality It adds a new method to passed function using array notation. Then finally

return this;

with this statement passed function is returned with a new method added to it.

Here i have a practical example for you:

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

function Myfunction(){       // a constructor function called Myfunction
    this.name='robin';      // it has a name property
}

Myfunction.method('mymethod',function (){ console.log(' i am available')});  //adds a method named 'mymethod to Myfunction constructor

var newObj=new Myfunction();     // creates a new instance  of Myfunction class
console.log(newObj.mymethod());  //calls mymethod() of newObj

Here myfunction is a constructor.We can add inherited methods to this constructor's prototype usind Myfunction.prototype.mymethod=function(){ ..}

If you use myfunction as a constructor this is the way you add method to it.But As you've added a new functionality to Function.prototype ,you can simply call it like

Myfunction.method('mymethod',function (){console.log('i am available'}); //it will add a method named mymethod to Myfunction's prototype 

This statement will add a new method called mymethod to Myfunction()'s prototype implicitly .

so you don't have to write Myfunction.prototype.mymethod=function(){ console.log('i am available'); .Instead you can write Myfunction.method('mymethod',function (){ console.log('i am available'});

So it proves it will relieve you from writing Myfunction.prototype again and again every time you want to add new methods to Myfunction constructor .

So it proves crockford's statement .