JS 作用域（ 全局作用域 函数作用域 块作用域）

目录

2.1全局作用域

 2.2函数作用域

2.3 块作用域

1.var关键字

 2.let关键字

3.const关键字

4.重新声明

---

作用域：指一个变量的作用范围，在js中共有三种作用域，全局作用域 函数作用域 块作用域。

2.1全局作用域

- 直接编写在Script标签中的JS代码，都在全局作用域

- 全局作用域在页面打开时创建,页面关闭时销毁

- 在全局作用域中有一个全局对象window，代表一个浏览器窗口，由浏览器创建，可以直接使用

- 在全局作用域中：

        创建的变量都会作为window对象的属性保存

        创建的函数都会作为window对象的方法保存

- 全局作用域中的变量都是全局变量，在页面的任意部分都可以访问

------------------------------------附-全局作用域中变量声明和函数声明--------------------------------------------

  1.变量声明提前

        使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），

        若未使用var关键字声明变量，则变量不会被提前声明

 console.log("a="+a);                        //可显示，未被赋值

 console.log("b="+b);                       //不显示，报错

 var a=10;

  b  =20;

2.函数声明提前

        使用函数声明形式创建的函数,function 函数名( ){ },会在所有代码执行之前就被创建，可以在创建前就调用函数

        使用函数表达式创建的函数，var xx= function( ){ }，不会被声明提前，不能在创建前调用函数

    hi();

    hello();

    function hi() {                                  //函数声明

        console.log("你好！");

    }

    hello = function () {                        //函数表达式

        console.log("你好呀");

    }      

---

 2.2函数作用域

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

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

- 在函数作用域中可以访问到全局作用域的变量

- 在全局作用域中访问不到函数作用域中的变量

var a=10;                      //全局作用域变量

function fun(){

    var b=20;                //函数作用域变量

    console.log("a="+a);

}

fun();

console.log("b="+b);

- 当在函数作用域操作一个变量时，它会现在自身作用域中寻找，如果有就直接使用，如果没有，则向上一级作用域中寻找，如果全局作用域中依然没有找到，则会报错ReferenceError

- 在函数中要访问全局变量可以使用window对象

    var a = 10;                                            //全局变量

    function fun() {

        var a = 20;                                     //fun2()函数的上一级作用域，获取到a的值

        function fun2() {

            console.log(a);                              //访问上一级作用域

            console.log(window.a);                //访问全局变量

        }

        fun2();

    }

    fun();

    console.log("b=" + b);

 -------------------------------------附------函数作用域中的函数声明-------------------------------------------------

使用var关键字声明的变量，会在函数中所有的代码执行之前被声明，

不使用var声明的变量，都会成为全局变量

    var c = 33;

    function fun5() {

        console.log("c=" + c);      //向上一级寻找c变量

        c = 10;

    }

    fun5();

    console.log("c=" + c);  //在全局中输出c

    var e = 23;

    function fun6(e) {      //定义形参e 相当于在函数作用域中声明了变量

        alert(e);

    }

    fun6();

    //fun6(10);                        传入实参，此时输出10

         

2.3 块作用域

1.var关键字

1. 通过 var 关键词声明的变量没有块作用域，在块 { } 内声明的变量可以从块之外进行访问。
2. 重新声明变量，使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量

//（1）
{ 
  var x = 10; 
}
// 此处可以使用 x


//（2）
var x = 10;    // 此处 x 为 10
{ 
  var x = 6； // 此处 x 为 6
}
// 此处 x 为 6

 2.let关键字

1. 在 ES2015 之前，JavaScript 是没有块作用域的，可以使用 let 关键词声明拥有块作用域的变量，在块 {} 内声明的变量无法从块外访问

2. 使用 let 关键字重新声明变量可以解决这个问题，在块中重新声明变量不会重新声明块外的变量

//（1）
{ 
  let x = 10;
}
// 此处不可以使用 x

//(2)
var x = 10;    // 此处 x 为 10
{ 
  let x = 6;    // 此处 x 为 6
}
// 此处 x 为 10

3.const关键字

1. JavaScript const 变量必须在声明时赋值，不能重新赋值
2. const 不是真正的常数，它定义了对值的常量引用，不能更改常量原始值，但可以更改常量对象的属性

   1. 原始值，如果我们将一个原始值赋给常量，我们就不能改变原始值

      const PI = 3.141592653589793;
      PI = 3.14;      // 会出错
      PI = PI + 10;   // 也会出错

   2. 可以更改常量对象的属性：但是无法重新为常量对象赋值

      // 您可以创建 const 对象：
      const car = {type:"porsche", model:"911", color:"Black"};
      
      // 您可以更改属性：
      car.color = "White";
      
      // 您可以添加属性：
      car.owner = "Bill";
      
      
      const car = {type:"porsche", model:"911", color:"Black"};
      car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

4.重新声明

1. var 程序任何位置均可使用var重新声明JavaScript 变量
2. let  相同作用域/块中，不允许重新声明，不同作用域/块中，允许重新声明。
   1. 在相同的作用域，或在相同的块中，不允许通过 let 重新声明一个 var 变量/ let变量，也不允许通过通过 var 重新声明一个 let 变量
   2. 在不同的作用域或块中，通过 let 重新声明变量是允许的：
3. const ：
   1. 在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const/为已有的 const 变量重新声明声明或赋值是不允许的
   2. 在另外的作用域或块中重新声明 const 是允许的：