第十三天

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

Javascript题目

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

问题解答

  1. function f() {
  2.   var a = [];
  3.   for (var i = 0; i < 2; i++) {
  4.     var ff = function() {
  5.       console.log(i)
  6.     };
  7.     a.push(ff);
  8.   }
  9.   // console.log(i); // 执行完以上操作时 这里的i值为2
  10.   a.push(function() {
  11.     i++;
  12.   });
  13.   console.log(a); // 在向数组中追加一个函数，在闭包的作用下 i 的值+1
  14.   return a; // [ff,ff,ap]
  15. }
  16. const [f1, f2, f3] = f(); // 函数解构
  17. f1() // 第一次调用ff函数
  18. f3() //调用i++  函数 因此i会+1
  19. f2() // 第二次调用ff函数 在f3函数执行完后，因此会打印i 的值为3
  20. // 结果为：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. 缺点不释放会导致内存泄漏