底层剖析JavaScript闭包执行以及内存模型、内存泄露

最新推荐文章于 2023-01-17 12:27:21 发布

既白biu

最新推荐文章于 2023-01-17 12:27:21 发布

阅读量1.7k

点赞数 11

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50926010/article/details/124310246

版权

文章目录

一、闭包是什么？
二、从内存视角看闭包的执行
三、闭包造成的内存泄露

一、闭包是什么？

在《你不知道的JavaScript（上册）》一书中有如下一句话：
在这里插入图片描述
在计算机科学中对闭包的定义(维基百科) :

闭包(英语: Closure) ,又称词法闭包( Lexical Closure )或函数闭包
是在支持头等函数的编程语言中,实现词法绑定的一种技术;
闭包在实现上是一个结构体 ,它存储了一个函数和一个关联的环境(相当于一个符号查找表) ;
闭包跟函数最大的区别在于,当捕捉闭包的时候,它的自由变量会在捕捉时被确定,这样即使脱离了捕捉时的上下文,它也能照常运行;

在这里插入图片描述
看完这个介绍还是有点懵，别急，继续看下去

闭包的概念出现于60年代,最早实现闭包的程序是Scheme ,那么我们就可以理解为什么JavaScript中有闭包:
因为JavaScript中有大量的设计是来源于Scheme的;

我们再来看一下MDN对JavaScript闭包的解释:

一个函数和对其周围状态( lexical environment ,词法环境)的引用捆绑在一起(或者说函数被引用包围) , 这样的组合就是闭包( closure ) ;
也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域 ;
在JavaScript中,每当创建一个函数 ,闭包就会在函数创建的同时被创建出来;

那么我的理解和总结:

一个普通的函数function ,如果它可以访问外层作用于的自由变量,那么这个函数就是一个闭包 ;
从广义的角度来说:JavaScript中的函数都是闭包;
从狭义的角度来说: JavaScript中一个函数 ,如果访问了外层作用于的变量,那么它是一个闭包;

var name="anonymous"
function foo(){
console.log(name)
}
foo()

这里就形成了一个简单的闭包，foo函数里面访问了外部变量name,于是foo函数就形成了闭包

二、从内存视角看闭包的执行

看以下代码：

function foo() {
    var name = "foo"
    var age = 18;

    function bar() {
        console.log(name);
        console.log(age);
    }
    return bar
}
var fn = foo()
fn()

bar函数里面使用到了外部变量name和age,于是bar函数连同外部的变量就构成了闭包。

首先foo是函数，会创建函数的执行上下文，放入执行上下文栈中，VO指向AO(foo)，里面的bar属性指向bar函数对象，bar函数对象包括父级作用域AO,于是bar函数对象又指向AO对象，而后返回bar,实际上返回的是bar的内存地址，赋值给fn

在这里插入图片描述

fn赋值为bar的内存地址后，GO中的fn指向bar函数对象，由于从根对象GO开始查找，fn指向bar函数对象,而bar函数对象又指向AO,于是即使foo函数执行完毕后，AO对象和bar函数对象也是不会销毁。fn函数开始执行，于是bar开始执行，那么此时foo函数已经执行完毕，foo函数的执行上下文出栈，bar函数执行上下文进栈，bar函数开始执行，console.log(name);console.log(age);

在这里插入图片描述