JavaScript - 运行机制，作用域，作用域链（Scope chain）

参考

https://www.jianshu.com/p/3b5f0cb59344

https://jingyan.baidu.com/article/4f34706e18745be386b56d46.html

https://www.2cto.com/kf/201401/273825.html

https://www.cnblogs.com/zqzjs/p/5497955.html

运行机制

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。即先解析（例如先进行变量、函数的声明提升），后运行。

JavaScript 运行分为两个阶段：- 预解析
- 全局预解析（所有变量和函数声明都会提前；同名的函数和变量函数的优先级高）
- 函数内部预解析（所有的变量、函数和形参都会参与预解析）
- 函数
- 形参
- 普通变量
- 执行先预解析全局作用域，然后执行全局作用域中的代码，在执行全局代码的过程中遇到函数调用就会先进行函数预解析，然后再执行函数内代码。

1. 预解释/预处理，变量提升（Hoisting）

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把声明式函数（JS有赋值式函数/函数表达式var f = function(){}，这个不能被提升）的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，在提升function

打印2次2。因为foo()提升到当前作用域的顶部。

function foo() {
console.log('1');
};foo();function foo() {
console.log('2');
};foo();


JS解释器逐个块（一个<script>就是一个块）解释。先到第一个<script>，f1提升到全局作用域（打印哈哈）。到第二个<script>，最新的function f1的声明提升到全局作用域，当然执行最新的一个声明（打印嘎嘎）。

<script>
function f1() {
console.log("哈哈");
} f1();
</script>
<script>
f1(); function f1() {
console.log("嘎嘎");
}
</script> <script>
f1();
</script>


// 1、-----------------------------------
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
// 3、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}


2. 作用域

在ES5之前JS没有块级作用，有函数作用域。用函数作用域可以避免多个<script>的全局变量污染。先可以认为JS一般没有块级作用域，有函数作用域。

块级作用域: "{}内部声明的变量只能够在{}内部访问到，在{}外部无法访问到其内部声明的变量"

3. 作用域链

当我们在局部作用域中，访问一个变量时，系统首先会在当前作用域中寻找变量var的声明语句，如找到则直接使用。反之，则继续向上一级作用域中寻找var的声明语句，如找到则直接使用，反之，继续向上一级作用域中去寻找…直到全局作用域

例子，尝试注释掉每个f的num

<script> var num = 10; function f1() {
var num = 20; function f2() {
var num = 30; function f3() {
var num = 50;
console.log(num);
} f3();
} f2();
} f1();
</script>


4. 隐式全局变量

在function里，用var定义的变量是局部变量；不用var定义的变量为隐式全局变量

function f1() {
var a;//局部变量
a = 9;
//隐式全局变量
b = 9;
c = 9;
console.log(a);//9
console.log(b);//9
console.log(c);//9
} f1();
console.log(c);// 9
console.log(b);// 9
console.log(a);//报错