07 | 变量提升：JavaScript代码是按顺序执行的吗？
该思维导图由 AI 生成，仅供参考
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
JavaScript代码执行顺序并非按照表面上的顺序执行，而是经历了编译阶段和执行阶段。在编译阶段，JavaScript引擎会将变量和函数的声明提升到代码开头，并赋予变量默认值undefined。这一行为被称为变量提升（Hoisting）。在执行阶段，JavaScript引擎会创建执行上下文和可执行代码，执行上下文中包含了变量环境对象，其中保存了变量提升的内容。通过模拟代码的分析，我们可以看到变量和函数的声明在编译阶段被放入内存中，而实际代码的执行顺序并不是按照表面上的顺序执行。这种执行机制解释了为什么变量和函数可以在定义之前使用，以及为什么变量和函数的处理结果不同。 在执行阶段，JavaScript引擎开始执行“可执行代码”，按照顺序一行一行地执行。当执行到函数时，JavaScript引擎会在变量环境对象中查找该函数，并执行。如果变量环境中存在该函数的引用，JavaScript引擎便开始执行该函数。接着，JavaScript引擎继续执行后续代码，根据变量环境中的内容进行相应操作。 当代码中出现相同的变量或函数时，JavaScript引擎会将后定义的变量或函数覆盖掉之前的定义。这意味着最终存放在变量环境中的是最后定义的那个，而之前的定义会被覆盖掉。 通过深入了解JavaScript的执行机制，我们可以避开一些陷阱，在编写和分析代码时更加得心应手。了解JavaScript执行流程有助于定位问题和避免错误。 总的来说，本文深入讲解了JavaScript代码的执行原理，强调了编译阶段和执行阶段的重要性，以及变量提升和变量环境中重复定义的影响。对于想深入了解JavaScript执行机制的读者来说，是一篇很有价值的文章。 文章中还提出了一个思考题，通过分析JavaScript的执行流程来预测代码的输出结果，这有助于读者加深对JavaScript执行机制的理解。 综上所述，本文内容丰富，深入浅出地介绍了JavaScript代码执行的内部机制，对读者理解JavaScript的执行流程和避免常见问题具有重要意义。
《浏览器工作原理与实践》，新⼈⾸单¥59
全部留言(115)
- 最新
- 精选
mfist输出1 编译阶段: var showName function showName(){console.log(1)} 执行阶段: showName()//输出1 showName=function(){console.log(2)} //如果后面再有showName执行的话，就输出2因为这时候函数引用已经变了作者回复: 完全没问题，这个可以做参考答案！
2019-08-2011198
lane老师，head头部引入的js文件，也是先编译的吗？作者回复: 我先来解释下页面在含有JavaScript的情况下DOM解析流程，然后再来解释你这个问题。 当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了，在解析过程中，如果遇到了JS脚本，如下所示： <html> <body> 极客时间 <script> document.write("--foo") </script> </body> </html> 那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。 那么第二种情况复杂点了，我们内联的脚本替换成js外部文件，如下所示： <html> <body> 极客时间 <script type="text/javascript" src="foo.js"></script> </body> </html> 这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。 我们再看第三种情况，还是看下面代码： <html> <head> <style type="text/css" src = "theme.css" /> </head> <body> <p>极客时间</p> <script> let e = document.getElementsByTagName('p')[0] e.style.color = 'blue' </script> </body> </html> 当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。 所以这时候如果头部包含了js文件，那么同样也会暂停DOM解析，等带该JavaScript文件下载后，便开始编译执行该文件，执行结束之后，才开始继续DOM解析。
2019-08-2010144
爱吃锅巴的沐泡答案：1 编译阶段: var showName = undefined function showName() {console.log(1)} 执行阶段: showName() //输出1 showName = function() {console.log(2)} 分析：首先遇到声明的变量showName，并在变量环境中存一个showName属性，赋值为undefined; 又遇到声明的函数，也存一个showName的属性，但是发现之前有这个属性了，就将其覆盖掉，并指向堆中的声明的这个函数地址。所以在执行阶段调用showName()会输出1;执行showName = function() {console.log(2)}这句话是把堆中的另一个函数地址赋值给了showName属性，也就改变了其属性值，所以如果再调用showName()，那个会输出2. 这是不是体现了函数是对象，函数名是指针。 疑问：如果同名的变量和函数名，变量环境中是分别保存还是如何处理的？作者回复: 下面是关于同名变量和函数的两点处理原则： 1:如果是同名的函数，JavaScript编译阶段会选择最后声明的那个。 2:如果变量和函数同名，那么在编译阶段，变量的声明会被忽略
2019-08-206103
he函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。作者回复: 对
2019-08-211078- shezhenbiao老师好，请教您一个问题。 debugger; (function(){ console.log(g) if(true){ console.log('hello world'); function g(){ return true; } } })(); 这个函数步进调试时，发现打印g时值是undefined而不是提示not defined，说明if中g函数确实是提升了，但是为何不是g()而是undefined？然后走完function g(){ return true; }这一步后 console.log(g)中的g才变为g()。这里条件声明函数的变量提升有点搞不明白。
作者回复: ES规定函数只不能在块级作用域中声明， function foo(){ if(true){ console.log('hello world'); function g(){ return true; } } } 也就是说，上面这行代码执行会报错，但是个大浏览器都没有遵守这个标准。 接下来到了ES6了，ES6明确支持块级作用域，ES6规定块级作用域内部声明的函数，和通过let声明变量的行为类似。 规定的是理想的，但是还要照顾实现，要是完全按照let的方式来修订，会影响到以前老的代码，所以为了向下兼容，个大浏览器基本是按照下面的方式来实现的： function foo(){ if(true){ console.log('hello world'); var g = function(){return true;} } } 这就解释了你的疑问，不过还是不建议在块级作用域中定义函数，很多时候，简单的才是最好的。
2019-08-25662 
William老师，如果把两个函数调换个儿。那么先声明function，然后把 showName 赋值 undefined，undefined不会覆盖函数声明。这是为什么？ console.log(showName.toString()) function showName() { console.log(1) } var showName = function() { console.log(2) } 打印的是函数体，而非undefined，证明 undefined 不会覆盖函数声明！！作者回复: 对 是这样的，下面是关于同名变量和函数的两点处理原则： 1:如果是同名的函数，JavaScript编译阶段会选择最后声明的那个。 2:如果变量和函数同名，那么在编译阶段，变量的声明会被忽略。
2019-08-211140
林展翔老师，可以请教下吗，在编译完成之后是单单生成了字节码，再到执行过程中变成对应平台的机器码？ 还是编译过程已经生成了对应平台的机器码， 执行阶段就直接去执行相应的机器码？作者回复: 先是生成字节码，然后解释器可以直接执行字节码，输出结果。 但是通常Javascript还有个编译器，会把那些频繁执行的字节码编译为二进制，这样那些经常被运行的函数就可以快速执行了，通常又把这种解释器和编译器混合使用的技术称为JIT
2019-08-2029- Geek_Eastlexical scope发生在编译阶段，会产生变量提升的效果； JavaScript的Dynamic Scope发生在执行阶段，会产生this binding, prototype chaining search的过程； 变量提升只提升声明(left hand）不提升赋值(right hand) function的声明主要有: function declaration, function expression 其中function declaration会将方法体也提升，而function expression同变量提升一样，只会提升声明； 变量提升在有let或者const的block中会出现Temporal Dead Zone Error, 效果好似没有提升； 另外要注意block内部的var变量能够穿透block提升到global scope. 更多JS请了解： https://geekeast.github.io/jsscope.html
作者回复: 很赞
2019-11-2825 
林高鸿老师，ES6 后不用 var，所以可否理解 Hoisting 为“权宜之计/设计失误”呢？作者回复: 你也可以理解为涉及失误，因为设计之初的目的就是想让网页动起来，JavaScript创造者Brendan Eich并没有打算把语言设计太复杂。 所以只引入了函数级作用域和全局作用域，一些快级作用域都被华丽地忽略掉了。 这样如果变量或者函数在if块，while块里面，因为他们没有作用域，所以在编译阶段，就干脆把这些变量和函数提升到开头，这样设计语言的复杂性就大大降低了，但是这也埋下了混乱的种子。 随着JavaScript的流行，人们发现问题越来越多，中间的历史就展开了，最终推出了es6，在语言层面做了非常大的调整，但是为了保持想下兼容，就必须新的规则和旧的规则都同时支持，这样也导致了语言层面不必要的复杂性。 虽然JavaScript语言本身问题很多，但是它已经是整个开发生态中的不可或缺的一环了，因此，不要因为它的问题多就不想去学它，我认为判断要学不学习一门语言要看所能产生的价值，JavaScript就这样一门存在很多缺陷却是非常有价值的语言。
2019-08-2024
YBB老师我想问下，一段javascript代码进入编译阶段是会对函数体内的代码也进行编译，还是只是将函数体的代码存储在堆，在执行中遇到该函数再去编译？作者回复: 记住一点就行：函数只有在调用的时候才会被编译。
2019-08-26423