JavaScript闭包
四、实例
下面我们来看几个使用闭包技术的具体例子：
1.数据封装
在Java中，成员变量往往被设置为私有，提供对应的public权限的getXxx()和setXxx()方法与外界交互。而JavaScript中没有类的概念，也没有权限的概念，默认情况下对象的属性是可以直接读写的。
①直接读写对象属性
|
var person = {personName:"Tom"}; console.log("person name="+person.personName); person.personName = "Jerry"; console.log("person name="+person.personName); |
|
执行结果： person name=Tom 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 |
本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。
