JS JavaScript閉包和作用域
閉包
JavaScript高級程序設計中對閉包的定義：閉包是指有權訪問另外一個函數作用域中變量的函數。
從概念上，閉包有兩個特點：
- 函數
- 能訪問另外一個函數的作用域中的變量
在ES6之前，JavaScript只有函數作用域的概念，沒有塊級作用域（但catch捕獲的異常，只能在catch中訪問）的概念。每個函數都是封閉的，外部訪問不到函數作用域中的變量。
function getName() {
var name = "LHH";
console.log(name); //"LHH"
}
function displayName() {
console.log(name); //報錯
}把代碼改成以下：
function getName() {
var name = "LHH";
function displayName() {
console.log(name);
}
return displayName;
}
var getLHH = getName();
getLHH() //"LHH"函數是一個閉包，外部就可以訪問函數中的變量
對於閉包有下面三個特性：
1.閉包可以訪問當前函數以外的變量
function getOuter(){
var date = '815';
function getDate(str){
console.log(str + date); //訪問外部的date
}
return getDate('今天是：'); //"今天是：815"
}
getOuter();getData是一個閉包，該函數執行時，會形成一個作用域A，A中並沒有定義變量data，但它能從父一級作用域中找到該變量的定義。
2.即使外部函數已經返回，閉包仍能訪問外部函數定義的變量
function getOuter(){
var date = '815';
function getDate(str){
console.log(str + date); //訪問外部的date
}
return getDate; //外部函數返回
}
var today = getOuter();
today('今天是：'); //"今天是：815"
today('明天不是：'); //"明天不是：815"3.閉包可以更新外部變量的值
function updateCount(){
var count = 0;
function getCount(val){
count = val;
console.log(count);
}
return getCount; //外部函數返回
}
var count = updateCount();
count(815); //815
count(816); //816作用域鏈
JavaScript中有一個執行環境（execution context）的概念，它定義了變量或函數有權訪問的其他數據，決定了他們各自的行爲。每個執行環境都有一個與之關聯的變量對象，環境中定義的所有變量和函數都保存在這個對象中。可以修改它的屬性，但不能引用它。
變量對象也是有父作用域的。當訪問一個變量時，解釋器會首先在當前作用域查找標識符，如果沒有找到，就去父作用域找，直到找到該變量的標識符或者不再存在父作用域鏈了，這就是作用域鏈。
作用域鏈和原型繼承有點類似：如果去查找一個普通對象的屬性時，在當前對象和其原型中都找不到時，會返回undefined，但查找的屬性在作用域中不存在的話就會拋出ReferenceError。
作用域頂端是全局對象。對於全局環境中的代碼，作用域中只包含一個元素：全局對象。所以，在全局環境中定義變量的時候，它們會被定義到全局對象中。當函數被調用的時候，作用域鏈就會包含多個作用域對象。
1.全局環境
看一個例子：
// my_script.js
"use strict";
var foo = 1;
var bar = 2;在全局環境中，創建了兩個簡單地變量。此時變量對象是全局對象：
執行上述代碼，my_script.js本身會形成一個執行環境，以及它所引用的變量對象。
2.無嵌套函數(Non-nested functions)
"use strict";
var foo = 1;
var bar = 2;
function myFunc() {
//-- define local-to-function variables
var a = 1;
var b = 2;
var foo = 3;
console.log("inside myFunc");
}
console.log("outside");
//-- and then, call it:
myFunc();當myFunc被定義的時候，myFunc的標識符（identifier）就被加到了當前的作用域對象中（在這裏就是全局對象），並且這個標識符所引用的是一個函數對象（function object）。函數對象中所包含的是函數的源代碼以及其他的屬性。內部屬性[[scope]]指向的就是當前的作用域對象。也就是指的就是函數的標識符被創建的時候，我們所能夠直接訪問的那個作用域對象（在這裏就是全局對象）。
myFune所引用的函數對象，其本身不僅僅含有函數的代碼，並且還含有指向其創建的時候的作用域對象。
當myFunc函數被調用的時候，一個新的作用域對象的被創建了。新的作用域對象中包含了myFunc函數所定義的的本地變量，以及其參數（arguments）。這個新的作用域對象的父作用域對象就是在運行myFunc時我們所能直接訪問的那個作用域對象（即全局對象）。
所以，當myFunc被執行的時候，對象之間的關係如下圖：
3.有嵌套的函數（Nested functions）
當函數返回沒有被引用的時候，就會被垃圾回收器回收。但是對於閉包（函數嵌套是形成閉包的一種形式），即使外部函數返回了，函數對象仍會引用它被創建時的作用域對象。
"use strict";
function createCounter(initial) {
var counter = initial;
function increment(value) {
counter += value;
}
function get() {
return counter;
}
return {
increment: increment,
get: get
};
}
var myCounter = createCounter(100);
console.log(myCounter.get()); // 返回 100
myCounter.increment(5);
console.log(myCounter.get()); // 返回 105當調用createCounter(100)時，對象之間的關係如下圖所示：
內嵌函數increment和get都有指向createCounter(100) scope的應用。如果createCounter(100)沒有任何返回值，那麼createCounter(100) scope不再被引用，於是就可以被垃圾回收。但是因爲createCounter(100)實際上是有返回值的，並且返回值被存儲在了myCounter中，所以對象之間的引用關係變成了如下圖所示：
即使createCounter(100)已經返回，但是其作用域仍在，並能且只能被內聯函數訪問。可以通過調用myCounter.increment() 或 myCounter.get()來直接訪問createCounter(100)的作用域。
當myCounter.increment() 或 myCounter.get()被調用時，新的作用域對象會被創建，並且該作用域對象的父作用域對象會是當前可以直接訪問的作用域對象。此時，引用關係如下：
當執行到return counter;時，在get()所在的作用域並沒有找到對應的標示符，就會沿着作用域鏈往上找，直到找到變量counter，然後返回該變量。
當單獨調用increment(5)時，參數value會存貯在當前的作用域對象。函數要訪問value，能馬上在當前作用域找到該變量。但是當函數要訪問counter時，並沒有找到，於是沿着作用域鏈向上查找，在createCounter(100)的作用域找到了對應的標示符，increment()就會修改counter的值。除此之外，沒有其他方式來修改這個變量。閉包的強大也在於此，能夠存貯私有數據。
相同的函數，不同的作用域
//myScript.js
"use strict";
function createCounter(initial) {
/* ... see the code from previous example ... */
}
//-- create counter objects
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);myCounter1 和 myCounter2創建之後，關係圖如下：
在上面的例子中，myCounter1.increment和myCounter2.increment的函數對象擁有着一樣的代碼以及一樣的屬性值（name，length等等），但是它們的[[scope]]指向的是不一樣的作用域對象。
這纔有了下面的結果：
var a, b;
a = myCounter1.get(); // a 等於 100
b = myCounter2.get(); // b 等於 200
myCounter1.increment(1);
myCounter1.increment(2);
myCounter2.increment(5);
a = myCounter1.get(); // a 等於 103
b = myCounter2.get(); // b 等於 205