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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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小偷相关截取函数备忘
2010/11/28 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python中os模块详解
2016/10/14 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Django REST framework 分页的实现代码
2019/06/19 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
python中rc1什么意思
2020/06/19 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
工作过失检讨书
2014/02/23 职场文书
关于旅游的活动方案
2014/08/15 职场文书
个人租房协议书样本
2014/10/01 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
个人廉洁自律总结
2015/03/06 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS