web开发中JavaScript代码执行的先后顺序问题-创新互联
这篇文章主要介绍了web开发中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。
感谢你能够认真阅读完这篇文章，希望小编分享的“web开发中JavaScript代码执行的先后顺序问题”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：web开发中JavaScript代码执行的先后顺序问题-创新互联
文章起源：http://scyanting.com/article/dpspoi.html
