JavaScript and Function overload clarification?
<p><em>So I was reading a book(Secrets.of.the.JavaScript.Ninja) and I saw this code which produce function overload :</em> </p>

<pre><code>function addMethod(object, name, fn)
{
        var old = object[name];
        object[name] = function ()
        {
                if(fn.length == arguments.length) return fn.apply(this, arguments)
                else if(typeof old == 'function') return old.apply(this, arguments);
        };
}

function Ninjas()
{
        var ninjas = ["Dean Edwards", "Sam Stephenson", "Alex Russell"];
        // addMethod is defined in Listing 2-28
        addMethod(this, "find", function ()
        {
                return ninjas;
        });
        addMethod(this, "find", function (name)
        {
                var ret = [];
                for(var i = 0; i &lt; 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 &lt; ninjas.length; i++)
                if(ninjas[i] == (first + " " + last)) ret.push(ninjas[i]);
                return ret;
        });
}

var ninjas = new Ninjas();


assert(ninjas.find().length == 3, "Finds all ninjas");
assert(ninjas.find("Sam").length == 1, "Finds ninjas by first name");
assert(ninjas.find("Dean", "Edwards").length == 1, "Finds ninjas by first and last name");
assert(ninjas.find("Alex", "X", "Russell") == null, "Does nothing");

function assert(a,b)
{
  if (a==true) console.log(b) ; else console("----");
}
</code></pre>

<p>As far as I understand , the <code>addMethod</code> always keep the <code>old</code> value of the function ( via closure) .</p>

<p>So finally , there is  <em>one</em> function which checks a condition , and if it fails , it invoke the <code>old</code> function which <em>in turn does the same thing</em>.</p>

<p>However I don't understand the evaluation of   <code>arguments.length</code> ( I know the diferences between <code>function().length</code> and <code>argument.length</code>)</p>

<p>But does <code>arguments</code> refers to  : (which rectangle ?)</p>

<p><img src="http://i.stack.imgur.com/gjIwe.jpg" alt="enter image description here"></p>

<p><em><strong>I tracked it  in debugger , and I'm getting confused because at first- the function registers ( so arguments.length is 3 <code>[(object, name, fn)]</code> , but later it invoked so now there are another arguments ....</em></strong> </p>

<p>Any help ? </p>

<p><a href="http://jsbin.com/ecebel/3/edit" rel="nofollow"><strong>Jsbin</strong></a></p>
