收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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变为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按钮禁用和启用的效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述:!doctypehtmlhtmlheadmetacharset="utf-8"title按钮启用和禁用/titlescripttype="text/javascript"functionbtn1(){document

JavaScript实现精美个性导航栏筋斗云效果
实现效果:实现效果如下图所示实现原理:什么是筋斗云效果:这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录

用React实现一个完整的TodoList的示例代码
前言:算起来已经有一个多月没有写博客了,近来懈怠了不少,也不知道要写些什么,最近学了一段时间的React,一直都在看些理论性的知识,总觉得应

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号