匿名函数如何传递参数

Question

I've been playing around with javascript functions and I stuck understang the flow of a piece of code: Let's take this example

Test = (function(arg) {
    function Test(str) {
        console.log(arg + ' ' + str);
    }

    console.log('toto');

    return Test;
})()

So, if I run this I'll get 'toto', fine ! Now If do this:

Test = (function(arg) {
        function Test(str) {
            console.log(arg + ' ' + str);
        }

        console.log('toto');

        return Test;
    })('titi')
Test('tata');

I'll get:

toto
titi tata

How is this happening, when I wrote Test('tata'), did I call the first Test, I mean:
Test = (function(arg) ...
Or I ran the function Test(str) ?
And If I'm actually running the first Test, How it passed Tata to the function Test inside of it?
And finally, Why it didn't log toto another time when I called Test('tata')?

Answer 1

Your anonymous function returns the inner function "Test". The console.log("toto") call is not inside that function.

Calling the returned function does not call the anonymous function again. Your inner function however retains it's "memory" of the "arg" value passed in, and that explains why it logs "titi tata".

So, what happens step-by-step is:

1. The variable "Test" is declared;
2. The anonymous function is called.
3. The inner function "Test" is defined in the local context of the anonymous function.
4. The "toto" log statement is executed.
5. The return statement is executed, and the function exits with a reference to the inner function "Test".
6. The return value is assigned to the variable "Test' in the outer context.
7. The returned function is called via the reference in the outer "Test" variable, with the argument being the string "tata".
8. The console.log() statement in the returned function is run, using a string constructed by concatenating the value of "arg" as it stood when the function was created ("titi") with the argument passed in ("tata").

So the function returned in step 5 "remembers" the "titi" argument, so any call to that function will result in the string "titi" being prepended.

Answer 2

The inner Test is a new function, unrelated to the initial Test . Further, you've returned it, however it's maintained the arg with it's value of titi within its closure.

When you assign Test , it outputs the "toto", but never runs the inner Test function, so you do not see "titi" until you call your Test('tata') which then calls the inner returned function which has saved "arg" as "titi" initially.

If you want to think about how it's run, you would actually end up with this (where Test is assigned the inner function, and has saved 'titi' as arg ):

Test = function(str) {
  console.log('titi' + ' ' + str);
}
console.log('toto');

Test('tata');

Answer 3

Let's analyze your code a bit:

Full code (slightly edited):

TestO = (function(arg) {
    function TestI(str) {
        console.log(arg + ' ' + str);
    }

    console.log('toto');

    return TestI;
})()

The outer part:

TestO = function(arg) { ... } (/* 0 parameters */)

Test is initialized to the return value of that anonymous function called with 0 parameters.

The inner function:

function TestI(str) {
    console.log(arg + ' ' + str); outer function
}

arg is the value of the argument passed to the outer function. It is available because of closures.

Outer function body

console.log('toto'); 
return TestI; // this value will be passed to TestO

This code is executed when you call the anonymous outer function, not TestO, not TestI. The outer function is called when TestO is initialized.

Conclusion

The anonymous outer function is called when TestO is initialized, logs 'toto' and initializes TestO with the TestI function (which is also a closure over the arg parameter of the anonymous outer function).

TestO('tata') // calls TestI with the closured value of `arg` as `arg` and 'tata' as `str`