闭包

闭包的定义

什么是闭包：闭包是一个访问其他函数内部变量的函数

闭包 = 函数 + 上下文引用闭包不等于函数

示例代码如下:

  function fn() {
            let a = 1
            function fn1() {
                console.log(a)
            }
            fn1()
        }
        fn()

提示：执行函数 fn1 用到了另一个函数fn中的 a 这个变量，所以 fn1 + a 构成了闭包。

闭包的作用

直接作用：解决变量污染问题，让变量被函数保护起来。

示例代码如下：

let count = 0
setInterval(function () {
  console.log(count++)
}, 1000)

以上代码中的 count 是一个使用频率很高的变量名，为了避免和其他位置的代码冲突，可以再使用一个函数把以上代码包裹起来，起到保护作用。

function fn() {
  let count = 0

  setInterval(function () {
    console.log(count++)
  }, 1000)
}

以上代码中，setInterval 第一个参数的匿名函数与 count 构成了闭包。

将以上代码改写如下：

function fn() {
  let count = 0
  function add() {
    console.log(count++)
  }
  
  setInterval(add, 1000)
}

以上代码中，add + count 构成了闭包。

结论：一个函数内使用了外部的变量，那这个函数和被使用的外部变量一起被称为闭包结构，在实际开发中，通常会再使用一个函数包裹住闭包结构，以起到对变量保护的作用。

闭包的案例

案例需求：

在输入框输入搜索文字，点击百度一下按钮，用定时器模拟网络请求，1秒之后显示搜索结果；

示例代码如下:

<div class="box">
  <input type="search" name="" id="">
  <button>百度一下</button>
</div>
<script>
// 1. 获取元素
let search = document.querySelector('.box input')
let btn = document.querySelector('.box button')

// 2. 添加点击事件
btn.onclick = function () {
  // 获取搜索的文字
  let text = search.value

  // 模拟发送网络请求
  setTimeout(function () {
    alert(`您搜索的内容是 ${text} 共搜索到 12345 条结果`)
  }, 1000)
}
</script>

什么是闭包?闭包有什么作用?

闭包

闭包的定义

闭包的作用

闭包的案例