彻底搞懂JS闭包各种坑

闭包是js开发惯用的技巧,什么是闭包?

    闭包就是 能够访问另一个函数作用域的变量的函数

    function f1( ){ 

            let a = 2;

            function f2(){

                console.log(a)

            }

            return f2;

    }

    f1();

由此可以看出函数f2可以访问到f1的变量,所以我们就说f2是一个闭包函数,

从堆栈的角度看js函数

    基本数据类型都存储在占内存中,而对象类型的值存储在堆内存中,占内存只存储对应的空间地址

    基本数据类型:Number、String、Boolean、Null、Undefined

对应的存储关系

        

当我们执行 b = {m: 30} 的时候,堆内就有了新的对象 {m : 30},栈内的b就会指向 {m : 30}

而堆内原有的 {m : 20} 会被程序引擎回首掉,节约内存空间。


    let a1 = 1;

    function fn1(){

        let a2 = 2;

        function fn2(){

            console.log(a2)

        }

        fn2()

    }

    fn1()

    fn2的执行环境

                变量                 值

                            无

     fn1的执行环境

                变量                 值

                a2                    2

                fn2                   引用地址

        全局执行环境

                 变量                 值

                   a1                    1

                    fn1                    引用地址

栈是一个先进后出的数据结构

1、在进入fn1前,此时处在全局环境下即window作用域下,在全局作用域下有一个变量a1

2、进入fn1,此时栈内就会push一个fn1的运行环境,在这个环境里有一个变量a2和函数对象    fn2,这里可以访问到自身执行环境和全局变量

3、进入fn2,此时栈内就会push一个fn2的运行环境,这里没有定义任何变量,但是在这里可以访问到fn1和全局环境下的变量,因为程序在访问变量时,是向底层栈一个个找,如果找到全局执行环境里都没有对应变量,则程序抛出underfined的错误。

4、随着fn2()执行完毕,fn2的执行环境被杯销毁,接着执行完fn1(),fn1的执行环境也会被销毁,只剩全局的执行环境下,现在没有a2变量,和fn2函数对象了,只有a1 和 fn1(函数声明作用域是window下)

在函数内访问某个变量是根据函数作用域链来判断是否存在的,而函数作用域连是程序根据函数所在的执行环境栈来初始化的

当程序调用某个函数时:准备执行环境,初始化函数作用域链和arguments参数对象

坑点1: 引用的变量可能发生变化

functionouter(){

varresult = [];

for(vari =0; i<10; i++){

 result.[i] =function(){

console.info(i) 

 } }

return result

}

看样子result每个闭包函数对打印对应数字,1,2,3,4,...,10, 实际不是,因为每个闭包函数访问变量i是outer执行环境下的变量i,随着循环的结束,i已经变成10了,所以执行每个闭包函数,结果打印10, 10, ..., 10

解决:

functionouter(){

    varresult = [];

    for(vari =0; i<10; i++){ 

     result.[i] =function(num){

        return function(){

            console.info(num);// 此时访问的num,是上层函数执行环境的num,数组有10个函数对象,每个对象的执行环境下的number都不一样} }(i)

     }     

            return result

}

坑点2: this指向问题

var object = { 

 name:''object",

    getName: function() {

        return function() {

            console.info(this.name)

        }

    }

}

object.getName()()    // underfined

// 因为里面的闭包函数是在window作用域下执行的,也就是说,this指向windows

坑点3:内存泄露问题

function showId(){

    varel =document.getElementById("app") 

     el.onclick =function(){

     aler(el.id)    // 这样会导致闭包引用外层的el,当执行完showId后,el无法释放

    }}

    // 改成下面

    function showId(){

    varel =document.getElementById("app")

    var    id = el.id 

     el.onclick =function(){ 

         aler(id)// 这样会导致闭包引用外层的el,当执行完showId后,el无法释放

    

     el =null    // 主动释放el

}

技巧1: 用闭包解决递归调用问题

function    factorial(num){

    if(num<=1) {

        return1; 

     }    else    {

        return    num * factorial(num-1) 

     }

    }

    var    anotherFactorial = factorial    

    factorial =null

    anotherFactorial(4)// 报错 ,因为最好是return num* arguments.callee(num-1),arguments.callee指向当前执行函数,但是在严格模式下不能使用该属性也会报错,所以借助闭包来实现

// 使用闭包实现递归

function    newFactorial= (functionf(num){

    if(num<1) {

        return1

    }else{

        returnnum* f(num-1) 

     }})//这样就没有问题了,实际上起作用的是闭包函数f,而不是外面的函数newFactorial

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

推荐阅读更多精彩内容