一文搞懂JavaScript闭包函数

来源博客：【Harryの心阁】

第十三天

• 题目来源: 前端每日知识3+1

Javascript题目

题目 : 关于闭包函数，得出以下代码的打印结果(js)

问题解答

function f() {
  var a = [];
  for (var i = 0; i < 2; i++) {
    var ff = function() {
      console.log(i)
    };
    a.push(ff);
  }
  // console.log(i); // 执行完以上操作时 这里的i值为2
  a.push(function() {
    i++;
  });
  console.log(a); // 在向数组中追加一个函数，在闭包的作用下 i 的值+1
  return a; // [ff,ff,ap]
}
const [f1, f2, f3] = f(); // 函数解构
f1() // 第一次调用ff函数
f3() //调用i++  函数 因此i会+1
f2() // 第二次调用ff函数 在f3函数执行完后，因此会打印i 的值为3
// 结果为：2,3

解题思路

• 这里用到的函数闭包的思想, 将函数返回的值进行解构得到三个函数, 然后第一次调用f1()时 执行ff函数 打印值为for循环结束后的值i=2, 然后在调用f3函数也就是最后a.push的函数, 执行i++的操作; 在原来i=2的基础上+1, 在执行第三步的打印操作, 这时的i的值为3 所以输出打印的结果为3
• 如果将for循环中的 var 改为 let 这里i有块级作用域, 只会打印f1()函数执行结果0, 因为i的值无法跳出for循环, 在执行f1()函数时i只能从内部获取也就是初始值 就会出现i的值没有被定义的情况
• 关于闭包

知识扩展

• 为什么HTML5只需要写<! DOCTYPE HTML>就可以?

1. DOCTYPE是document type的缩写
2. 因为 HTML5 与 HTML4 基于的基准不同. HTML4 基于 SGML 因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染.
3. DTD 还分为标准模式、严格模式. 如果什么都不写, 就完全让浏览器自我发挥, 会变成怪异模式.
4. HTML5 不基于 SGML, 因此后面就不要跟 DTD, 但是需要 DOCTYPE 来规范浏览器的渲染行为.
5. 注: SGML 是通用标记语言的集合. 其中有 HTML、XML, 因此需要用 DTD 来指定使用那种规范.

• js中函数的闭包

1. 在局部作用域引用上层作用域（非全局）的变量，就是引用外部函数定义的变量；但是外部函数无法调用局部函数中的变量
2. 优点就是防止变量污染作用域
3. 缺点不释放会导致内存泄漏

公众号：今日在学