[预解析]关于JavaScript运行机制

先来看几个例子（运行结果在代码段注释中）

1.

console.log(a); // 报错: a is not defined

2.

console.log(b); //undefined
var b = 10;

3.

//函数调用写在函数上下都可正常调用
fn();
function fn(){
    console.log(11);
}

4.

fun();//报错: fun is not a function
var fun = function() {
    console.log(22);
}

以上代码的书写格式在一些语言中是无法运行的，JavaScript能够正常运行的机制在于JavaScript引擎运行js时分为两步 ： 预解析 和 代码运行

预解析

预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升) 

              (1)变量提升  就是把所有变量声明提升到当前作用域最前面 不提升赋值操作

              (2)函数提升  就是把所有函数声明提升到当前作用域的最前面 不调用函数

下面是几个预解析的案例

1.

var num = 10;
fun();
function fun(){
    console.log(num);//undefined
    var num = 20;
}

以上代码相当于

var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

2.

var num = 10;
function fn() {
    console.log(num);//undefined
    var num = 20;
    console.log(num);//20
}
fn();

以上代码相当于

var num;
function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
fn();

3.

var a = 10;
f1();
function f1() {
    var b = 9;
    console.log(a);//undefined
    console.log(b);//9
    var a = '123';
}

以上代码相当于

var a;
function f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
f1();

4.

f1();
console.log(c);//9
console.log(b);//9
console.log(a);//报错 a is not defined
function f1() {
    var a = b = c = 9;
    console.log(a);//9
    console.log(b);//9
    console.log(c);//9
}

以上代码相当于

function f1() {
    var a = 9; b = 9; c = 9; //b和c直接赋值，没有var,因此b和c是全局变量
    console.log(a);//9
    console.log(b);//9
    console.log(c);//9
}
f1();
console.log(c);//9
console.log(b);//9
console.log(a);//报错 a is not defined

注意最后一个案例中 var a = b = c = 9; 相当于 var a = 9; b = 9; c = 9; a是作为f1()中的局部变量，b和c是作为全局变量

 

注意点

变量提升和函数提升之间的先后则按照代码中的先后顺序依次排列。

这些案例也告诉我们，调用变量前别忘了先赋值，还有就是需要区别清什么是全局变量什么是局部变量