随缘

Appearance

闭包 ​

描述 ​

  • 红宝书：闭包是指有权访问另一个函数作用域中变量的函数

  • MDN：闭包是指那些能够访问自由变量的函数，这里的自由变量是指外部作用域中的变量

    涉及到哪些知识点?

    • 作用域
      • 全局作用域
      • 局部作用域（函数作用域）
      • 词法作用域 (作用域链)
      • 执行上下文

优缺点 ​

  • 优点：私有化数据，在私有化数据的基础上保持数据
    • 红宝书：任何在函数中定义的变量，都可以认为是私有变量 举个例子：防抖：
js
/**
* 手写题也是一样，不要上来就写，先把注释写好，写出自己的思路见解，
  有些时候写不出来，有自己的思路也是面试官比较看重的点
* 概念
* 思路
* 编码
*/
function debounce(fn, delay) {
  let time = null; // 私有化数据
  return function () {
    let context = this,
      args = arguments;
    if (time) {
      // 下一次点击的时候获取到上一下的time，也就是保持数据。
      clearTimeout(time);
      // 思考题 这里要不要清空time
      // time = null;
    }
    time = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}
  • 缺点：可能会导致内存泄漏，内部的变量不会被自动回收掉
    • 垃圾回收机制
      • 标记清除
      • 引用计数
      • 新生代，老生代
js
/**
 * 手写题也是一样，不要上来就写，先把注释写好，写出自己的思路见解，
   有些时候写不出来，有自己的思路也是面试官比较看重的点
 * 概念
 * 思路
 * 编码
 */
function assignHandler() {
  var element = document.getElementById("root3");
  element.onclick = function () {
    alert(element.id);
  };
  // element = null
}

以上代码创建了一个作为 element 元素事件处理程序的闭包，而这个闭包又创建了一个循环引用。由于匿名函数保存了一个对 assignHandler() 的活动对象的引用，因此就会导致无法减少 element 的引用数，只要匿名函数存在，element 的引用数至少也是 1，因此会占用内存久永远不会被回收

上面的例子和解析，都是红宝书的原题，我手抄下来的，大家一定要多看书，书上讲的很清晰易懂！

用途 ​

  • 防抖，节流 ......
  • vue ：响应式原理
  • react ：fiber,hooks 原理

答题 ​

闭包是指有权访问另一个函数作用域中变量的函数，优点是私有化数据，在私有化数据的基础上保持数据，缺点使用不恰当会导致内存泄漏，在不需要用到的时候及时把变量置为 null

闭包的应用是非常广泛的，比方我们常见的节流，防抖，函数柯理化，在 vue,react 源码中也应用广泛（如果你们接的住vue,react源码中，具体的应用场景你就可以答）

总结复盘 ​

一道题的背后往往涉及到非常多的知识，就像套娃一样，你想一想你能不能接住面试官的三连问？就像闭包设计到了

  • 作用域&作用域链
  • 执行上下文 --》这里又会衍生到 this 相关的问题和手写代码题
  • 缓存，内存
  • 垃圾回收机制
  • 以及对知识广度的探索，比方你举例的应用场景够不够有说服力

我们学习的记忆曲线是随着时间的流逝而慢慢流逝，你搞一遍，肯定会忘掉的，你要能一遍记住，你肯定不会在看我这篇文章，你是神！

所以我要要学会总结复盘，写文章记录，或者形成自己的脑图，没事的时候拿出来看看，对吧，不断的重复记忆，慢慢的你就变强了！

原文链接 ​

闭包


⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸

上次更新于: