0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

Javascript笔记 - Javascript中的闭包

Javascript中的闭包:

由于Javascript中的函数是对象,对象的属性是集合,而属性的值又可以是对象,所以可以再函数内定义一个函数。如果在函数内部声明函数,然后在函数的外部调用,这个过程就产生了一个闭包。

1、闭包的特性:

下面来看一个例子说明闭包的特性:

var outter = [];
function processor(){
for(var i=0; i<4; i++){
var temp = {};
temp.id = i;
temp.invoke = function(){
alert(i);
};
outter.push(temp);
}
}
processor(); //执行到这里并不会输出
outter[0].invoke(); //输出4
outter[1].invoke(); //输出4
outter[2].invoke(); //输出4
outter[3].invoke(); //输出4

在每次循环的时候,temp.invoke并不会被执行,只是在这里构造了一个函数而已,循环退出时,再用外部的数组outter的元素去访问invoke函数,这是,i已经是4了,所以所有的函数调用都输出为4。

为了在循环中可以执行invoke函数,可以在里面声明一个匿名函数并立刻执行它:

var outter = [];
function processor(){
for(var i=0; i<4; i++){
var temp = {};
temp.id = i;
temp.invoke = function(no){
return function(){
alert(no);
}
}(i);
outter.push(temp);
}
}
processor(); //依次输出0,1,2,3

可以看出,闭包允许你引用存在于外部函数中的变量,但是,并不是引用该变量创建时的值,而是使用该外部函数中该外部变量最后的值。

2、闭包的作用:

2.1、使用匿名函数自动执行,减少全局对象属性

如果变量不加上var就会默认成为全局变量,即添加到全局对象的属性上去。如果别的函数误用了这些变量,造成全局对象过于庞大,影响了访问速度(从原型链上遍历获取变量的时间开销增加)。所以,爱实际情况中,如果有些函数只需要执行一次,如一些初始化函数,那么我们可以使用闭包让他自动执行,由于外部无法引用它内部的变量,所以在执行完后很快就会被释放,从而不会影响到全局变量:

var target = {
image :["01","02","03"]
}
var screenBg = [];
//使用target初始化screenBg的函数
(function(tg){
for(var i=0; i<tg.image.length; i++){
screenBg[i] = tg.image[i];
}
})(target);

alert(screenBg.join(","));

2.2、使用闭包创建缓存:

2.3、使用闭包实现封装:

下面是使用闭包特性的一个封装例子:

var user = function(){
var name = "default"; //局部变量外部无法访问
return{
setName : function(username){
name = username
},
getName : function(){
return name;
}
}
}();
alert(user.name); //无法直接访问,输出为undefined
alert(user.getName()); //输出为default

使用闭包,可以模拟实现面向对象中的对象。下面就改造上面的例子,实现一个类:

var User = function(){
var name = "default"; //局部变量外部无法访问
return{
setName : function(username){
name = username
},
getName : function(){
return name;
}
}
};
//创建一个User对象
var user1 = new User();
user1.setName("arthinking");
alert(user1.name); //无法直接访问,输出为undefined
alert(user1.getName()); //输出为arthinking

在函数式编程中,会大量用到闭包。

3、使用闭包需要注意的问题:

3.1、内存泄露:

类似于Java,Javascript中的解释器提供了垃圾回收机制,一般是通过引用计数的形式。在闭包中,有些局部变量可能在将来的某些时刻要被使用,所以来及回收器不会处理这些被外部引用的局部变量。如果出现了引用循环,即,对象A引用了对象B,B引用了C,C又引用了A,这样引用计数就不会为0了,从而造成了内存泄露。

3.2、上下文的引用:

Javascript中的this指针表示的是调用对象的引用。在闭包中比较容易误用this指针。下面就举个例子:

$(function(){
var con = $("#panel");
this.id = "content";
con.click(function(){
alert(this.id);//panel
});
});

这里click中的函数this.id由于该函数是在click事件中的,所以this表示的是触发该click事件的组件,所以不会输出上面定义的id,而是输出该组件的id,如果想要在这个函数中输入上面的id可以这样处理:

$(function(){
var con = $("#panel");
this.id = "content";
var self = this;
con.click(function(){
alert(self.id);//content
});
});

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法