- 1.变量的作用域
- 2.变量的生存周期
- 3.闭包更多作用
- 1.封装变量
- 2.延续局部变量寿命
- 4.闭包和面向对象设计
- 5.闭包和内存管理
1.变量的作用域
var func = function(){
var a = 1;
}
func();
console.log(a); //输出undefined
var a = 1;
fun1 = function(){
var b = 2;
fun2 = function(){
var c = 3;
console.log(b); //输出 2
console.log(a); //输出 1
}
fun2();
console.log(c); //输出undefined
}
fun1();
2.变量的生存周期
var func = function(){
var a = 1;
return function(){
a++;
console.log(a);
}
}
var f = func();
f(); // 输出1
f(); // 输出2
f(); // 输出3
f(); // 输出4
当退出函数后，局部变量a并没有消失，而是似乎一致在某个地方存活着。这是因为当执行var f = func();时,f返回了一个匿名函数的引用，它可以访问到func()被调用时产生的环境，而局部变量a一致处于这个环境里。既然局部变量所在的环境还能被外界，这个局部变量就有了不被销毁的理由。这里产生了一个闭包结构，局部变量的声明看起来被延续了。
既然f返回了一个匿名的函数引用，那么下面的也符合闭包
var func = (function(){
var a = 1;
return function(){
a++;
console.log(a);
}
})();
f(); // 输出1
f(); // 输出2
f(); // 输出3
f(); // 输出4
再次变种为引用对象的方式
var func = {
a :0,
call:function(){
this.a++;
console.log(this.a);
}
}
func.call(); //输出1
func.call(); //输出2
func.call(); //输出3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
var nodes = document.getElementsByTagName('div');
for(var i =0;i<nodes.length;i++){
nodes[i].onclick=function(){
alert(i);
}
}
</script>
</body>
</html>
测试这段代码就会发现，无论点击哪个div，最后弹出的结构都是5,。这是因为div节点onclick事件是被异步出发的，当事件出发的时候，for循环早已结束，此时变量i的值已经是5，所以在div的onclick事件函数中顺着作用域链从内到外查找变量i时，查找到的值总是5。
解决方法是在闭包作用的帮助下，把每次循环的i值都封装起来。(就是把每个点击事件都独立放在内存里面。)
var nodes = document.getElementsByTagName('div');
for(var i =0;i<nodes.length;i++){
(function(i){
nodes[i].onclick=function(){
alert(i);
}
})(i);
}
3.闭包更多作用
1.封装变量
闭包可以帮组我们封装私有变量”
var mult = function(){
var a = 1;
for(var i =0;i <arguments.length;i++){
a = a*arguments[i];
}
return a;
}
console.log(mult(1,2,5));
mult函数接受一些number类型的函数，并返回这些参数的乘积。现在我们觉得对于这些那些参数来说，每次都进行计算是一种浪费，我们可以加入缓存机制来提高这个函数的性能。
var cache={};
var mult = function(){
var args = Array.prototype.join.call(arguments,','); //将参数对象变成一个字符串 args 1,2,3
if(cache[args]){
console.log('执行缓存');
return cache[args];
}
var a = 1;
for(var i=0;i<arguments.length;i++){
a = a*arguments[i];
}
return cache[args] = a;
}
console.log(mult(1,2,3)); //进行计算
console.log(mult(1,2,3)); //执行缓存，不用计算
继续封装减少页面全局变量
var mult = (function(){
var cache={}; //私有变量
return function(){
var args = Array.prototype.join.call(arguments,',');
if(cache[args]){
return cache[args];
}
var a = 1;
for(var i=0;i<arguments.length;i++){
a = a*arguments[i];
}
return cache[args] = a;
}
})()
console.log(mult(1,2,3)); //进行计算
console.log(mult(1,2,3)); //执行缓存，不用计算
提炼代码，独立模块
var mult = (function(){
var cache={}; //私有变量
var cala = function(){
var a = 1;
for(var i=0;i<arguments.length;i++){
a = a*arguments[i];
}
return a;
}
return function(){
var args = Array.prototype.join.call(arguments,',');
if(cache[args]){
return cache[args];
}
return cache[args] = cala.apply(null,arguments);
}
})();
console.log(mult(1,2,3)); //进行计算
console.log(mult(1,2,3)); //执行缓存，不用计算
2.延续局部变量的寿命
var report = function(src){
var img = new Image();
img.src = src;
}
利用闭包来延续img的使用
var report = (function(){
var imgs = []; //img就留在了内存里面
return function(src){
var img = new Image();
imgs.push(img);
img.src = src;
}
})();
4.闭包和面向对象
闭包:
var extent = function(){
var value =0;
return {
call:function(){
value++;
console.log(value);
}
}
}
var extent = extent();
extent.call(); //输出1
extent.call(); //输出2
extent.call(); //输出3
如果换成面向对象的写法就是
var extent = {
value :0,
call:function(){
this.value++;
console.log(this.value);
}
}
extent.call(); //输出1
extent.call(); //输出2
extent.call(); //输出3
5.闭包和内存管理
闭包是一个非常强大的特性，但人民对其他诸多误解，一种耸人听闻的说法就是闭包会造成内存泄漏。如果在将来需要回收这些变量，我们可以手动吧这些变量设置为null。