什么是闭包？带你实际操作一下，必会.

前端小学弟~

已于 2022-05-05 09:21:51 修改

阅读量314

点赞数

分类专栏： JS基础文章标签： javascript 前端

于 2022-05-02 15:34:14 首次发布

本文链接：https://blog.csdn.net/weixin_45453514/article/details/124541050

版权

JS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先看看概念：

1、什么时候需要使用闭包

当我们重复使用一个对象，但又想保护这个对象不被其他代码污染。

2、闭包的作用

使得一个外部函数有权访问一个函数内部函数作用域；

其实闭包就是一个函数。

3、闭包的形成条件

需要访问作用域
函数嵌套（物理条件）
被嵌套函数在另一个外部作用域中被调用

4、闭包的缺点：

比起普通函数，闭包对内存占用更多，因此建议在使用完毕后，可以手动赋空标记，可以回收fn=null

这些太枯燥了，背会了还是不理解，不会用，接下来的才是重点，跟我一起看吧！

动手操作！(重点）

一个简单的需求：

你的老板告诉你，要你在屏幕开启的时候开始计时，每隔一秒加一；

这个需求很简单吧，也许你的第一反应就是这不就是定义一个全局变量，然后通过setInterval进行计时，没错！这个思路很清晰，But，今天的有更高级的做法，那就是通过闭包来实现；

咱们的重点是逻辑，所以我就展示逻辑了，为了测试，我们就让他计时到10的时候停止；

先来看看正常的写法

全局变量

let second = 0;
function counter() {
  if(second === 10) {
    console.log('结束定时器')
    clearInterval(secondInterval);
    return;
   }
  second += 1;
  console.log(`${second}秒`);
}

const secondInterval = setInterval(() => {
  counter();
},1000)

看到了吧，就是这么简单，看一下结果吧

下面就是今天的重头戏了

闭包实现

function counter() {
  let second = 0;
  function doCounter() {
     if(second === 10) {
       console.log('结束定时器')
       clearInterval(secondInterval);
       return;
     }
     second += 1;
     console.log(`${second}秒`);
   }
return doCounter
}

const doCounterFn = counter();
const secondInterval = setInterval(() => {
  doCounterFn();
},1000)

结果