Function overloading in Javascript

Question

In John Resig tutorial on Javascript, there's a code used for function overloading, which I couldn't figure out how it works :

function addMethod(object, name, fn){
  // Save a reference to the old method
  var old = object[ name ];

  // Overwrite the method with our new one
  object[ name ] = function(){
    // Check the number of incoming arguments,
    // compared to our overloaded function
    if ( fn.length == arguments.length )
      // If there was a match, run the function
      return fn.apply( this, arguments );

    // Otherwise, fallback to the old method
    else if ( typeof old === "function" )
      return old.apply( this, arguments );
  };
}

function Ninjas(){
  var ninjas = [ "Dean Edwards", "Sam Stephenson", "Alex Russell" ];
  addMethod(this, "find", function(){
    return ninjas;
  });
  addMethod(this, "find", function(name){
    var ret = [];
    for ( var i = 0; i < ninjas.length; i++ )
      if ( ninjas[i].indexOf(name) == 0 )
        ret.push( ninjas[i] );
    return ret;
  });
  addMethod(this, "find", function(first, last){
    var ret = [];
    for ( var i = 0; i < ninjas.length; i++ )
      if ( ninjas[i] == (first + " " + last) )
        ret.push( ninjas[i] );
    return ret;
  });
}

Why the second addMethod doesn't over write the first one ?
Why do we need to keep a reference to old ?

Bartek Banachewicz · Accepted Answer · 2015-10-14 11:39:15Z

3

Both of your questions answer one another. The second addMethod does overwrite the first find with a closure, that thanks to the old object containing the first find, is able to fall back to it in case the 2nd find mismatches the argument count.

When the third call to addMethod is done, it's basically doing the same thing, recursively. So it overwrites the closure with another closure, where old is the object of which the function find is a closure with the 2nd find and the old old object containing the 1st find. Phew.

Here's an approximate graphic representation:

find -> [ find3  ]
        [ old2 --]--> [ find2  ]
                      [ old1 --]--> [ find1 ]
                                    [ null  ]

edited Oct 14, 2015 at 11:39

answered Oct 14, 2015 at 11:26

Bartek Banachewicz

39.5k8 gold badges100 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arian Over a year ago

But after the third addMethod is called , we have this.find pointing to a function , which inside of it , fn expects 2 parameters in the argument , and old expects 1 parameter in the argument. What happens to the case where there's no argument. How is that handled ?

Collectives™ on Stack Overflow

Function overloading in Javascript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related