前言

继续来了解一下ES6,顺便把前段时间留下作用域的坑也填上。

JavaScript中,有一个被称之为作用域(scope)的特性,在之前闭包的文章中提到过,现在来梳理一下。

作用域

作用域是指在程序中定义变量的区域,该位置决定了变量的生命周期。通俗地理解,作用域就是变量与函数的可访问范围,即作用域控制着变量和函数的可见性和生命周期。

ES6之前,JavaScript中有两种作用域,分别叫做全局作用域函数作用域

  • 全局作用域:全局作用域中的对象在代码中的任何地方都能访问,其生命周期伴随着页面的生命周期,页面被关闭才会被销毁。
  • 函数作用域:函数作用域就是在函数内部定义的变量或者函数,并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后,函数内部定义的变量会被销毁。

作用域给我的最大感觉就是隔离变量,在不同作用域的同名变量是不会冲突的。

在ES6中,提出了块级作用域的概念。

  • 块级作用域的特点:在代码块内部定义的变量在外部是访问不到的,并且变量会在该代码块执行完后被销毁掉。

  • 块级作用域形式:就是使用大括号包裹的代码块{},比如函数,判断语句,循环语句,甚至单独的一个{},包裹的也可以看作是一个块级作用域。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // if块
    if(){}
    // while 块
    while(){}
    // 函数块
    function fn(){}
    // for循环块
    for(let i = 0; i < 10; i++){}
    // 单独的{}
    {}
  • 如何让块级作用域生效,ES6给我们提供了两个关键字:let和const

    来看看例子吧

    1
    2
    3
    for(var i = 0; i < 100; i++){
    }
    console.log(i); // 100
    1
    2
    3
    for(let i = 0; i < 100; i++){
    }
    console.log(i); // not defined

    我们来思考一道题:每隔一秒钟,打印出来一个自然数,自然数递增。

    是不是用一个for循环,里面设置好一个定时器?

    是这样?

    1
    2
    3
    4
    5
    for(let i = 0; i<10; i++){
    setTimeout(function(){
    console.log(i)
    },1000*i)
    }

    还是这样?

    1
    2
    3
    4
    5
    for(var i = 0; i<10; i++){
    setTimeout(function(){
    console.log(i)
    },1000*i)
    }

let、const关键字解决var变量提升的问题

之前有说过变量提升的问题,现在来看一下let与const是怎么解决问题的。

首先举一下都会产生什么问题:

  • 变量提升会导致变量值被覆盖

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var a = "张三"
    function showA(){
    console.log(a);
    if(0){
    var a = "李四"
    }
    console.log(a);
    }
    showA() // undefined undefined
  • 该销毁的变量销毁不掉

    1
    2
    3
    for(var i = 0; i<10; i++){
    }
    console.log(i)

那么let、const是如何解决问题的呢?

先来看一下这段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fun(){ 
var a = 11;
let b = 22;
{
let b = 33;
var c = 44;
let d = 55;
console.log(a); // 11
console.log(b); // 33
}
console.log(b); // 22
console.log(c); // 44
console.log(d); // not defined
}
fun()
  • let与const关键字创建的变量是存储在词法环境的,而var创建的变量是存储在变量环境中的,访问变量的时候,先从执行上下文的词法环境中查找,再到变量环境中进行查找。

  • 当块级内部代码执行结束后,内部let与const创建的变量会被销毁。

  • let跟const创建的变量,初始化不提升,创建提升,所以会造成暂时性死区

    来看一下什么是暂时性死区吧

    1
    2
    console.log(a);
    let a = 1;

    这个时候,我们的浏览器报错与之前的not defined就不一样了,它会报 Cannot access 'a' before initialization这个错误,告诉我们在初始化前不能访问a这个变量,这是因为let与const只有创建提升,没有初始化提升,所以造成了这个问题。

再次说明一下变量提升的问题

  • var的创建和初始化被提升,赋值不会被提升
  • let的创建被提升,初始化和赋值不会被提升,所以会有暂时性死区的问题(就是访问不到变量)
  • function的创建、初始化、赋值都会被提升

作用域的特点:是代码编译阶段就决定好的,和函数是如何调用的没有关系

看下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function biqibao() { 
var myName = "海绵宝宝";
let test1 = 100;
if (1) {
let myName = "派大星";
console.log(test);
}
}
function fn() {
var myName = "章鱼哥";
let test = 2;
{
let test = 3;
biqibao();
}
};
var myName = "珊迪";
let myAge = 10;
let test =1;
fn(); // 1

解释一下流程,biqibao函数在fn函数中被调用,要打印test变量,首先查找biqibao函数的内部作用域,没有找到,于是去到全局作用域进行查找,找到了let test = 1这句话,于是,打印1。与fn函数中的let test = 2这句话,一点关系都没有。

这就是在诠释上面作用域特点的那句话。

作用域链

作用域链:当一个函数中使用了某个变量,首先会在自己内部作用域查找,然后再向外部一层一层查找,直到全局作用域,这个链式查找就是作用域链

1
2
3
4
5
6
7
8
9
10
11
let num = 1;
function fn1(){
function fn2(){
function fn3(){
console.log(num);
}
fn3();
}
fn2();
}
fn1(); // 1

fn3要打印num变量,于是他从fn3的函数作用域,找到fn2的函数作用域,再找到fn1的函数作用域,再找到全局作用域,终于找到了num变量,成功将其打印。

有话想说

终于把心心念念的坑填上了一个,了解完作用域与作用域链,再去了解闭包就会轻松很多了,继续努力学习吧。