---
tags: Javascript,
disqus: hackmd
---
{%hackmd theme-dark %}

# 閉包(Closure)|chrisHsiao

閉包的好處有什麼？優點之一就是能把變數隱藏在裡面讓外部存取不到

---

簡單的範例：

function test() {
    var a = 10;

    function inner() {
      console.log(a); // 還是 10
    }

    console.log('inner', inner);

    return inner;
}
    
var aaa = test();

console.log('aaa', aaa);

aaa();

上面這段程式碼，先解釋一下他是如何運作，
aaa這個變數接收了test()所return的inner，也就是說aaa接收了下面這ㄧ段。

function inner() {
  console.log(a); // 還是 10
}

這時候執行aaa(); 就可以看到console印出10。

---

回看到最開始的第一句話
閉包的好處有什麼？優點之一就是能把變數隱藏在裡面讓外部存取不到

可能你會想，嗯？ 我在console輸入aaa()一樣會被執行啊，輸入aaa一樣可以看到他的function寫什麼。

沒錯，但是你看不到他的10是從哪裡來的，就算你知道10是由var a = 10來的，也沒有辦法對他操作。如此一來就可以起到保護變數的作用。

function test() {
    var a = 10;

    function inner() {
      console.log(a); // 還是 10
    }

    return inner;
}
    
var aaa = test();

aaa(); // 10

var a = 20;

aaa(); // 10

實際應用
---

function handleOnload(){
    var a = 10;

    var myObj = {
        b: 10,
        test: function(){
            console.log('myObj的this', this);
            console.log('a + b', a + this.b);
        }
    }

    return myObj;
};

var executeOnload = handleOnload();

executeOnload.test();

---

參考文獻
[所有的函式都是閉包：談 JS 中的作用域與 Closure](https://blog.huli.tw/2018/12/08/javascript-closure/)

[你不可不知的 JavaScript 二三事#Day28：閉包 (Closures)](https://ithelp.ithome.com.tw/articles/10209465)

[你不可不知的 JavaScript 二三事#Day29：閉包 (Closures) 進階打怪實戰](https://ithelp.ithome.com.tw/articles/10209656)

---

###### tags: `Closure` `閉包` `javascript`