js代码执行顺序

一、引入

​ 我们都知道js是一种单线程的脚本语言,但是有时竟然会提到js的异步操作,这是什么鬼,单线程竟然会出现异步操作?异步操作不是只有多线程才会有的吗?这一个个问题,让然十分困扰,今天我们就来好好分析一下,js代码执行的顺序。

二、执行原理

​ 首先明确一点,js代码一定是单线程的,同一时间,不可能同时运行两个js代码。我们一直说的异步,并不是js的异步而是浏览器的异步。 一些I/O操作、定时器的计时和事件监听(click, keydown…)等都是由浏览器提供的其他线程来完成的。这就解释清楚了异步的定义。

三、执行过程

  1. 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
  2. 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
  3. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
  4. 主线程不断重复上面的第三步
  • 事件队列会将处理事件的优先级进行排序,再通过执行栈来执行事件
  • 其实同步和异步,无论如何,做事情的时候都是只有一条流水线(单线程)

通俗的解释就是,单线程 js 每次只能执行一个任务,当出现异步操作且 js 还没有干完手中的工作,这时异步操作先别着急,现在任务队列里按照优先级排队,当 js把手头的活干完后,然后对任务队列说:行了,再来一批活吧。这时任务队列把队列所有任务按照排好的顺序交给 js执行。在放走一批任务之后,队列又开安排下一批等待执行的任务。

四、浏览器线程

刚刚我们知道了异步是浏览器的异步,那么异步操作有哪些呢?

  • 事件监听 - addEventListener
  • 定时器 - setTimeout /setInterval
  • ajax - 异步请求
  • GUI渲染也是在引擎线程中执行的,脚本中执行对界面进行更新操作, 如添加结点, 删除结点或改变结点的外观等更新并不会立即体现出来, 这些操作将保存在一个队列中, 待JavaScript引擎空闲时才有机会渲染出来。
  • ……

异步操作,触发来源于js代码,执行在浏览器的其他线程,回调函数又加入js队列。

通俗解释一下,就是 js 读到 addEventListener()时,会要求浏览器启动另外一个线程,来监控添加的事件,一旦发现事件被触发,马上将回调函数添加到任务队列中。

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript 代码执行顺序可以分为以下几个阶段: 1. 解析阶段:JavaScript 引擎会先对代码进行解析,生成执行上下文和变量环境。 2. 创建阶段:在执行代码之前,JavaScript 引擎会先创建变量和函数的声明,这个过程叫做变量提升。 3. 执行阶段:JavaScript 引擎会按照代码书写的顺序执行代码,包括赋值操作、函数调用和表达式计算等。 下面是五道面试题以及讲解: 1. ```javascript console.log(a); var a = 1; ``` 输出结果是 `undefined`。 原因是变量 `a` 在执行之前会进行变量提升,在执行时相当于: ```javascript var a; console.log(a); a = 1; ``` 所以 `console.log(a)` 输出的是 `undefined`。 2. ```javascript var a = 1; function test() { console.log(a); var a = 2; } test(); ``` 输出结果是 `undefined`。 原因是在函数 `test` 内部,变量 `a` 发生了变量提升,在执行时相当于: ```javascript function test() { var a; console.log(a); a = 2; } ``` 所以 `console.log(a)` 输出的是 `undefined`。 3. ```javascript console.log(typeof x); ``` 输出结果是 `undefined`。 原因是变量 `x` 没有声明,所以在执行时会抛出错误,但是由于使用了 `typeof` 运算符,所以不会抛出错误,而是返回 `undefined`。 4. ```javascript var a = 1; function test() { a = 2; console.log(a); var a = 3; } test(); console.log(a); ``` 输出结果是 `2` 和 `1`。 原因是在函数 `test` 内部,变量 `a` 发生了变量提升,在执行时相当于: ```javascript function test() { var a; a = 2; console.log(a); a = 3; } ``` 所以 `console.log(a)` 输出的是 `2`,在函数外部的 `console.log(a)` 输出的是 `1`。 5. ```javascript var a = {}; var b = { key: 'b' }; var c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); ``` 输出结果是 `456`。 原因是对象属性名在内部是通过字符串形式存储的,所以变量 `b` 和 `c` 在转换成字符串后是一样的,相当于: ```javascript a['[object Object]'] = 123; a['[object Object]'] = 456; ``` 所以 `console.log(a[b])` 输出的是 `456`。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值