闭包保证你看的明明白白

我的div丢了肿么办
166 阅读4分钟

闭包的解释

闭包官方的解释：闭包是一个函数以及其捆绑的周边环境状态(词法环境)的引用的组合。
也就是说：闭包让开发者可以从内部函数访问外部函数的作用域。
在 JavaScript 中，闭包会随着函数的创建而被同时创建。
上面这3句话是mdn的解释。太复杂了。笨笨的我理解不了。

我的理解：闭包是函数跨作用域的一种体现，函数跨作用域访问变量，就会形成闭包。
常见的是子函数访问父函数。
表现形式：内层函数访问引用外层函数中的变量

闭包的优点和缺点

优点：变量私有化，减少全局污染。
缺点：变量常驻内存，永久不被js垃圾回收机制回收。【可能】造成内存开销过大或泄漏。

下面就是一个简单的闭包

function demo1(){
  let a = 1
   // 内层函数访问外层函数中的变量
  function b1(){
    return a+1
  }
  b1()
}
demo1()

什么时候闭包需要return ？

什么情况下闭包需要 return ？当我们需要使用闭包中的某一个值
比如我们需要知道某个函数被调用了多少次？

闭包的应用:一个函数被调用了多少次

function count(){
  // 变量是被私有化的。外部的更改是不会对它造成影响
  let num = 0
  function useNum(){
    // 返回的是一个数值
    return ++ num
  }
  // 返回的是一个函数
  return useNum
}
let c = count()
// 因为返回的是一个函数，因我们需要再次使用括号进行调用
console.log(c()) // 1
console.log(c()) // 2
console.log(c()) // 3

01.png

闭包的应用-节流

<body>
    <input type="text" >
    <input type="submit" id="btn"  value="点击我">
    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener('click', throttleFn(submitHandler,2500),false)
      function submitHandler(){
        console.log('点击了')
      }
      function throttleFn(func, delay) {
        let begin = 0;
        return function () {
            let cur = new Date().getTime();
            if (cur-begin>delay) {
                func.apply(this, arguments)
                begin=cur
            }
        }
      }
    </script>
</body>

闭包会造成内存泄漏吗？

闭包会造成内存泄漏吗? 其实闭包不一定会造成内存泄漏。
要说内存泄漏，我们就需要知道什么是内存泄漏？
内存泄漏是指：用不到的变量依然占据着内存空间，不能够被再次利用。
如递归或者方法无法结束。
在这里我们可以得出：像 num 变量就可能存在内存泄漏。
因为用不到的变量没有依然占据着内存空间。
但并不是所有的闭包都会造成内存泄漏。
像react，vue里面就用到的闭包，但是我们不能去回收。

如何清除闭包中的占据着内存的变量

  function count(){
    // 变量是被私有化的。外部的更改是不会对它造成影响
    let num = 0
    function useNum(){
      // 返回的是一个数值
      return ++ num
    }
    // 返回的是一个函数
    return useNum
  }
  let c = count()
  // 因为返回的是一个函数，因我们需要再次使用括号进行调用
  console.log(c()) // 1
  // 斩断 c 与 count 的联系，
  // 此时浏览器的垃圾回收机制就能回收闭包中num占有的空间
  c = null

闭包返回一个函数[常见面试题]

let num  =10
function f1(){
let num = 0
function fn(){
  num++
  console.log('num的值', num)
}
// 这个时候你返回来的是一个函数
return fn
}
let ff = f1()
ff()
ff()

输出的值是： 先是1 然后是2

02.png

闭包-从函数定义的地方开始查找值

let a = 20
// 函数执行的地方
function say(){
  console.log(a)
}


function sum() {
  let a = 40
  // 函数调用的地方
  say()
}
sum() // 输出的是20

04.png

分析:先创建了一个全局变量 a =20
然后又创建了一个局部变量 a = 40
say这个函数是一个全局函数，它里面访问的应该是全局变量20；
总结：它会从函数定义的地方开始去查找值，而不是函数执行的地方开始查找值

闭包-从函数定义的地方开始查找值 [函数作为参数传递]

var a = 'hei'
// 函数定义的地方
function foo(){
  var a = 'ha'
  function fo(){
    console.log(a)
  }
  // return的是一个函数
  return fo
}

function fn(say){
  var a = 'fn'
  // 函数调用的地方
  say()
}
fn(foo())

03.png

分析:这个题其实和上一个题本质上是一样的。
它会从函数定义的地方开始去查找值，而不是函数执行的地方开始查找值。
function fn(say){
  var a = 'fn'
  // 函数调用的地方
  say()
}
这一段代码是迷惑我们的，我们只需要记住从函数定义的地方开始去查找就行

尾声

今天是当帕鲁的第一天。
一点都不想写代码，执行摸鱼
当我发文章的那一刻，测试已经提出来了很多bug,难受。
各位老板，可以给帕鲁点个赞不。
avatar
文章
阅读
粉丝