JavaScript闭包-帮助我理解为什么内部函数的返回值不返回

Question

Following code does NOT work:

function addToAnswer(param){
  var answer = 10;
  function adder(){ 
    return answer + param;  
  };
  adder();
}
console.log(addToAnswer(5));  // returns undefined, expecting 15

The fix to this code is return adder(); I feel pretty stupid that to me, addToAnswer() should return the value from adder() function. How would you answer if asked why it doesn't work?

Answer 1

How would you answer if asked why it doesn't work?

I'd say that in JavaScript, functions generally don't return a value unless you explicitly use return to do so. (There are languages where they do, notably CoffeeScript, but not JavaScript.)

The only exception is the concise arrow function , which implicitly returns the result of the one expression it's allowed to contain.

Here's an example of a concise arrow function being used:

someArray.sort((a, b) => a - b);
//             ^^^^^^^^^^^^^^^---- concise arrow function

But that's the only exception. Verbose arrow functions, function functions, and methods all require an explicit return . If the code path taken through the function doesn't reach an explicit return with a value, the result of calling the function is the value undefined .

---

(Some may argue that constructor functions are a second exception to the rule, because when you do new Thingy the result is the new thingy even if Thingy doesn't have a return value, but it's not true. In that case, it's the new expression that has a result, not that the constructor is returning anything implicitly. And in fact, the distinction is clearly drawn in the specification.)

Answer 2

Unless a function executes a return statement, it returns undefined . It doesn't automatically return the value of the last line in the function. So when you write:

adder();

at the end of the function, it calls adder() , which returns 15 . Then addToAnswer discards this value and returns undefined .

Answer 3

For that, you need to understand how return works.

When you call the add(); the control jumps to the start of the add function, and when inside it reaches the return statement, the control jumps back to the point where the add function was called, along with any value if processed, and continues with the rest of the code.

Since the addToAnswer function is not told to return a value, hence it processes the code( calculating param + answer), but doesn't return anything, hence the value of that function is undefined.

For the sake of experimentation you can remove the return keyword from the inner function and instead return adder(); . You'd get undefined, because even though the adder function processed the code since it was not asked explicitly to return a value, it didn't.

Answer 4

When the function adder() returns, it only pops out the current Execution Context and return to the layer beneath it -- addToAnswer() . You need to understand how the Execution Stack works:
1. When a file is first run, a Global Execution Context is created.
2. All of the values not defined within another function are added to the Global Execution Context.
3. When the first function is run, a new execution context is created.
4. This new execution context is capable of referencing the variables and functions defined in whatever parent context is below it in the stack, in this case, the Global Execution Context.
5. Finally, a third execution context is popped onto the stack for any functions defined within function addToAnswer() .

http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/ https://simpleprogrammer.com/2016/06/06/javascript-execution-stack-key-learning-language/