JavaScript闭包
一、闭包的作用
JavaScript 中闭包是一个很难理解的概念，也是衡量 JavaScript 功力的重要
标准。JavaScript 语法中的独特特性也通过闭包淋漓尽致的体现了出来。
在学习闭包的过程中，很多同学最大的困惑其实并不是语法本身，而是看 着闭包的语法不知道它是干什么用的。难道闭包仅仅是一项供奉在象牙塔中供学 术研究者膜拜的高冷课题吗？
其实并不是这样，闭包的本质是将一个函数中某些变量的作用域延伸到函 数外部的技术。所有需要突破作用域链，在函数外部访问函数内部变量值的场合
都可以使用闭包。具体的例子我们看过语法后再讲述。
二、作用域链
1. 作用域
在 JavaScript 中，变量也可以分为全局变量和局部变量。
全局变量
直接在 script 标签内声明的变量就是全局变量
var global = 'Hello I am Global';
console.log("global="+global); // global=Hello I am Global局部变量
在函数中声明的变量是局部变量
function myMethod() {
var localVariable = "Hello I am Local";
console.log("localVariable=" + localVariable); // ：localVariable=Hello I am Local
}
myMethod();但是在函数中声明变量时如果没有指定 var 关键字那么也是全局变量
function mySpecialMethod() {
specialVariable = "Hello I am Specail";
}
mySpecialMethod();
console.log("specialVariable=" + specialVariable); // specialVariable=Hello I am Specail变量可见性
函数中可以使用全局变量，但函数外不能使用局部变量。
var global = "Hello I am Global";
console.log("global="+global); // global=Hello I am Global
function accessGlobal() {
console.log("access global in function="+global); // access global in function=Hello I am Global
}
accessGlobal();function myMethod() {
var localVariable = "Hello I am Local";
console.log("localVariable=" + localVariable); // localVariable=Hello I am Local
}
myMethod();
console.log("access localVariable in global=" + localVariable); // Uncaught ReferenceError: localVariable is not defined作用域链
作为一门奇葩语言，JavaScript 允许在函数内部再声明函数。以下为了称呼
方便，我们把包含函数声明的函数称为父函数，把在函数内声明的函数称为子函
数。子函数中当然可以再继续声明孙子辈的函数，并且“子子孙孙无穷匮也”。
//父函数
function father() {
// 子函数
function son() {
//...
function grandSon() {
//...
}
}
}从作用域的角度来说，子函数可以访问父函数中声明的变量以及祖先函数
中的变量，但父函数不可以访问子函数中声明的变量，这就是作用域链。
三、突破作用域链
1. 未使用闭包时
默认情况下上一级作用域(以下称父作用域)中不能访问下一级作用域(以下
称子作用域)中声明的变量，这一点前面已有例证。
2.使用闭包突破作用域链
如果确实需要在父作用域中访问子作用域中声明的变量，可以通过下面这
样的方法：
function variableFunction() {
var variableForGloabl = "需要在上一级作用域中使用的变量";
//声明一个子函数，这个函数是可以访问到 variableForGloabl 的
function getVariable() {
return variableForGloabl;
}
//将子函数的引用返回，这一点很关键
return getVariable;
}
//获取 getVariable()函数的引用
var funRef = variableFunction();
//调用有权访问局部变量的 getVariable()函数获取数据
var data = funRef();
console.log("data=" + data);
//可以多次调用获取
data = funRef();
console.log("data=" + data);执行结果：
data=需要在上一级作用域中使用的变量
data=需要在上一级作用域中使用的变量
3.闭包
其实上例中有权访问局部变量的 getVariable()函数就是闭包。它所起的作用
是将局部变量的作用域延伸到了全局范围——当然也可以说是从子作用域延伸
到了父作用域。
这里有几个问题需要说明：
返回函数的引用: 实现闭包的过程中返回函数的引用是非常关键的一步，如果不是返回函数
的引用就与改变作用域范围无关了。因为如果不返回函数的引用则可能直接返回
变量值本身或闭包函数的执行结果，这样一来局部变量的作用域并不会被改变，
我们仅仅是将它的值返回了，父函数执行完成后，局部变量就随之被垃圾回收机
制释放掉了，对原本的作用域没有任何影响。- 缓存效果: 局部变量被闭包函数返回后，即使父函数执行完毕，局部变量仍然会驻留
在内存中，这是闭包技术中的一个非常鲜明的特点。
//声明包含闭包的函数 keepVariable()
function keepVariable() {
// number 是要保持的数据
var number = 1;
// 打印初始值
console.log("init number=" + number);
// 返回闭包函数
return function () {
// 由于闭包函数的引用被返回给了上一级作用域，随时会被调用执行，所以 number 要始终保持在内存中，直到父作用域也被释放
number++;
console.log("number=" + number);
};
}
var closure = keepVariable(); // init number=1
closure(); // number = 2
closure(); // number=3四、实例
下面我们来看几个使用闭包技术的具体例子：
1.数据封装
在 Java 中，成员变量往往被设置为私有，提供对应的 public 权限的 getXxx()
和 setXxx()方法与外界交互。而 JavaScript 中没有类的概念，也没有权限的概念，
默认情况下对象的属性是可以直接读写的。
①直接读写对象属性
var person = {personName:"Tom"};
console.log("person name="+person.personName); // person name=Tom
person.personName = "Jerry";
console.log("person name="+person.personName); // person name=Jerry②封装数据
在 JavaScript 中，我们可以借助作用域链封装数据，借助闭包提供 getXxx()
和 setXxx()方法。
function Person() {
var personName = "init-value";
return {
getPersonName: function () {
return personName;
},
setPersonName: function (perName) {
personName = perName;
}
};
}
var personObj = Person();
personObj.setPersonName("Tom");
console.log("Person's name=" + personObj.getPersonName()); // Person's name=Tom看到这里可能大家会有疑问：这里返回的是一个对象并不是子函数啊？其
实闭包的“官方解释”中并没有规定闭包必须是一个函数，所有封装局部变量并
将作用域延伸到上一级都可以叫闭包。
2.数据缓存
在较为复杂的 JavaScript 应用中，有些数据的生成和获取比较耗时。那如果
每次用到数据都重新获取显示是效率十分低下的。对于获取不易的数据，将其缓
存起来往往是一个提升性能的重要手段。
function cacheInit() {
//缓存数据的容器对象
var cache = {};
//闭包方法
return function () {
//首先尝试从缓存中读取数据
if ('dataCached' in cache) {
console.log("--->读取缓存");
//如果数据已在缓存中则直接返回
return cache['dataCached'];
}
console.log("--->读取缓存失败，下面主动生成数据");
//执行一个非常耗时的创建数据的函数，返回数据
function createData() {
console.log("--->生成数据");
dataCached = "Heavy Data";
//将数据保存到缓存中
console.log("--->将数据保存到缓存中");
cache['dataCached'] = dataCached;
return dataCached;
}
//返回数据
return createData();
};
}
var getData = cacheInit();
var heavyData = getData();
console.log("第一次获取数据：" + heavyData);
heavyData = getData();
console.log("第二次获取数据：" + heavyData);执行结果：
--->读取缓存失败，下面主动生成数据
--->生成数据
--->将数据保存到缓存中
第一次获取数据：Heavy Data
--->读取缓存
第二次获取数据：Heavy Data