JavaScript基础--作用域

1. 作用域

所谓作用域就是变量或函数的作用范围，即作用域控制着变量和函数的可见性和生命周期。其目的是为了提高程序的可靠性，更重要的是减少命名冲突。

JS中有两种作用域：全局作用域和局部作用域。

1.1 全局作用域

直接编写在<script>标签中的代码或者一个单独的JS文件，都是全局作用域。全局作用域在页面打开时创建，只有在页面关闭时才可销毁。

<script>
// 以下代码直接在<script>标签中编写是全局作用域
var num = 10;
console.log(num);
</script>

1.2 局部作用域

每一个函数就是一个局部作用域，所以局部作用域也可称为函数作用域。

特点：

① 局部作用域中可以访问全局作用域中的变量，但全局作用域中无法访问局部作用域的变量

② 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁

③ 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的

④ 当在函数作用域操作一个变量时，他会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中也没有找到，则会报错

<script>
function fn() {
  // 函数内部的代码块是局部作用域
  var num = 20;
  console.log(num);
}
fn();
</script>

2. 变量分类

在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量 和 局部变量

2.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

特点：

① 全局变量在代码的任何位置都可以使用

② 在全局作用域下声明的变量 就是全局变量

③ ☆☆☆如果在函数内部没有声明直接赋值的变量也属于全局变量

<script>
var num = 10; // num就是一个全局变量
console.log(num);

function fn() {
  console.log(num);  // 全局变量任何位置都可以使用
}
fn();
</script>

2.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

特点：

① 局部变量只能在函数内部使用

② 在函数内部声明的变量是局部变量

③ 函数的形参实际上就是局部变量

<script>
function fun() {
   var num1 = 10;   // num1是局部变量 只能在函数内部使用
   num2 = 20;      // 没有声明直接赋值的变量属于全局变量
}
fun();
console.log(num1);  // 报错，因为num1是局部变量，只可在函数内部使用
console.log(num2);  // 20，因为num2是全局变量
</script>

2.3 全局变量和局部变量的区别

（1）全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

（2）局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此比较节省内存空间。

3. 作用域链

所谓作用域链，指的是：内部函数访问外部函数的变量，采取的是链式查找的方式（就近原则）来决定取哪个值，这种结构我们称为作用域链。

var num = 10;  
function fn() { //外部函数
    var num = 20;

    function fun() { //内部函数
        console.log(num);  // 20 
// 因为内部函数本身没有num变量，所以会往上找，先到外部函数，外部函数有num变量，则会使用这个变量的值，所以输出的是20.
    }
    fun();
}
fn();

var num = 10;  
function fn() { //外部函数
    function fun() { //内部函数
        console.log(num);  // 10 
// 因为内部函数本身没有num变量，所以会往上找，先到外部函数，外部函数也没有num变量，则会继续向上找，找到全局变量num，然后使用这个变量的值，所以输出的是10.
    }
    fun();
}
fn();

4. 预解析

我们js引擎（解释器/解析器）运行js 分为两步：1.预解析   2.代码执行

1.预解析是指： js引擎会把js里面所有的var 还有 function 提升到当前作用域的最前面

2. 代码执行 按照代码书写的顺序从上往下执行

预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）

4.1 变量预解析（变量提升）

 变量提升 就是把所有变量提升到当前的作用域最前面  ★★但是不提升赋值操作。注意只有var声明的变量才有变量提升功能，let和const不具备此效用。

console.log(num); //结果是undefined  ，是因为进行了变量提升
var num = 10;
// 相对于执行了以下代码
var num;
console.log(num);  // 只声明未赋值的变量是undefined
num = 10;

4.2 函数预解析（函数提升）

函数提升 就是把所有函数声明提升到当前作用域最前面  ★★不调用函数。注意函数表达式只能在声明后调用，否则会报错。

fn(); //使用函数关键词声明函数时，调用函数可写在前也可在后 ，是因为进行了函数提升
function fn() {
    console.log(11);
}
// 相当于执行了以下代码
function fn() {
    console.log(11);
}
fn();
 

fun(); //使用函数表达式时，调用函数在前，则会报错，是因为函数表达式没有函数提升作用
var fun = function() {  // 此处的fun是个变量
        console.log(22);
    }
// 相当于执行了以下代码
var fun;  // fun是变量，所以进行变量提升
fun(); 
fun = function() {
    console.log(22);
}

4.3 案例操作

var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}
// 相当于执行了以下操作
var num;
function fun() {
    var num;
    console.log(num);  
// undefined，因为当前作用域有num变量，但是在打印之前只声明未赋值故为初始值undefined
    num = 20;
}
num = 10;
fun();

f2();
console.log(c);
console.log(b);
console.log(a);
function f2() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 相当于执行了以下操作
function f2() {
    // var a = b = c = 9;
    // 相当于 var a = 9; b = 9; c = 9;
    var a;
    a = 9;
    b = 9; // 函数内没有声明直接赋值是全局变量
    c = 9; // 函数内没有声明直接赋值是全局变量
    console.log(a);  // 9
    console.log(b);  // 9
    console.log(c);  // 9
}
f2();
console.log(c);   // 9
console.log(b);   // 9
console.log(a);   // 报错，是因为a是局部变量，不可在函数外部使用