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)
Oct 31 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python面向对象 反射原理解析
2019/08/12 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python xlsxwriter模块的使用
2020/12/24 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
程序员跳槽必看面试题总结
2013/06/28 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
Python pyecharts绘制条形图详解
2022/04/02 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python