理解js中的闭包以及应用场景

在js中的学习中,总会遇到一个陌生又晦涩,然后还是陌生的词汇,那就是闭包。

首先,什么是闭包?
其次,闭包的作用是什么呢?
最后,什么时候用得到闭包呢?

接下来,我们就来回答这三个问题。

1.什么是闭包?

首先,闭包的概念:

闭包就是能够读取其他函数内部变量的函数。可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

看完这段话,是不是觉得???
那么,来看一个例子:
想要实现一个函数,每次调用的时候,函数内的变量实现加1。

function fn(){
    var a = 10; 
    a++;
    console.log(a);

}
var f = fn();  
f();   
f(); 
f(); 
f();

这样,每次调用fn,得到的a都是11 。这是因为每次调用的时候,都会重新声明a。若是不想每次获取到都是同一个值,每次就不能重新声明变量,这样,我们就可以将声明放在函数的外面,即:

var a = 10; 
function fn(){
    a++;
    console.log(a);

}
var f = fn();  
f();   
f(); 
f(); 
f();

但是,这样的话,a就变成了全局变量,会造成全局变量命名空间的污染。所以,这个时候,我们需要闭包。

function addOne(){
    var a = 10; 
// a是局部变量,使用闭包后,a进化成addOne或者fn的私有(自由)变量,在函数外面可以操作a的值,每次进行加1
    function fn(){
        a++;
        console.log(a);
    }
    return fn; 
}
var f = addOne();  // addOne只执行一次,var a = 10只执行一次,只定义了一次
f(); // 11  每次执行fn,a都会加1
f(); // 12
f(); // 13
f(); // 14

现在是不是觉得对闭包有点感觉了呢?
在阐述闭包作用之前,值得一提的是闭包的原理。那么,我们来说一下闭包的原理:

1.计算机原理:垃圾回收机制

计算机的垃圾回收机制:将要删除的信息暂存,下次可以再次使用,而不是立即删除
在闭包中的体现:利用作用域的嵌套,临时保存即将删除的变量,触发计算机的垃圾回收机制

2.函数的执行原理:
两个概念:定义作用域,执行作用域

顾名思义,定义作用域就是函数定义的作用域,执行作用域就是函数在执行时所在的作用域。
在js中规定:函数在执行时,可以读取自身定义作用域中的变量

2.闭包的作用是?

(1)局部变量可以在全局空间内操作

(2)将可能被删除或覆盖的局部变量,临时保存,不被删除或覆盖

解释完闭包的概念、原理、作用,接下来就是我们最关心的,什么时候使用闭包呢?

3.闭包的应用场景?

场景1:for循环内部函数需要获取计数器

问题阐述:for循环之中的i变量会因为for的循环次数被覆盖,所以在for循环内部存在函数时,而且这个函数内会调用变量i,这种情况下就需要用到闭包。
<body>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
    </ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li");
for(var i=0;i<ali.length;i++){
    (function(i){ 
        ali[i].onclick = function(){ 
            console.log(i); 
        }
    })(i);
}
</script>
解释:for循环执行很快,将每次的i的保存到匿名函数的实参中,通过匿名函数自动执行传给形参,在匿名函数中可以获取到i,点击事件函数的定义作用域也是执行作用域,所以在事件执行函数中可以获取外层匿名函数的形参i,这样每次就可以在事件函数中获取到for循环的计数器i。
友情提示:这里let也可以实现,利用了let的块级作用域可以形成闭包的原理,且let方式更简单。
<body>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
    </ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li");
for(let i=0;i<ali.length;i++){
    ali[i].onclick = function(){ 
        console.log(i); 
    }
}
</script>

场景2:异步的回调函数中要读取外部实时被修改的变量

smallFire(){
        for(var i=0;i<num;i++){
            let div = document.createElement("div");
            move(div,{
                left:t.x,
                top:t.y
            },function(){
                // 因为声明小烟花时使用的let,会触发块级作用域,每次循环执行时,move及自身的回调函数会随之开启,都处在对应的块级作用域内,所以能够拿到每个块级作用域的div,可以删除
                div.remove();
            })  
        }
    }

解释:因为循环会立即执行,每次循环创建的小烟花,需要单独保存(或单独使用(运动和删除)),所以为了防止循环创建的元素被覆盖,使用let声明变量,触发块级作用域,保存变量,方便将来操作。
下面是一个封装好的缓冲运动的函数:

function move(ele,data,cb){
    clearInterval(ele.t);
    ele.t = setInterval(function(){
        var onoff = true;
        for(var i in data){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (data[i] - iNow)/10;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow != data[i]){
                onoff = false;
            }
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            cb && cb();
        }
    },30)
}

场景3:可以给无法处理函数参数的函数,处理参数

需求:每隔3秒钟,打印一个hello
问题1:这里say函数加了括号,就立即执行了,不再等3秒了。执行之后,函数的返回值是undefined,结果setTimeout的第一个参数就是undefined。
setTimeout(say("hello"),3000);  
function say(a){
    console.log(a);
}
问题2:所以say不能加括号,那么say就没法传参了
setTimeout(say,3000);  
function say(a){
    console.log(a);
}
解决:所以,say必须得加括号且传参。这样,延迟器的第一个必须是一个函数,所以在say函数中,返回一个函数即可,在函数中执行想要的操作。
setTimeout(say("你好"),3000);
function say(a){
    return function(){
        console.log(a);
    }
}

这里,就利用到了函数的执行作用域可以使用函数的定义作用域里面的变量这个原理。因为内层函数的定义作用域是say(a){这里即是内层函数的定义作用域,可以拿到这里定义的所有的变量,包括say函数的形参a}。
看完应用场景之后,是不是觉得闭包还真有点意思。然而,世上没有十全十美的事物,闭包也存在其缺点:
内存消耗很大,不能滥用;闭包会在父函数外部,改变父函数内部变量的值。
是不是觉得意犹未尽?想挖掘更多关于闭包的特点呢?期待大家的分享
今天的分享到此结束,如果文中有什么错误或者不足之处,欢迎大家指正...

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容