2019-08-20老师，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解析。 3 40- 2019-08-20输出1
编译阶段:
var showName
function showName(){console.log(1)}
执行阶段:
showName()//输出1
showName=function(){console.log(2)}
//如果后面再有showName执行的话，就输出2因为这时候函数引用已经变了展开作者回复: 完全没问题，这个可以做参考答案！
3 36 
2019-08-20答案：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:如果变量和函数同名，那么在编译阶段，变量的声明会被忽略 1 27- 2019-08-25老师好，请教您一个问题。
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;}
}
}
这就解释了你的疑问，不过还是不建议在块级作用域中定义函数，很多时候，简单的才是最好的。 18 
2019-08-21老师，如果把两个函数调换个儿。那么先声明function，然后把 showName 赋值 undefined，undefined不会覆盖函数声明。这是为什么？
console.log(showName.toString())
function showName() {
console.log(1)
}
var showName = function() {
console.log(2)
}
打印的是函数体，而非undefined，证明 undefined 不会覆盖函数声明！！展开作者回复: 对 是这样的，下面是关于同名变量和函数的两点处理原则：
1:如果是同名的函数，JavaScript编译阶段会选择最后声明的那个。
2:如果变量和函数同名，那么在编译阶段，变量的声明会被忽略。 7 16
2019-08-21函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。作者回复: 对
2 10
2019-08-20老师，可以请教下吗，在编译完成之后是单单生成了字节码，再到执行过程中变成对应平台的机器码？ 还是编译过程已经生成了对应平台的机器码， 执行阶段就直接去执行相应的机器码？作者回复: 先是生成字节码，然后解释器可以直接执行字节码，输出结果。 但是通常Javascript还有个编译器，会把那些频繁执行的字节码编译为二进制，这样那些经常被运行的函数就可以快速执行了，通常又把这种解释器和编译器混合使用的技术称为JIT
9
2019-08-20老师，ES6 后不用 var，所以可否理解 Hoisting 为“权宜之计/设计失误”呢？作者回复:
你也可以理解为涉及失误，因为设计之初的目的就是想让网页动起来，JavaScript创造者Brendan Eich并没有打算把语言设计太复杂。
所以只引入了函数级作用域和全局作用域，一些快级作用域都被华丽地忽略掉了。
这样如果变量或者函数在if块，while块里面，因为他们没有作用域，所以在编译阶段，就干脆把这些变量和函数提升到开头，这样设计语言的复杂性就大大降低了，但是这也埋下了混乱的种子。
随着JavaScript的流行，人们发现问题越来越多，中间的历史就展开了，最终推出了es6，在语言层面做了非常大的调整，但是为了保持想下兼容，就必须新的规则和旧的规则都同时支持，这样也导致了语言层面不必要的复杂性。
虽然JavaScript语言本身问题很多，但是它已经是整个开发生态中的不可或缺的一环了，因此，不要因为它的问题多就不想去学它，我认为判断要学不学习一门语言要看所能产生的价值，JavaScript就这样一门存在很多缺陷却是非常有价值的语言。 7- 2019-08-20x = 10 + 20;
console.log(x);
若对 x 未进行定义, 直接赋值, 可以输出
若按照课程理解并假设
编译阶段会有一个
x = undefine
但是
console.log(x);
x = 10 + 20;
console.log(x);
会出现报错 x is not defined
在这个地方 我的理解有什么问题吗 还是说 原来就没有 x = undefine 操作, 只是在 x = 10 + 20; 给 x 赋值了一下.展开作者回复: 需要通过 var x 声明才会在编译期间提升
2 5 
2019-09-09当从服务器接收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解析。
-------------
老师，最后一种情况，如果js中没有访问元素的样式，那么js还要继续等待CSS 加载解析完成吗？在这种情况下，chrome 和firefox 的处理是不是不太一样？chrome 会并行加载解析css，而firefox 会等待css加载解析完成后再执行js？展开 2
2019-08-20showName()
function showName(){
console.log(1)
}
var showName=function(){
console.log(2)
}
showName()
第二个showName打印为2，为什么这个showName找的是变量而不是函数，或者此时变量环境中已经没有了showName函数，只有showName变量？谢谢展开作者回复: 是的，变量环境中只保存一个
2 2- 2019-11-28lexical 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展开作者回复: 很赞
1 
2019-08-26老师我想问下，一段javascript代码进入编译阶段是会对函数体内的代码也进行编译，还是只是将函数体的代码存储在堆，在执行中遇到该函数再去编译？作者回复: 记住一点就行：函数只有在调用的时候才会被编译。
1
2019-08-23showName函数的编译是在什么时候呢作者回复: 调用的时候，08节有介绍
1- 2019-08-22// application.js
$(function() {
utils.log('Ready');
});
// utils.js
window.utils = {
log: function() {
if (window.console) console.log.apply(console, arguments);
}
};
<script src ＝"application.js"></script>
<script src ＝"util.js"></script>
一本书上说这段js代码在页面被缓存时候会出现问题，我的理解是即便util被缓存，不也要等到它执行完成再触发domcontentloaded事件吗？所以不会出问题展开 1 - 2019-08-22老师我有个问题，正常情况domcontentloaded事件是在浏览器下载并解析完html才触发，如果有内嵌外部js文件，也要等到js加载并执行完才触发。但如果页面是被二次访问并且html和引入的外部js都命中了缓存，则是否也要等到js被完全执行才触发呢？
作者回复: 需要的，因为不管是否缓存了，都需要执行JS
1 
2019-08-20通过这篇文章我学到了一个知识点：
清楚 了JavaScript 的执行机制：先编译，再执行。 1
2019-08-20一、
showName()
var showName = function() {
console.log(2)
}
function showName() {
console.log(1)
}
编译阶段，第一个showName存入变量环境中，自动赋值undefined
第二个showName函数体也存入了变量环境中，但是是一个完整的函数声明赋值
执行阶段，Javacript引擎从变量环境中查找到showName函数体直接执行
输出结果：1展开作者回复: 没问题
1- 2019-08-20二、
showName()
function showName(){
console.log(1)
}
var showName=function(){
console.log(2)
}
showName()
编译阶段，showName函数体存入变量环境
showName变量存入变量环境，赋值undefined
执行阶段，第一个showName()查找到函数体直接执行
输出结果：1
执行到第二个showName()时，showName变量已经赋值了function(){console.log(2)}
输出结果：2展开作者回复: 不过第二个语句仅仅是赋值操作，函数并没有执行，所以不会输出2的
2 1 
2020-02-04老师，看到这里，真的想大赞你，讲解的实在太棒了！我之前看过很多js底层和基础的文章和教程，都没有这种图形化，深入浅出。我看了你的然后对照之前的知识笔记思考，感觉很多东西都非常通透了，你这个教程真是超值，非常感谢！