当前位置:首页 > 日记 > 正文

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

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

一、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变为letfor(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代码执行的先后顺序问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

在word中怎样输入化学方程式 word

在word中怎样输入化学方程式 word

输入,方法,步骤,化学方程式,电脑软件,  化学方程式的书写不管是学生还是老师都是一个绕不开的工作。化学方程式中有很多的上下标格式、括号,这给我们老师录入化学方程式到文档中带来了不小的困难,如何快速的录入化学方程式是我们亟需解决的…

angularjs实现上拉加载和下拉刷新

angularjs实现上拉加载和下拉刷新

上拉加载,刷新数据,功能,电脑软件,angularjs,虽说AngularJS 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚。其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路。 now,begin:先说下拉刷新吧,原理就是每次下…

js实现楼层导航功能

js实现楼层导航功能

导航,楼层,功能,电脑软件,js,图如下所示:1.点击跳转到相应区域:页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离;document.body.scrollTop = scrollLength;   document.documentElement.scrollTop = s…

ps怎样把人物制作成漫天飞舞的雪景

ps怎样把人物制作成漫天飞舞的雪景

雪景,效果,人物,电脑软件,ps,ps怎样把图片制作成漫天飞舞的雪景效果?运用PHOTOSHOP软件,可以很简单的制作大家想要的照片,下面和小编一起来看看具体步骤吧。最终效果图练习素材:具体步骤:1、将RAW格式的原文件在PS里打开,参数调整如下。2、打开…

excel2010开启夜间模式的方法步骤

excel2010开启夜间模式的方法步骤

方法,夜间模式,步骤,分析工具,加载,  夜间如果输入表格,太亮的话,对眼睛不好,开启夜间模式能够相对应的保护我们的眼睛。下面小编教你excel2010怎么开启夜间模式,希望对你有帮助!excel2010开启夜间模式的方法首先,我们打开excel表格,打开以后,我…

RedHat Linux 红旗9.0安装图解

RedHat Linux 红旗9.0安装图解

安装图解,红旗,电脑软件,RedHat,Linux,第1步:第一步:选择安装方式。 1、图形安装(直接回车) 2、文本安装(输入 linux text第2步:选择&ldquo;OK&rdquo;为检查光盘 选择&ldquo;Skip"跳过检查。我确认我的光盘是好的,我跳过!第3步:这一段是费话,跳过!4步…

AngularJs定时器$interval 和 $tim

AngularJs定时器$interval 和 $tim

详解,电脑软件,AngularJs,interval,timeout,$intervalwindow.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定…

详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换

详解,样式,程序,电脑软件,微信小,详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下:原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个“active”的样式。代码如下:<!--ind…

通过学习bootstrop导航条学会修改b

通过学习bootstrop导航条学会修改b

修改,导航条,基调,学习,颜色, 通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念- navbar-default:默认的外观- navbar-inverse:暗色背景的样式- 所以我们希望可以通过自定义一套完整的风格:比如自定义一个颜色基调 …

jQuery实现返回顶部按钮和scroll滚

jQuery实现返回顶部按钮和scroll滚

动画效果,返回顶部,按钮,功能,电脑软件,jQuery脚本:<script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').ap…

常用正则表达式匹配代码介绍

常用正则表达式匹配代码介绍

正则表达式,常用,代码,电脑软件,正则表达式,又称正规表示法、常规表示法。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则。在很多文本编辑器…

JavaScript判断输入是否为数字类型

JavaScript判断输入是否为数字类型

类型,输入,数字,方法,电脑软件,JavaScript判断输入是否为数字类型的方法总结前言很多时候需要判断一个输入是否位数字,下面简单列举集中方法。第一种方法 isNaNisNaN  返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 NaN 即…