p2-30-js中作用域及作用域链p

作用域

• 作用域，就是变量起作用的区域（范围）。或者说，js代码执行时，查找变量的范围。

ES5及其以前：

• JS的变量作用域分为：全局作用域和函数作用域（局部作用域）
• 在google的控制台里，可以看到

var a1=100;

function fn1(){
    var a2 =200;
    console.log("a2",a2);
    if(true){
        var a3=300;
        console.log("a3",a3);
    }
}


function fn2(){
    var fn2a2 =200;
    console.log("fn2a2",fn2a2);
    if(true){
        var fn2a3=300;
        console.log("fn2a3",fn2a3);
    }
}

console.log("a1",a1);

fn1();

console.log("a1",a1);

fn2();

• 用var 声明的变量a1是全局变量，是window对象的属性
• 用var声明的变量a2和a3，都是local的作用域

ES6开始有了let关键字后：

• 变量有了块级作用域，所谓块级作用域中的“块”，表示用 一对花括号括起来的一块代码。

• 不管是全局作用域，还是函数作用域，其实都是块级作用域，无非是大块还是小块的问题。

let a1=100;

function fn1(){
    let a2 =200;
    console.log("a2",a2);
    if(true){
        let a3=300;
        console.log("a3",a3);
        if(true){
            let a4=400;
        console.log("a4",a4);
        }
    }
}

console.log("a1",a1);
fn1();

• 在google的控制台里，我们可以看到，有四个作用域（scope），分别是global（全局）、script（脚本）、local（局部）、block（块级）。

  • Global作用域里的内容全是window对象的属性。
  • Script里是v1；
  • Local（function f1）里是v2
  • Block里是v3

作用域链

• 作用域链是指：当js编译器在寻找变量时，先在最近的作用域（花括号）里找，如果找不到，则抄上一级作用域（花括号）里找，依次类推，直到找到或者找不到为止。这就是作用域链。
  

案例

• Var定义的全局变量是window的属性，let定义定义的全局变量不是window的属性？
  

• 可以看到：

  • 用var声明的a0，是window对象的属性
  • 用let声明的v1，属于script的作用域
  • 用let声明的v2，属于local的作用域
  • 用let声明的v3，属于block作用域