前端基石:一段代码隐含了多少基础知识?

一起养成写作习惯!这是我参与「日新计划 4 月更文挑战」的第7天,点击查看活动详情。

前言

今天在网上看见这样这样一段代码,如下:

function fn() {
    for (let i = 0; i < 4; i++) {
        var timer = setTimeout(function(i) {
            console.log(i);
            clearTimeout(timer);
        }, 10, i);
    }
}
fn();

请问这段代码执行会输出什么?为什么?

结果是什么?

大家可以先在大脑里过一下这段代码,试着说出结果是什么?

前端基石:一段代码隐含了多少基础知识?

我们在浏览器字符间距行一下这段代码,结果是0、1、2。你答对了吗。

前端基石:一段代码隐含了多少基础知识?

为什么这段代码输出的是 0、1、2,而不是0、1、2、3。

函数执行

问题就出在 timer 前面这个 var 上。

前端基石:一段代码隐含了多少基础知识?
var 定义的变量,是不会生成“块级作用域”的。按照之前文章的思路(# 前端基石:函数的底层执行机制),我们来一步一步执行这段代码。

  1. 函数创建

    1. 一个函数的创建会在 Heap 堆内存中开辟一块空间来存储字符串是什么意思函数。对象在创建会在堆内存中存储对象的键值对,而函数在堆内存中会存储三部分东西:
      • 作用域:[[scope]](在这里是window)
      • 函数字符
      • 键值对
  2. 变量提升,fn 提升到最前面

  3. 代码执行(函数执变量的定义行)

    1. 函数执行

      • 创建自己的私有上下文,函字符间距怎么加宽数一旦执变量名的命名规则行,就会创建一个全新的私有上下文「进栈」,函数每一次执行都是重新形成一个全新的私有上下文,和之前执行产生的上下文没有必然的联系,函数中的代码都是在私有上下文中进行执行的。函数进栈执行会创建一个私有变量对象 AO(Active Object),这里区分开 VO。AO 是 VO 的一个变量英语分支。在私用上下文中创建的变量都会存储在 AO 中,例如形参、变量提升和函数中定义的变量。
    2. 函数进行初始化操作

      1. 初始化作用域链<<自己的私有上下文,作用域>>。

      2. 初始化 this。

      3. 初始化 arguments (没有)。

      4. 形参赋值。

      5. 变量提升。

        • for 循环中的 let 不进行提升
        • for 循环内部的 var 进行变量提升,提升到 fn 的函数作用字符常量变量之间的关系内,这其实就是在循环体实际只是定义了一个 timer 变量,每一次迭代执行,都是对这个 timer 进行重新赋值。
    3. 函数存储变量类型有哪些的字符串执行,将堆内存中存在的代码字符串从上往下的顺序进行执行。

    4. 出栈释放

前端基石:一段代码隐含了多少基础知识?

函数代变量名码字符串的执行

我们接下来重点看看 fn 函数内部的执行,下面我用一段伪代码演示一下你这个代码执行后发变量泵生了什么:

注意点:

  1. for 循环中的 let 不进行提升,形成块级作用域。
  2. for 循环内部的 var 进变量泵行变量提升,提升到 fn 的函数作用域内,这其实就是在循环体实际只是定义了一个 timer字符常量 变量,每一次迭代执行,都是对这个 timer 进行重新赋值。
  3. setTimeout 是异步,会放入宏任务队列。前端和后端的区别
  4. setTimeout 的第三个参变量类型有哪些数会作为 setTimeou浏览器推荐t 的回调函数的参数传入。

第一次迭代:

fn: {
  var timer = timer0
  for: {
    let i = 0
  }
}
task(宏任务): [ timer0 ]

第二次迭代:

fn: {
  var timer = timer1
  for: {
    let i = 1
  }
}
task(宏任务): [ timer0, timer1 ]

第三次迭代:

fn: {
  var timer = timer2
  for: {
    let i = 2
  }
}
task(宏任务): [ timer0, timer1, timer2 ]

第四次迭代:

fn: {
  var timer = timer3
  for: {
    let i = 3
  }
}
task(宏任务): [ timer0, timer1, timer2, timer3 ]

前端基石:一段代码隐含了多少基础知识?
同步代码执行完成,timer 由于被提升到 fn 的函数作用域,每一次循环执行,都是重置赋值 timer,所以,timer 最终指向的 timer3。这样还没有结束,同步代码执行完成,开始执行异步队列代码。

字符间距步队列执行

异步代码会按照 task 的顺序依次执行。 当执行 timer0 的时候会执行 clearTimeout(ti前端开发mer3) ,把 timer3 从 task 列表里去掉,最终只有 timer0、timer1、timer2 三个得到了执行,因此只会前端开发需要掌握什么技术 console 出 0、1、2。

前端基石:一段代码隐含了多少基础知识?

如何正常输入 0、1、2、3

那如果我们想要按照0、1、2、3 这样的输出方式进行输出,应该如何调整这段代码了。

问题的本质是出在 timer 前面这个 var 变浏览器历史记录设置量定义上。v字符间距加宽2磅ar前端 定义的变量,是不会生成“块级作用域”,变量被提升。同步代码执行完成之后,timer 最终指向了 timer3,导致在执行 task 的时候被清除。

要解决这个问题就不能让 timer 最后指向 timer3。

需要让每一次循环迭代,timer 都是一个独立的变量。

timer变量的定义 如果想浏览器数据如何恢复要是独立的变量,就需要每一次循环迭代变量英语都在一个独立的作用域中执行。并且不会进行变量提升

除函数和对象的大字符是什么括号之外,其他大括号如果出现了let、const、function、class 等关键字声明变量,则当前大括号会产生一个块级上下文。它的上级上下文就是所处的环境。var 声明不会产生块级上下文,也不受块级上下文的影响。所以在当前场景,使用 let/co浏览器网站删除了怎么恢复nst 声明 timer,形成块级作用域。

这里也很简单会议一下 let/const 和 var 的区别(# var、let、const前端被你忽略的区别):

  1. let/const 不存在变量提升,不允许在声明之前使用
  2. let/const 不允许重复声明
  3. let/const 不会污染全局
  4. let/const 会生成块级上下文
  5. let / cons变量名t 会形成暂时性死区
  6. 形参重新声明(易被忽略)
function fn() {
    for (let i = 0; i < 4; i++) {
        // let、const 都可以
        let timer = setTimeout(function(i) {
            console.log(i);
            clearTimeout(timer);
        }, 10, i);
    }
}
fn();

前端基石:一段代码隐含了多少基础知识?

总结

看似简单浏览器数据如何恢复的一段代码,隐藏字符常量了很多的前端开发需要学什么知识点:

  • 「变量提升」
  • 「函数执行机制」
  • 「块级作用域」
  • 「异步任务队列」
  • let/const 和 var 的区别

等… 但这些知识点本身不难,只是可能隐藏比较深,让我们一不小心就掉坑了。所以简单的代码,越容易有坑。本文也通过一步一步浏览器的分析找到问题的原因,然后找出解决办法。

以上就是本文的全部内容,如果喜欢帮忙点个赞吧,谢谢。

参考

  • juej字符串是什么意思in.cn/post/6变量名的命名规则95387…
  • juejin.cn/post/708389…变量类型有哪些
  • juejin.cn/post/708352…
  • www.zhihu.com/question/4浏览器网站删除了怎么恢复3…
  • juejin.cn/post/浏览器708556…

发表评论

提供最优质的资源集合

立即查看 了解详情