ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【前端面试题】闭包问题

2020-09-20 10:34:13  阅读:206  来源: 互联网

标签:闭包 function 面试题 console log ++ 前端 var setTimeout


一、未闭包

闭包视频讲解:蛋老师视频

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  console.log(i);//5
//输出结果为:5,5,6,7,8,9

在这里插入图片描述

{
    var i = 0
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  {
    var i = 1
    //放入任务队列,等待同步任务执行后,再根据延迟时间执行
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  {
    var i = 2
    //放入任务队列,等待同步任务执行后,再根据延迟时间执行
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  {
    var i = 3
    //放入任务队列,等待同步任务执行后,再根据延迟时间执行
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  {
    var i = 4
    //放入任务队列,等待同步任务执行后,再根据延迟时间执行
    setTimeout(() => {
      console.log(i++);
    }, 4000)
  }
  {
    var i = 5
    // i<5不成立,不继续执行
  }

  // 执行全局console.log(i),输出i等于5
  // 4000ms延迟时间到,此时var=5(var没有块级作用域,除了function函数),所以输出5次 console.log(i++)
  // 输出5,6,7,8,9

注:
1.setTimeout是异步,先放到任务队列,同步执行完后,任务队列里面再根据时间执行;
2.var没有块级作用域,所以for循环之后,i的值变为5,所以全局先输出5
3.匿名函数可以访问到外部i的值

在这里插入图片描述

二、采用闭包

for (var i = 0; i < 5; i++) {
    (function (x) {
      setTimeout(function () {
        console.log(x++);
      }, 400)
    })(i)
  }
  console.log(i);//5
  输出结果:5   0,1,2,3,4

在这里插入图片描述

{
    var i = 0
      //i=0放入形参中,再执行里面的延迟函数,之后放入任务队列,等待同步任务执行后,再根据延迟时间执行
      (function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)
  }
  {
    var i = 1
      //i=1放入形参中,再执行里面的延迟函数,之后放入任务队列,等待同步任务执行后,再根据延迟时间执行
      (function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)
  }
  {
    var i = 2
      //i=2放入形参中,再执行里面的延迟函数,之后放入任务队列,等待同步任务执行后,再根据延迟时间执行
      (function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)
  }
  {
    var i = 3
      //i=3放入形参中,再执行里面的延迟函数,之后放入任务队列,等待同步任务执行后,再根据延迟时间执行
      (function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)
  }
  {
    var i = 4
      //i=4放入形参中,再执行里面的延迟函数,之后放入任务队列,等待同步任务执行后,再根据延迟时间执行
      (function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)
  }
  {
    var i = 5
    // i<5不成立,不继续执行
  }

  // 执行全局console.log(i),输出i等于5,因为此时var=5,并且var不支持块级作用域
  //调用任务队列里面的 
  /*(function (x) {
        setTimeout(function () {
          console.log(x++);
        }, 400)
      })(i)*/
  // 依次输出0,1,2,3,4

标签:闭包,function,面试题,console,log,++,前端,var,setTimeout
来源: https://www.cnblogs.com/wayhome123/p/13698948.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有