Js预解析的相关随笔

写这篇文章之前，我看到了中的另一篇文章，链接如下：
前端基础进阶（二）：执行上下文详细图解

作者所述的 “执行上下文” 的概念在我看来实是复杂，不是说写的不对或是表述有什么问题，只是偏向底层，并不适合理解，这样的文章放在前端基础进阶的第二篇，对于新手来说是否有些不太友好？

写了一点随笔，寥寥数语，不堪成文。

其实总结起来就一句话，在执行js代码之前，浏览器会对js代码进行预解析。

规则如下：

• 将变量声明提前到所有代码的最前面；
• 将函数声明提前到函数声明之后，其他代码之前；

function foo () { 
    console.log('function foo')
}
var foo = 20;
console.log(foo);   // 20

我们首先来看一下这段代码经过预解析之后会变成什么样：

var foo
function foo () { 
    console.log('function foo')
}
foo = 20
console.log(foo)

此时再看打印结果，自然也就一目了然了
我们继续往下看：

/* ----- 预解析之前 -----*/

console.log(foo);
function foo () { 
  console.log('function foo')
}
var foo = 20;

/* ----- 预解析之后 -----*/

var foo;                 //  变量声明提至最前
function foo () {         //  函数声明提到变量声明之后，其他代码之前
  console.log('function foo')
}
console.log(foo);        //  打印 foo
foo = 20

显而易见的是，此时foo代表的是函数，下一行的变量赋值还没有进行，所以打印内容便为foo函数

关于预解析过程，归根结底也就只是开头的那两句话，
愿我的分享可以给大家带来些许的收获

一切能用 Js 实现的，终将都会使用 Js 来实现。