---
tags: JAVASCRIPT
---
【js筆記】閉包
===
# 閉包定義:
- 狹義：在一個function裡，return 一個function

## 範例

function buyItem(initMoney) {
  let myMoney = initMoney
  return function (price) { 
    myMoney = myMoney - price;
    return myMoney
  }
}
const balance = buyItem(3000)
balance(100)

## 應用
#### cache住資料

function complex(num) {
  console.log('cal')
  return num * num * num
}

function cache(_func) {
  const ans = {} // 保存的資料
  return function (num) {
    if(!ans[num]) {
      ans[num] = _func(num)
    }
    return ans[num]
  }
}

const complexCache = cache(complex)
console.log(complexCache(20))
console.log(complexCache(20))
console.log(complexCache(20))

#### 封裝資料
- 保護資料，用定義的function才能去修改

function createWallet (initMoney) {
  let money = initMoney
  
  return {
    add: function (num) {
      money += num
    },
    sub: function (num) {
      money -= num
    },
    get: function () {
      console.log(money)
    }
  }
} 

const wallet = createWallet(100)
wallet.add(1)
wallet.get()

## 原理: 保留scopeChain
- 進到一個function會產生一個EC
- 每個execution content都有個scope chain
- Execution Content: VO(AO), [[Scope]]

#### 作用域
- 切分變數有效範圍最小單位-function
- i 作用域鎖在function中　

for(var i = 0; i < 5; i++) {
    function inner (i) {
        setTimeout(()=>{
            console.log(i);
        }, 1000* i )
    }
    inner(i)
}
// 改成IIFE寫法較簡潔
for(var i = 0; i < 5; i++) {
	((i)=>{
		setTimeout(()=>{
			console.log(i)
		}, 1000 * i)
	})(i)
}
// let, i 作用域鎖在 { } 中
for(let i = 0; i < 5; i++) {
    setTimeout(()=>{
        console.log(i)
    }, 1000 * i)
}