为什么我必须在闭包中声明一个函数，访问闭包中定义的变量？

Question

Why do I have to declare a function within a closure to be able to access the variables in the closure? I expected that I would be able to define the function outside of the closure, but close around it, providing the variables it needed, but the variables are not available unless the function is actually defined within the closure.

http://jsfiddle.net/c5oba93a/1/

//reusable function defined outside of closure, I want to swap out myMethod within this function.
var reusableFunction = function () {
    //common code
    try {
        console.log(myVar);
        myMethod.call(this);
    } catch (e) {
        console.log(e);
    }
    //common code
};


var functOneForClosure = function () {
    console.log('functOne');
};
var functTwoForClosure = function () {
    console.log('functTwo');
};

//myMethod and myVar are undefined in reusableFunction
(function () {
    var myMethod = functOneForClosure;
    var myVar = 'variable in closure with functOne';
    return reusableFunction;
})()();
(function (myMethodIn) {
    var myMethod = myMethodIn;
    var myVar = 'variable in closure with functTwo';
    return reusableFunction;
})(functOneForClosure)();

//if the function is defined within the closure it behaves as expected.
var getReusableVersion =(function (myMethod) {
    var myVar = 'defining function within closure makes the difference';
    return function () {
        //common code
        try {
            console.log(myVar);
            myMethod.call(this);
        } catch (e) {
            console.log(e);
        }
        //common code
    };
});

getReusableVersion(functOneForClosure)();

Answer 1

@pherris According to your beforelast comment: That won't help. The this inside the IIFEs refers to the window object and now you spam it with additional properties. But myVar and myMethod inside reusableFunction still are undefined, you have to use this.myVar and this.myMethod instead. Better than spamming the window is to pass the vars as arguments:

var reusableFunction = function (myVar, myMethod) {
    // no try/catch needed anymore
    console.log(myVar);
    if (typeof myMethod == 'function') myMethod.call(this);
    else console.log(myMethod);
};

Now there are two ways to invoke it with your IIFE.

The first returns the function from IIFE with arguments bound to it and executes it afterwards:

(function () {
    var myMethod = functOneForClosure;
    var myVar = 'variable in closure with functOne';

    // first argument of .bind() appears in the function as 'this',
    // the others appear as fixed arguments of the function
    return reusableFunction.bind(window, myVar, myMethod);
})()();

The second way invokes it inside the IIFE, so the invocation afterwards is removed:

(function () {
    var myMethod = functOneForClosure;
    var myVar = 'variable in closure with functOne';

    return reusableFunction(myVar, myMethod);

    // of course its possible to call on 'this', but that doesn't change anything:
    /* return reusableFunction.call(this, myVar, myMethod); */

})();