为什么要为JavaScript中的变量分配声明的函数？

Question

I'm trying to learn about closures and came across this bit of code from MDN. I tried it in jsbin and it works, but I can't figure out why it's necessary to assign makeFunc to var myFunc and then calling myFunc rather than just calling makeFunc, which doesn't work.

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();

Answer 1

I can't figure out why it's necessary to assign makeFunc to var myFunc

That isn't what is happening. Look at the code:

var myFunc = makeFunc();
                     ^^

makeFunc is being called . It is its return value that is assigned to myFunc .

That return value is displayName (which has access to the closed over name variable).

myFunc(); then calls that function.

Answer 2

makeFunc is returning a function called displayName which includes the value of "Mozilla" within the variable name which is only accessible within the displayName function (although it doesn't "know" that it was originally called "displayName"...it just simply now contains the body of that function along with the value of name ). When you assign the result of calling makeFunc to myFunc , myFunc contains the function displayName , including the value of name . Note, however, that displayName has not yet at that point in time been called/invoked. Now, when you invoke myFunc , displayName is run, creating an alert showing the name "Mozilla".

Answer 3

On page load closure allows a function to run automatically

FOR YOUR CODE -- you can re-adjust your code to this like you anticipated without assigning it to variable myFunc

(function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
})();

Answer 4

I'll try to give a very short answer:

makeFunc() only returns the function without executing it because the return value is the name of the function.

var myFunc = makeFunc();
myFunc();

From the code above you're assigning the function that I previously mentioned to myFunc . On the next line you add a () which means execute the function. Hence why you see the alert(); result.

---

Illustration

makeFunc() == displayName
myFunc == makeFunc()
myFunc == displayName
myFunc() == displayName()