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