作用域

作用域：函数或者变量可以起作用的范围

全局变量和局部变量

• 全局变量和全局作用域
  • 在script或者一个独立的js文件中定义的变量叫全局变量
  • 全局变量在任何地方都可以访问到，对应全局作用域
• 局部变量和局部作用域
  • 在任何一个固定代码片段中（函数的内部）定义的变量叫局部变量
  • 局部变量只有在定义该变量的代码片段（函数）中可以访问

1. 不使用var声明的变量是全局变量，不推荐使用。
2. 变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

块级作用域

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
在ES5之前没有块级作用域的的概念

作用域链

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

// 案例1：
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}
// 0级链：f1， num， f3
// 1级链：f2， f4

// 案例2
function f1() {
    var num = 123;
    function f2() {
        console.log(num);  
    }
    f2();
}
var num = 456;
f1(); // 123
// 0级链：f1， num = 456
// 1级链：num = 123， f2
// 2级链：console.log(num)

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，再提升function。

JavaScript的执行过程

// 案例1
var a = 25;
function abc() {
  alert(a); 
  var a = 10;
}
abc();

// 执行过程
var a;
function abc() {
    var a;
    alert(a);
    a = 10;
}
a = 25;
abc();

// 案例2
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

// 执行过程
var a;
function a() {
    console.log('aaaaa');
}
console.log(a);
a = 1;
console.log(a);

变量提升

• 变量提升

  定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。

• 函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

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

// 执行过程
var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
fun();
num = 10;



// 案例2
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
// 执行过程
var a;
function f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1();




// 案例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);
}
// 执行过程
function f1() {
    var a;
    a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);