对闭包的理解以及使用

简介: 对闭包的理解以及使用

前言🚴‍♀🚴‍♀


在我们学习js的过程中,有一个重要的概念,在面试中经常会被问到,这个概念就是闭包,那么闭包是什么,以及它到底有什么用,今天我们就来详细的解释理解一下闭包


闭包的理解和使用🤔🤔


  1. 闭包的概念
  2. 为什么使用闭包
  3. 闭包的好处和坏处


闭包的概念


闭包的概念可以理解为在一个函数里面又创建了另一个函数,这个创建的新函数可以访问到当前函数的变量。

下面是一段代码实例

function outerFunction() {
  var outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
var inner = outerFunction();
inner(); // 输出 "I am outside!"

首先定义了一个函数outerFunction,在这个函数中定义了一个局部变量outerVar,并且在函数outerFunction中定义了一个函数

innerFunction他的作用是打印outerVar这个变量,这个时候innerFunction这个函数访问到了outerFunction函数中的局部变量,此时就构成了闭包

那么相信大家现在肯定还是模棱两可,肯定不理解为什么要使用闭包,这到底有啥用呢?


为什么要使用闭包??


  • 使用闭包的第一用途就是可以让我们在函数外部访问到函数内部的变量,通过使用闭包,可以让我们在外部调用闭包函数,从而在外部访问到函数内部的变量。
  • 另一个用途就是使已经结束运行的函数的变量继续保存在内存中,这是因为闭包函数保留了对这个变量的引用。所以导致这个变量不会被回收。
  • 我们同样可以使用闭包来进行封装函数,这在项目中可能会用到。

注意:由于闭包会将函数中的变量保存在内存中,这对内存的消耗较大,所以注意不要滥用闭包


利用闭包写一个防抖函数


防抖函数使用的也比较多,我们在输入的时候当停止输入一段时间之后的时候我们才发送请求

这个功能就是当停止输入500毫秒时,才会将内容追加到output这个元素中。

下面这个就是对防抖函数进行了封装,使用了闭包的思想。

input.addEventListener("input", debounceFn((e) => {
      console.log(e);
    //获取输入的值
      const value = input.value;
      output.innerText += `发送API请求,参数:${value} \n`;
    }, 500));
function debounce(fn, delay = 0) {
   //接收两个参数,一个fn函数,一个延时的事件delay
  // 返回一个新的防抖函数
  // 即使函数在 delay 时间段内多次被调用,也只会在最后一次函数被调用的 delay 时间结束后执行
  let timer = null;
   //返回值是一个函数,使用了闭包。
   //注意这里的参数是当input事件被触发时,会自动传入一个参数,这个返回的闭包函数接收这个参数。
  return function (e) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(()=>{
        //闭包函数可以访问外部函数的传入的参数,调用这个函数并且将参数传入。
        fn(e)
        //fn函数就是传递的那个箭头函数,这样就达到了延时调用的目的
    },delay)
  }
}
module.exports = debounce;

以上是我举得一个例子,我们在实际开发过程中会有很多场景会使用到闭包的思想,比如说使用promise封装一个函数,这个时候也会使用闭包的思想。


总结:


我们在学习的时候可以不断的进行总结归纳,这样我们就可以达到事半功倍的效果。

相关文章
|
9月前
|
存储 缓存 前端开发
详解 Reat 中的闭包问题
JavaScript 中的闭包一定是最可怕的特性之一。 即使是无所不知的 ChatGPT 也会告诉你这一点。 它也可能是最隐秘的语言概念之一。 每次编写任何 React 代码时,我们都会用到它,大多数时候我们甚至没有意识到。 但最终还是无法摆脱它们:如果我们想编写复杂且高性能的 React 应用程序,我们就必须了解闭包。
77 0
详解 Reat 中的闭包问题
|
设计模式 自然语言处理 JavaScript
一篇文章帮你真正理解javascsript作用域闭包
一篇文章帮你真正理解javascsript作用域闭包
59 0
|
自然语言处理 前端开发 JavaScript
作用域闭包
作用域闭包
58 0
|
前端开发
闭包
前端面试
闭包的使用
闭包的使用
52 0
|
自然语言处理 JavaScript
你真的懂闭包么?
前言 本文主要总结一下 到目前为止对闭包的理解. 好几年之前学习闭包的时候模模糊糊,看了网上的一些帖子,理解为:函数内部可以使用函数外部的变量,后面看了你所不知道的JS,以为自己懂了,后面面试的时候又感觉自己不懂了,而今感觉自己真正懂了==,特此记录一下。
105 0
|
存储 JavaScript 前端开发
深入理解作用域和闭包(上)
深入理解作用域和闭包(上)
深入理解作用域和闭包(上)
|
存储 缓存 JavaScript
深入理解作用域和闭包(下)
深入理解作用域和闭包(下)
深入理解作用域和闭包(下)
7、闭包与作用域链
7、闭包与作用域链
40 0