JS中全局作用域、局部作用域、块作用域和脚本作用域的用法和区别

作用域-scope

摘要-什么是作用域?

①作用域就是一个变量或者函数的有效作用范围，在JS中作用域一共有四种，分别是全局作用域(Global)、局部作用域(Local)、块作用域(Block)、脚本作用域(Script)
②变量声明的三种方式var、let、const

1、全局作用域 Global

用 var 在全局（函数外部）声明的所有变量，的作用范围为全局作用域，即：网页中所有的脚本和函数均可使用
全局作用域是window的属性，可以通过 window.变量名 去调用它

//method1:
var a = '我是global variable！';

//method2:
{
    var aa = '全局作用域！'; 
}

//全局作用域可以通过window来调用
console.log( window.a );//result: 全局作用域！

//以上；两种方式用var声明的变量的作用范围为全局作用域

此时上面声明的变量 ‘a’ 和 ‘aa’ 在函数内部也可以使用

function fun(){
    return a=100;
}
//假如变量a在全局未声明，则在函数fun里会自动提升到全局作用域，即为全局变量

2、脚本作用域 Script

• 脚本作用域是针对于 let 和const声明的变量

• 在函数外部用 let 或者 const 声明的变量，的作用范围为script，也就是当前脚本内有效，跟var的全局变量差不多

let a = 100;
const b = 99;
var c = 60;
console.log(a, b);//result: 100 99

//let和const虽然也是在函数外部声明的，但是它不是window属性
console.log( window.a );//报错 ‘a is not defined’
console.log( window.c );//result: 60

3、局部作用域 Local

**在函数中用 var 、let 、const 声明的所有变量，都是函数的局部变量，作用范围为局部作用域，即：只能在函数内部使用，函数外部使用是不行的。 **

ex1:
function fun(){
    var a = 99;
    console.log(a);//result: 99
}
fun();//调用函数
console.log(a);//result: 报错！‘a is not defined’ - a是未定义的

ex2:
var a = 100;
function fun(){
    var a = 99;
    console.log( a );//result: 99
}
fun();
console.log( a );//result: 100

ex3:
function fun(){
    let a = 99;
    console.log( a );//result: 99
}
fun();
console.log( a );//result: 报错！a is not defined

4、块级作用域 Block

ECMAScript 6(简称ES 6)中新增了块级作用域

• 在 ES 6 之前，是没有块级作用域的概念的。
• ES 6 可以使用 let 关键字或者 const 关键字来实现块级作用域。
• let 或 const声明的变量只在 let 或 const命令所在的代码块 {} 内有效，在 {} 之外不能访问。

ES6中新出的作用域：块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。但函数funtion(){ }里面的{ }不属于块级作用域
ex1:
{
    let a = 100;
    console.log(b);//result: 100
}
console.log(a);//result: 报错！‘a is not defined’  a是未定义的

//但是函数function里面的{ }不属于块级作用域

ex2:
if(true){
    let a = 100;
    console.log(a);//result: 100
}
console.log(a);//result: 报错！‘a is not defined’

ex3:
for(let a=100; a<101; a++){
    console.log(a);//result: 100
}
console.log(a);//result: 报错！‘a is not defined’

5、总结 - 作用域（scope）

下面这张图可以帮你更好的去理解，全局作用域(Global)、局部作用域(Local)、块作用域(Block)、脚本作用域(Script)、

		var a = '我是global variable！'; //全局变量
        let gender = 'female'; //脚本作用域
        const sex = 'male'; //脚本作用域
        {
            var aa = 9999; //全局变量
        }
        function fun() {
            var b = 20;	//局部变量
            let c = 30;	// 局部变量
            const e = 50;//局部变量
            console.log(c, b);
            if (!0) {
                let v3 = 0;	//块作用域
                var v4 = 10; //局部变量
                debugger;
            }
            return this.a;//this指向window
        }
        console.log(fun());
        console.log(gender);