JavaScript中的闭包问题解析和例题

最新推荐文章于 2024-01-18 09:28:13 发布

原创最新推荐文章于 2024-01-18 09:28:13 发布 · 270 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

本文探讨JavaScript闭包的概念，如何作为私有变量使用，其带来的内存泄漏风险及垃圾回收机制的应用。通过三个实例解析闭包的工作原理，并强调在开发中注意事项和合理利用技巧。

JavaScript中的闭包问题

概念：把局部变量闭包成当前作用域的私有变量

优点：把局部变量拿到作用域的外部使用。
缺点：闭包的变量会存到内存里面，大量使用闭包会导致内存泄漏，所以这个时候就要用到垃圾回收机制（做开发时尽量避免闭包的使用）。

垃圾回收机制
指的是方法内部的局部变量在使用完成之后自动回收，下次调用函数的时候会重置，如果通过闭包没有自动回收，要进行手动回收

闭包例题1

function Method() {
        var num = 1;//闭包变量
        //闭包函数
        return function () {
            num = num + 5;
            console.log(num);
        }
    }
var fun = Method();
	fun();		//6
	fun();		//11
	fun();		//16
	fun();		//21

Method()函数执行结束后return出的结果是 function ()
var fun = Method();也就相当于 fun = function ()
fun();执行的就是function ()函数
这个闭包是把num局部变量拿到了外面来使用

在console控制台输出如下：
在这里插入图片描述

闭包例题2

var arr = [];
    for (var i = 0; i < 10; i++) {
        var list=(function (n){
            var num=n;
            return function (){
                console.log(num);
                num++;
            }
        })(i);
        arr.push(list);
    }
    console.log(arr);

    arr[0](); 		//0
    arr[1]();		//1

arr.push(list);中依次存放的是function(n)经过for循环自执行之后return的无参函数function()
所以数组Array（10）中存放的是十个function()函数
arr[0](); 执行的是num=n=i=0时的无参函数function()
num++的作用是计算无参函数function()执行了几次
通过闭包将num局部变量拿到作用域的外部使用

在这里插入图片描述

闭包例题3

function foo() {
            var local = 1;
            function bar() {
                local++;
                console.log(local);
            }
            return bar;
        }
        var func = foo();
        func();

foo();函数return结果bar()函数
func()就相当于执行bar()

在这里插入图片描述