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)了解更多。


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)