目前为止我们都专注在解释辞法范围，以及他会对程序中的变量与使用产生什麽影响，本章节会将角度转移到closure，回顾一下Limiting Scope Exposure ?中所提到的POLE原则，我们应该使用块状作用域（或函式作用域）来减少变量的泄露，这有助於程序的安全性与可维护性并可以避免命名冲突等等的错误，而closure就是建立在这个观念之上，可以将变量封装不让他们泄露到外部／全域中，并且保留内部函式的访问权限，函式会通过closure记住引用的作用域变量。
我们在Limiting Scope Exposure ?提到的范例中（factorial(...)），我们尝试了在自身作用域中访问了外部的callback function这就是closure，closure是对於编成发明中重要的特徵之一，他是主要编成范例的基础，它包含function programming(FP),module,class-oriented design
closure是function的行为，object与class都不具有closure只有function才有。
// outer/global scope: RED(1)
function lookupStudent(studentID) {
// function scope: BLUE(2)
var students = [
{ id: 14, name: "Kyle" },
{ id: 73, name: "Suzy" },
{ id: 112, name: "Frank" },
{ id: 6, name: "Sarah" }
];
return function greetStudent(greeting){
// function scope: GREEN(3)
var student = students.find(
student => student.id == studentID
);
return `${ greeting }, ${ student.name }!`;
};
}
var chosenStudents = [
lookupStudent(6),
lookupStudent(112)
];
// accessing the function's name:
chosenStudents[0].name; // greetStudent
chosenStudents[0]("Hello"); // Hello, Sarah!
chosenStudents[1]("Howdy"); // Howdy, Frank!
上面的程序中，在最外层定义了一个lookupStudent(...)并且在他的内部return了greetStudent(...);呼叫了lookupStudent(...)两次并将他的结果都存放在chosenSrudents阵列中。
通过使用.name发现其实lookupStudent(...)返回的是一个greetStudents(...)的实例，正常来说对於一个function的呼叫结束後，会将此funciton中的内部的变量都丢弃（garbage collected）;但是对於这里来说有些不同，greetStudent他内部中有使用到了外部（lookupStudent(...)）的变量（studentID,students），对於这个内部函式引用到外部函式变量的行为就称为closure。
closure允许greetStudent(...)继续访问外部函式作用域的变量，尽管他已经被完成呼叫（garbage collected）students和studentID的实例不会进到GC'd而是被保留在记忆体中，所以在greetStudent(...)在调用这些变量实体的时候他们都仍然存在，所以说如果JS中没有closure那们在lookupStudet(...)执行完成後会立即会立即清除他的作用域并将studentID与students收近GC，就因为这个特性才能让我们在呼叫choseStudents[1]("Hello")的时候不会因为studentID与students不存在而导致ReferenceError。
function adder(num1) {
return function addTo(num2){
return num1 + num2;
};
}
var add10To = adder(10);
var add42To = adder(42);
add10To(15); // 25
add42To(9); // 51
内部的addTo(...) closing 外部(adder(...))的num1，所以在adder(...)执行结束後 访问得到num1的值，所以add10To会保留着num1 = 10;让add10To(15);可以调用到存在在记忆体中的num1 = 10;，让结果可以输出10+15 = 25。
对於每一个adder(...)来说他内部都各自定义了自己内部的addTo(...)，因此每一个都是各自独立的closure，所以上面程序中的add10To(..)和add42To(..)他们其实都有各自独立的closure，即使closure是基於编译时期处理的lexcial scope但是他仍被视为函数实例运行的特徵。
很多人认为closure的这个可以读取到保留变量的行为，是读取到这个保留值的参照，但这其实是错误的，因为closure的这个行为是是确实是保留对这个变量的访问，除此之外不限於只读取这个值，还可以对这个值进行操作，对於closure的function我们可以任意的使用这个变量(读/写)并且在整个函数中都可以使用，这就是closure强大的地方。
function makeCounter() {
var count = 0;
return function getCurrent() {
count = count + 1;
return count;
};
}
var hits = makeCounter();
hits(); // 1
hits(); // 2
hits(); // 3
const closed over 内部的getCurrent(...)这样他可以被保存在记忆体中不会被GC，所以当调用hits的时候会不断返回更新後的count值（递加）。
虽然closure通常都来自於函式，但是实际上是不一定需要的，只要外部作用域中有一个内部函式就可以。
var hits;
{ // an outer scope (but not a function)
let count = 0;
hits = function getCurrent(){
count = count + 1;
return count;
};
}
hits(); // 1
hits(); // 2
hits(); // 3
在一个块状作用域中宣告一个function，这样就可以形成一个closure，但是由於FiB的关系，所以使用function expression而不是function declaration。
对於closure还有一个令人误会的地方，closure他保存的是变量而不是变数。
var studentName = "Frank";
var greeting = function hello() {
// we are closing over `studentName`,
// not "Frank"
console.log(
`Hello, ${ studentName }!`
);
}
studentName = "Suzy";
greeting(); // Hello, Suzy!
上面的程序中，很多人会以为closure保存的事studentName的值（Frank），但实际是他保留的是studentName这个变量，所以当後面重新assignment给studentName的时候值就会发生变化，除了这个之外还有一个经典的错误，for loop。
var keeps = [];
for (var i = 0; i < 3; i++) {
keeps[i] = function keepI(){
// closure over `i`
return i;
};
}
keeps[0](); // 3 -- WHY!?
keeps[1](); // 3
keeps[2](); // 3
你可能会认为keeps[0]();应该要return 0因为他是在i = 0的时候赋予给他的，但是这要是不对的，记住closure保存的是变量而不是变量里面的值，由於for loop的结构会让我们误以为他的每次迭代都会宣告一个新的i，但由於i是由var宣告的所以整个回圈中都只会有一个var（参考The (Not So) Secret Lifecycle of Variables），虽然三个keeps(...)都有各自的closures，但是本质上他们共享一个i，所以当回圈结束时三个function才都return 3，所以每一个变量都只能存取一个值，所以我们可以尝试在每个回圈中都新增一个各自的变量。
var keeps = [];
for (var i = 0; i < 3; i++) {
// new `j` created each iteration, which gets
// a copy of the value of `i` at this moment
let j = i;
// the `i` here isn't being closed over, so
// it's fine to immediately use its current
// value in each loop iteration
keeps[i] = function keepEachJ(){
// close over `j`, not `i`!
return j;
};
}
keeps[0](); // 0
keeps[1](); // 1
keeps[2](); // 2
在每个回圈中都宣告一个属於自己的变量(let宣告)，然後赋予它当前i的值，因为j是定义在个回圈中的变量所以所以不会被重新赋值，closure的对象就从i变为各自定义的j，所以输出的值就会是预期的。
如果我们在回圈中使用非同步的行为（setTimeout(...),keepEachJ(...)...）也会出现这个情况，在The (Not So) Secret Lifecycle of Variables中提到如果在loop中使用let宣告，他会在每一次的迭代中都创建一个新的变量，这正是我们希望它发生的。
var keeps = [];
for (let i = 0; i < 3; i++) {
// the `let i` gives us a new `i` for
// each iteration, automatically!
keeps[i] = function keepEachI(){
return i;
};
}
keeps[0](); // 0
keeps[1](); // 1
keeps[2](); // 2
如果我们在操作function的时候，我们需要产生一个closure，当我们确实产生了一个closure後他将需要的变量保存下来，但我们却没有去访问过这麽变数，那麽这个closure就不会存在。
function lookupStudent(studentID) {
return function nobody(){
var msg = "Nobody's here yet.";
console.log(msg);
};
}
var student = lookupStudent(112);
student(); // Nobody's here yet.
虽然closure将studentID保存下来，但是在内部的nodody(...)却只使用自身宣告的变数msg而没有用到外部的studentID，这样会让JS引擎知道在lookupStudent(...)执行完之後没有东西需要使用到studentID，便会将它从记忆体中清除。
如果没有去呼叫内部的函式，那麽我们也无法观测到closure的存在。
function greetStudent(studentName) {
return function greeting(){
console.log(
`Hello, ${ studentName }!`
);
};
}
greetStudent("Kyle");
// nothing else happens
外部的function他确实被呼叫并且有return一个内部的function，这虽然是一个会产生closure的行为，但是由於内部的function并没有被呼叫所以就算以技术上来说JS确实为她创造了一个closure，但是无法观察也没以意义。
Closure is observed when a function uses variable(s) from outer scope(s) even while running in a scope where those variable(s) wouldn't be accessible.
对於closure定义而言有一些关键的部分：
由於closure的本质与function息息相关，所以只要仍有对该function的引用，则closure则会持续存在，换句话说如果有10个function都closure同一个变量，随着时间流逝其余九个都不在使用这个变量，就算只剩下一个那麽这个closure依然会继续存在，等到最後一个funciton都不在使用这个变量，那麽这个closure就会消失。
如果没有这个机制的话，若在记忆体中无论是否有用到都不断保存着我们之前所使用过的变量，那麽总有一天会导致记忆体内存不足。
对於closure来说，他是保留引用的外部变量还是将整个作用域以及所有变量？以技术上来说closure保存的是变量而不是作用域，但实际的情况会更为复杂。
function manageStudentGrades(studentRecords) {
var grades = studentRecords.map(getGrade);
return addGrade;
// ************************
function getGrade(record){
return record.grade;
}
function sortAndTrimGradesList() {
// sort by grades, descending
grades.sort(function desc(g1,g2){
return g2 - g1;
});
// only keep the top 10 grades
grades = grades.slice(0,10);
}
function addGrade(newGrade) {
grades.push(newGrade);
sortAndTrimGradesList();
return grades;
}
}
var addNextGrade = manageStudentGrades([
{ id: 14, name: "Kyle", grade: 86 },
{ id: 73, name: "Suzy", grade: 87 },
{ id: 112, name: "Frank", grade: 75 },
// ..many more records..
{ id: 6, name: "Sarah", grade: 91 }
]);
addNextGrade(81);
addNextGrade(68);
// [ .., .., ... ]
上面的程序中grades通过closure保留在addGrade(...)之中，所以在每次呼叫addNextGrade(...)时，都可以再次访问到grades并对他从新排列，但是记住，这个closure是对於grades这个变量而不是里面的数值。
除了grades被closure之外，由於addGrade(...)中呼叫的sortAndTrimGradesList(...)，这代表就算manageStudentGrades(...)已经结束了但sortAndTrimGradesList(...)还是被closure给保留了下来以便addGrade(...)可以持续调用，
根据closure的定义，由於内部函数没有使用到getGrade(...)与studentRecords所以不会对他们进行closure，在manageStudentGrades(...)结束後他们就会被清除。
但是凡事都有例外
function storeStudentInfo(id,name,grade) {
return function getInfo(whichValue){
// warning:
// using `eval(..)` is a bad idea!
var val = eval(whichValue);
return val;
};
}
var info = storeStudentInfo(73,"Suzy",87);
info("name"); // Suzy
info("grade"); // 87
上面的程序码中，我们使用了eval做了一些小动作，就算在後面的info(...)中没有使用到所有的变量，但是JS依然将所有的变量都保存起来。
在与许多现在的JS引擎中，他们都对於删除从未明确引用的closure范围中变量这件事不断的进行优化，但是正如我们上面所使用的方法(eval)，在某些情况下JS并不会如预期的那样操作，因为会有这些意外事件发生，所以作者建议不应该随便高估他的适用性，如果有一个较大的值被closure给保留在记忆体中但他却是不被需要的(特殊状况)，这样会对整个程序产生记忆体不够的威胁，所以作者认为手动丢弃这些大量且不被需要的值是比较安全的。
function manageStudentGrades(studentRecords) {
var grades = studentRecords.map(getGrade);
// unset `studentRecords` to prevent unwanted
// memory retention in the closure
studentRecords = null;
return addGrade;
// ..
}
虽然在我们分析closure的时候，我们知道因为studentRecords没有被调用到，所以JS自动的将它清除（不产生closure），但是作者希望如果开发者知道这个变量不会再被使用，那麽可以手动的将它的值清除以降低错误的发生，虽然技术上来说getGrade(...)也是不会再被使用到的，如果这个function也会消耗大量内存那麽也建议手动将它清除，但是在上面的例子中getGrade(...)并不需要做这样的处理。
所以了解closure在程序中出现的位置以及他保存了哪些变量是很重要的，应该仔细管理这些保存的值以便让他使用最低限度的需求而不浪费内存。
若我们不使用closure的情况下建立一个按钮，在点击他後透过AJAX发送一些数据。
var APIendpoints = {
studentIDs:
"https://some.api/register-students",
// ..
};
var data = {
studentIDs: [ 14, 73, 112, 6 ],
// ..
};
function makeRequest(evt) {
var btn = evt.target;
var recordKind = btn.dataset.kind;
ajax(
APIendpoints[recordKind],
data[recordKind]
);
}
// <button data-kind="studentIDs">
// Register Students
// </button>
btn.addEventListener("click",makeRequest);
makeRequest(...)接收一个来自clich事件的evt物件，他需要从目标按钮中检索data-kind attribute并使用用这个值去决定AJAX需要请求哪些数据，虽然这麽做事可以的，但是由於每一次都需要去读取DOM的attrubute，所以会导致效率低下，所以我们可以试着使用closure的方式改写。
var APIendpoints = {
studentIDs:
"https://some.api/register-students",
// ..
};
var data = {
studentIDs: [ 14, 73, 112, 6 ],
// ..
};
function setupButtonHandler(btn) {
var recordKind = btn.dataset.kind;
btn.addEventListener(
"click",
function makeRequest(evt){
ajax(
APIendpoints[recordKind],
data[recordKind]
);
}
);
}
// <button data-kind="studentIDs">
// Register Students
// </button>
setupButtonHandler(btn);
在呼叫setupButtonHandler的时候就检索了data-kind attraubute并将他赋予给recordKind，然後由内部的makeRequest(...)使用其值来发送将对应的Request，通过closure我们将recordKind储存让内部的makeRequest(...)可以随时使用它，我们也可以将request的值利用closure保存下来。
function setupButtonHandler(btn) {
var recordKind = btn.dataset.kind;
var requestURL = APIendpoints[recordKind];
var requestData = data[recordKind];
btn.addEventListener(
"click",
function makeRequest(evt){
ajax(requestURL,requestData);
}
);
}
将requestURL与requestData透过closure保存起来，这样更容易理解而且效率也更好。
本章节中介绍了什麽事closure，他的定义与他所带来的好处。
Closure的精神：
Closure的好处：
参考文献：
You Don't Know JavaScript -2nd
一样先上图 今天我们要处理的是Sign，在文件中或在看到产出规则，可以看到Hash为永丰金提供， N...
前言 待过军事训练役的人肯定有着假日还要忙着回报休假状况,而回报由於还是在line里面,要马就是要麻...
根据 程序语言社群 TIOBE 2021年8月发表的热门程序语言排行榜中，Python 在众多程序语...
在开始实作画面之前，我们先来了解一下常见的 UI Framework，并了解他们的设计方式，以便後续...
昨天练习了Cross site scripting 今天来讲讲由Google提供来协助开发人员 一个...