js之闭包

前言:好久没写过东西了,今天突发奇想把自己之前学习中自己对于js理解以及做的笔记整理一下分享出来,同大家一起学习进步,如有理解不到位的地方欢迎拍砖,科科_

米福镇楼
米福镇楼

其实每个人对闭包理解的侧重点多少有点差异,有些人侧重在词法作用域问题,有些人侧重在变量保存问题,整体上都大同小异,这里简单说一下我对闭包的理解,希望能对你有一些启发。

对闭包的理解基本可以分这几个点来思考:

  • 什么是闭包
  • 闭包的基本形式
  • 闭包的作用是什么

一、什么是闭包

闭包就是把一块区域封装成一块独立的空间,从而内部的变量不受外部的污染

我们都知道在js中,函数内部的局部变量遵从变量销毁机制(回收机制),即:一个函数执行完毕之后,当再次调用该函数时,其内部的变量会被重新赋值,而不会保存上次函数执行后变量的值 举个栗子:

function a(){
    var b = 0;
    console.log(++b);
}
a(); // 1
a(); // 1  第二次调用a()结果还是1

第二次调用a()结果还是1,说明b被重新赋值了,没有保留上次执行时的结果

也遵从作用域链的原则,即:函数内的局部变量如果没有在所在作用域内找到变量的值,便会向其父级的作用域寻找变量的值(这里的作用域指词法作用域)。再举个栗子:

function a() {
    var b = 1
    function c(){
        console.log(b);
     }
     c();
}
a(); //  1   

在ES6之前js中没有块级作用域的概念,所以一个function代表一个作用域,当函数c执行时在其内部没有找到b时,变向其上级作用域a()寻找。

闭包从字面意思上来说就是把一个区域封存起来,形成一个密封的环境,那么既然是一个密封的环境,那么它之内的局部变量就是独立的,也就是说闭包存在的目的是让函数不再遵守内存销毁机制。(划重点)
注:有人从函数执行在词法作用域而非执行时的作用域来理解闭包,可能会认为仍然在执行作用域链,这里存在争议,不过我还是举个例子反驳下吧 ,科科:

function a(){
    var b = 1;
    return function(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5      这里f形成了一个独立的作用域封装b,b不再收回收机制的限制,形成闭包。

这里就一目了然了,只有当return出去的变量,被保存成全局变量时才不会被销毁,也才形成闭包,其它的情况有可能不是闭包(这个例子下面也会用到 )。

二、闭包的基本形式

只有当return出去的变量,被保存成全局变量时才不会被销毁,也才形成闭包,其它的情况有可能不是闭包

从这句话可以明白常见的闭包的基本形式为:
 ****两个函数相互嵌套,内层的函数被return出去,并且被保存在一个变量中,这样就创建了一个闭包。****例如:

function a(){
    var b = 1;
    return function c(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5    
.
.     

这是闭包的较为常见的基本样式,至于其它立即执行函数等样式的闭包,其实也都是这种方式的转变,下面将会讲到。

三、闭包应用中的作用

  • 外部作用域获取内部作用域变量的值
  • 保存内部变量的值到一个独立的环境中

在实际的js应用中,用闭包干的事挺多的,这两种是比较常见的,就这两种来给大家讲一下自己的理解。

1)外部作用域获取内部作用域变量的值

在正常的作用域链中,(如果不理解什么是作用域链,可以再去看看红宝书)内部作用域可以访问外部作用域中变量,而外部不可以拿到内部的变量,但闭包却可以实现在外部获取内部变量的值,举个栗子:

function a() {
    var c = 1;
    return function b() {
        console.log(c);
    }
}
var d = a();
d(); // 1  执行外部的函数d便获得了作用域a中的变量

例子中执行外部的函数d便获得了内部作用域a中的变量,这便是闭包的作用之一。

2) 保存内部变量的值到一个独立的环境中

由上文中我们可知,函数的内部变量遵循作用域销毁机制,当函数再次被调用时,内部变量会被重新赋值,然而有时候我们并不想让这个局部变量被重新赋值,那么这时候变用到了闭包,下面我用两个例子来说明这个问题。

例子1:

//使用闭包前
function a(){
    var b = 1;
    b+=1;
    console.log(b);
} 
a(); // 2
a(); // 2 
a(); // 2
a(); // 2      无论多少次调用结果都为2 ,说明变量所占内存被回收
.
.
.     

使用闭包前:无论多少次调用结果都为2 ,说明变量所占内存被回收。

//使用闭包后
function a(){
    var b = 1;
    return function(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5      这里f形成了一个独立的作用域封装b,b不再收回收机制的限制,形成闭包。
.
.     

使用闭包后:这里f形成了一个独立的作用域封装b,b不再受回收机制的限制,形成闭包。

例子2:

//使用闭包前
var arr = [];
for(var i=0;i<8;i++){
    arr[i] = function(){
        console.log(i);
    }
}
arr[0]() ; // 8
arr[1]() ;// 8
arr[2]() ;// 8    每次结果都为8 
..

使用闭包前,每次调用的结果都为8,原因很简单,就是在for循环执行一遍时,里面的函数并没有执行;而当在外面调用的时候,for循环已经执行完毕,此时的i始终为8。

//使用闭包后
var arr = [];
for(var i=0;i<8;i++){
    (function(i){
        arr[i] = function(){
            console.log(i);
        }
    })(i)
}
arr[0](); //0
arr[1](); //1
arr[2](); //2
...
arr[7](); //7

使用闭包后,此时已经把要return出去的function(){ console.log(i); }直接赋值给了外部的变量arr,如果看不懂的话换成另外的写法或许就好理解了:

var arr = [];
for(var i=0;i<8;i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        }
    })(i)
}

再进一步改写:

var arr = [];
function a(i){
    return function(){
        console.log(i);
    }
}
for(var i=0;i<8;i++){
    arr[i] = a(i);
}

此时一目了然,这也就是我们常说的立即执行函数(IIFE)中的闭包。

闭包使用需谨慎,变量一直存在于全局变量中(内存)中,有可能造成内存泄露等问题,别问我怎么知道的... 囧。

-END-

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

推荐阅读更多精彩内容