中阶魔法 - 闭包 Closure (一)

前情提要

「艾草艾草，你在做什麽？」

艾草：「没特别做什麽呀！」

「艾草艾草，我问你喔！」

艾草：「嗯嗯，问呀，但为什麽都要叫我名字两次呀？」

「透过两次的呼叫希望可以唤醒存在你心中的真善美，能使你成为更棒的存在！」

艾草：「？？」

「上次在哪本魔法书看到的呀，好像某个术式要呼叫两次什麽的，实验一下！」

艾草：「啊，你说的应该是闭包吧？这个术式比较复杂，再陪你复习一次原理吧！」

闭包 Closure

以下引用至 MDN：

闭包（Closure）是函式以及该函式被宣告时所在的作用域环境（lexical environment）的组合。

这样可能不理解，来看一段程序码：

像这样函式内 return 函式，且内层函式内并没有 textContent 变数，需要透过范围链找到外层的 textContent 变数来使用，就称为闭包。

function outer(text) {
	let textContent = text; 
  return function inner(name) {
    console.log(`${textContent},${name}`); //"Hello,艾草"
  };
}

闭包的呼叫要使用两个小括号，只使用一个小括号时，会印出整个内层函式，第二个小括号会呼叫被 return 的函式，底下分别为使用一个及两个小括号呼叫的印出结果：

一个小括号：

outer('Hello');

印出结果：

两个小括号：

outer('Hello')('艾草');

印出结果：

接下来，闭包还可以这样使用：

将变数赋予值为外层函式後，再透过变数呼叫内层函式，一样可以成功印出。

function outer(text) {
	let textContent = text;
  return function inner(name) {
    console.log(`${textContent},${name}`); //"Hello,艾草"
  };
}
let sayHello = outer('Hello');
sayHello('艾草');

为什麽内层函式可以持续取到外层函式的变数呢？

首先，传值、传参考文章内有提到：每宣告一个变数，都会有相对应的记忆体空间存放变数。

而每个执行环境都会有对应的记忆体空间存放变数、函式，所以当我们执行到程序码 let sayHello = outer('Hello') 时会跑去建立函式 outer 的执行环境，而执行到 let textContent = text 时，该执行环境内会产生记忆体空间来存放 textContent 变数与其值。

执行堆叠会如下图：