---
# System prepended metadata

title: 學習心得(閉包)-作業理解

---

# 學習心得(閉包)-作業理解
看到這一周的作業大部分都是使用Repl.it提交就覺得暗自開心，代表我可以偷偷利用~~上班空閒時間來寫作業~~(debug)，比較不會在周末趕工感得要死要活。
因為之前看過[非常容易理解的介紹](https://www.youtube.com/watch?v=8aGhZQkoFbQ&index=42&list=WL&t=32s)，初步理解非同步(Asynchronous)與同步(Synchronous)的概念上倒是自覺沒遇到甚麼問題，一路順順的打開作業後，瞬間傻眼。

作業是這樣的，在以下@TODO後修改程式碼，使他可以順利console出
```
step 0 - start
step 1 - run
step 2 - run
step Done
```

```javascript=
const step0 = 'step 0 - start'
const step1 = 'step 1 - run'
const step2 = 'step 2 - run'
const stepDone = 'step Done'

const start = (callback) => {
  setTimeout(() => {
    console.log(step0)
    // @TODO:
    callback()
  }, 500)
}

const stepEvent1 = () => {
  return (callback) => {
    // @TODO:
    console.log(step1)
  }
}

const stepEvent2 = () => {
  return () => {
    setTimeout(() => {
      // @TODO
      console.log(step2)
    }, 500)
  }
}

const stepEventDone = () => {
  return console.log(stepDone)
}

start(stepEvent1)
```
目前只會印出
```
step 0 - start
```
其實之前也不是沒寫過函式內包函式的程式，但突然如此頻繁且樸實的出現在眼前，我一時之間還真是慌了手腳不知從何下手。(加上setTimeout出來搗亂，真的嚇壞程式菜雞了)

前前後後將程式刪刪改改，加上偷偷觀摩一下解答後，後莫名其妙地達成要求，但心裡很明顯地感到不踏實。礙於在公司實在不適合寫作業以及思考。(本來就不該!)下班後迫不及待重新打開作業，從頭到尾好好看過一次。
後來參考[閉包](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Closures)的內容之後，總算看得懂自己在寫甚麼。



舉例上面文件中的例子
```javascript=
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12
```
makeAdder()的函式中會回傳另一個匿名函式。而
```
var add5 = makeAdder(5)
```
代表宣告一個 add5 的值為 makeAdder(5)。
所以其實 add5 就變成 
```javascript=
function(y) {
  return 5 + y;
};
```
也因此 add5(2) 會回傳 7。

把它拆成一層一層來看就可以理解後面的運算邏輯。
不然我一開始看到 callback()() 的寫法還真的有些傻眼。

附上最後完成的[程式碼](https://repl.it/@cba5530/async-javascript-assignment-L1)。
<iframe height="400px" width="100%" src="https://repl.it/@cba5530/async-javascript-assignment-L1?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>