作用域说明

在es6之前我们我们声明一个变量用var如:

var a = 1;
var arr = [1,2,3];
...

es6之前呢javascript没有块级作用域,如何来理解呢:就是在代码块里声明的变量会“变量提升”至就近的函数作用域顶部或全局当中。如我们熟悉的for循环:

for( var i=0; i<10; i++){
    console.log(i)
}
# 提升到全局,相当于
var i;
for(i=0; i<10; i++){
    console.log(i)
}

function test (){
    .....
    for( var i=0; i<10; i++){
        console.log(i)
    }
}
# 提升到函数作用域顶部,相当于
function test (){
    var i;
    .....
    for(i=0; i<10; i++){
        console.log(i)
    }
}

在es6中给出了块级作用域的概念:{}所包涵的代码块就是一个作用域。同时又给出了另外两个变量声明的关键字:let和const。

let声明变量

let与var一样,也是用来声明变量的,但它有着更好的作用域规则。来看几个栗子:

function test1(){
    for(var i=1;i<3;i++){
        console.log(i);
    }
    console.log(i); // 3
}
test1();

function test2(){
    for(let i=1;i<3;i++){
        console.log(i);
    }
    console.log(i); // 报错了
}
test2();

执行test1的时候,由于变量提升了所已外面的log能找到i,而test2用的let声明的变量,在for循环的代码块内生效,for循环结束后变量被销毁,被垃圾回收机制回收。所以会报错。

let另外一个值得注意的是,不能重复声明变量:

let a = 1;
let a = 3; // 报错 Uncaught SyntaxError: Identifier 'a' has already been declared

const声明变量

与let不同之处在于,const声明的变量只可以在声明时赋值,不可随意修改,否则会导致语法错误。

const PI=3.1415926; //ok

const G;
G = 9.8; // SyntaxError: Missing initializer in const declaration

const MODIFY = 1;
MODIFY = 2; // TypeError: Assignment to constant variable.

上面可以看到声明的时候必须赋值否则回报没有初始化的错误,已赋值的常量再次赋值也会报错。
我们怎么理解下面这段代码呢

function test(){
  const obj={
    name: 'lilei'
  }
  obj.age=20;
  console.log(obj); // {name: "lilei", age: 20}
}
test()

const声明的变量不是不能修改吗,这里怎么可以修改成功呢,我们知道对象是引用类型,我们修改的是值,而不是其引用,而const声明的对象类型的变量保存的是其引用,所以是不矛盾的。


虎子哥
30 声望2 粉丝

前端开发