JavaScript代码执行的先后顺序问题


Posted in Javascript onOctober 29, 2017

一、js--->单线程

 

严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。

  1、什么是单线程?

通俗点说,就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧

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

我们来看一下上面的这段代码,既然延时器时间设置为0,那么应该执行一遍循环就应该立即打印出一个i,但是最终的打印结果为:4,4,4。之所以会出现上面的结果,正是因为js代码是单线程应用。

在执行过程中,先遇到for循环,for循环先进入线程。当i=1时,循环走到setTimeOut后,此时的for循环还没有执行完成,setTimeOut就会被放入一个地方(线程池)等待执行。此时for循环继续执行,当i=2时,for循环仍没有执行完,这时的setTimeOut仍会被放在线程池中等待执行……依次类推,直到for循环转完3遍后,for循环执行完了,此时线程空闲了,在线程池中等待执行的setTimeOut依次执行打印i,而for循环执行完成后,i变成了4,所以打印出了三个4。

2、如果想要改变上面的状况可以运用以下代码

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1,2,3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1,2,3
    },0);
  }(i)
}

二、js中的函数作用域和代码的执行

>>>函数作用域

我们先来了解一下以下几个概念:

1、在js语言中,没有类似于c语言这样的块级作用域。

2、js语言中的顶级作用域为window对象范围内,称为全局作用域,在全局作用域中声明的变量为全局变量。

3、js函数范围内的变量只能在函数内部使用,函数外部无法使用,这样的变量为局部变量。

4、js函数可以嵌套,多个函数的嵌套构成了作用域的层层嵌套,这称为js中的作用域链。

5、js作用域链变量访问规则:

(1)、当前作用域内存在要访问的变量时,则使用当前作用域中的变量。

 

    (2)、当前作用域中不存在要访问的变量时,则会到上一层作用域中寻找,直到全局作用域。

>>>执行顺序

 

js代码执行分为两个部分:

1、代码的检查装载阶段(预编译阶段),此阶段进行变量和函数的声明,但是不对变量进行赋值,变量的默认值为undefined。

2、代码的执行阶段,此阶段对变量进行赋值和函数的声明。

看了上面的一些具体的概念,我们拿一段代码进行举例说明:

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出:undefined。打印a,而在func这个作用域中已经声明了a变量,按照js的执行顺序,此时的a并未被赋值。
  var a=1;
  console.log(a); //输出:1。
}
func();

看上面的代码:第一个a输出undefined。原因:js作用域链的访问规则,当前作用域内存在要访问的变量a,所以使用当前作用域中的变量。再根据js代码的执行顺序,此时的a只是声明了而并未被赋值,默认为undefined,所以输出undefined。

而第二个a,输出1,正是因为此时的a已经被声明且被赋值,所以a输出1。

总结

以上所述是小编给大家介绍的JavaScript代码执行的先后顺序问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
ES6中Class类的静态方法实例小结
Oct 28 #Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 #Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 #Javascript
You might like
php生成文件
2007/01/15 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
JS 统计时间
2021/03/09 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解vue axios二次封装
2018/07/22 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
js实现随机8位验证码
2020/07/24 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
python实现发送邮件功能
2017/07/22 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python实现异步IO的示例
2020/11/05 Python
python代码实现图书管理系统
2020/11/30 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
幼儿园中班下学期评语
2014/04/18 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
规范化管理年活动总结
2014/08/29 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python