let 和 var的区别

2,003 阅读6分钟

let和var的区别

var = [];
for(var i = 0;i<10;i++){
    a[i]= function(){
        console.log(i);
    }
}
arr[6]();   //10

上面代码中,变量i是var申明的,在全局范围内都有效,所以全局只有一个变量i,每一次循环,变量的值都会发生改变,而循环内被赋值给数组a的function在运行时,会通过闭包读到这同一个变量i,导致最后一轮输出最后一轮i的值,就是10

而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6

var = [];
for(let i = 0;i<10;i++){
    a[i]= function(){
        console.log(i);
    }
}
arr[6]();   //6

上面代码中,变量i是let声明的,当前的i只在本轮循环中有效,所以每一次循环中的i都是一个新的变量,所以最后输出的是6,。 另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环内部是一个单独子作用域。

for(let i = 0;i<3;i++){
    let i ='abc';
    console.log(i)
}
//abc
//abc
//abc

不存在变量提升

var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为underfined。为了纠正这种现象,let命令改变了语法行为,他所声明的变量一定要在声明后使用,否则报错

//var情况
console.log(foo);   //输出underfined
var foo;

//let情况
console.log(bar);    //报错
let bar ;

暂时性死区

只要块级作用域内存在let命令,他所声明的变量就绑定(binding)这个区域,不在受外部的影响。

var tmp = 123;
if(true){
    tmp = 'abc';   //报错
    let tmp;
}

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const变量,从一开始就形成了封闭作用域,凡是在声明之前使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上叫做“暂时性死区”

ES6规定暂时性死区和let、const语句不存在变量提升

不允许重复声明

let不允许在相同作用域内重复声明同一个变量

//报错
function(){
    let a =10;
    var a =1;
}

//报错
function(){
    let a = 10;
    let a = 1;
}

因此,不能在函数内部重新声明参数

function func(arg){
   let arg ;   //报错
]

function func(arg){
   {
    let arg;  //不报错
   }
}

块级作用域

ES5只有全局作用域和函数作用域,没有块级作用域

第一种场景,内层变量可能会覆盖外层变量

var tmp = new Data();

function f(){
    console.log(tmp);
    if(false){
        var tmp = 'hello world'
    }
}
f();   //undefined

上面代码的意思是,if代码块的外部使用外层的tmp变量,内层使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量

第二种场景,用来计数的循环变量泄漏为全局变量

var s = 'hello';
for(var i = 0;i<s.length;i++){
    console.log(s[i]);
}
console.log(i);   //5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄漏成了全局变量

ES6的块级作用域

let实际上是为javascript新增了块级作用域

function f1(){
    let n = 5;
    if(true){
        let n = 10
    }
    console.loga(n)   //5
}

上面的函数有两个代码块,都声明了变量n,运行后输出5,。这表明外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出值就是10. ES6允许块级作用域的任意嵌套

{{{{let insane = 'hello world'}}}}

上面代码使用了四层的块级作用域。外层作用域无法读取内层作用域的变量

{{{
    {let insane = 'hello world'}
    console.log(insane); //报错
}}}

内层作用域可以定义外层作用域的同名变量

{{{
    let insane = 'hello world'
    {let insane = 'hello world'}
}}}

块级作用域的出现,实际上使得获得广泛应用的立即执行函数不再必要了

块级作用域与函数声明

function f(){
    console.log('i am outside')
}
(function(){
    if(false){
        functon f(){
            console.log('i an inside')
        }
    }
    f();
}())

上面代码中,会得到“i am inside”,ES6就完全不一样了,会得到“i am outside”.因为块级作用域内声明的函数类似let,对作用域之外没有影响。

另外,还有一个需要注意的地方,考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数,如果确实需要,也应该写成函数表达式,而不是函数声明。

//函数声明语句
{
    let a = 'secret';
    function f(){
        return a;
    }
}
//函数表达式
{
    let a = 'secret';
    let f = function(){
        return a;
    }
}

do表达式

本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值

{
    let f = f();
    t = t*t+1;
}

上面代码中,块级作用域将两个语句分装在一起。但是,在块级作用域以外,没有办法得到t的值,因为块级作用域不返回值,除非t是全局变量。

do表达式,可以返回值

let x = do{
   let t = f();
   t * t + 1;
]

上面代码中,变量x会得到整个块级作用域的返回值

const命令

const命令声明一个只读的常量,一旦声明,常亮的值就不能改变

const a = 200;
a     //200

a =600;   //报错

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

const foo  
//报错

const的作用域与let相同,只在声明的块级作用域内有效

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用

const声明的常量,也与let一样不可重复声明

var message = 'hello';
let age = 25;

//以下两行都会报错
const message = 'goodbye';
const age = 30;

常量foo储存的是一个地址,这个地址指向一个对象,不可变的是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性

const foo();
//为foo添加一个属性,可以添加
foo.prop = 123;
foo.prop   //123

//将foo指向另一个对象,就会报错
foo ={]     //报错

下面是另一个例子

const a = [];
a.push('hello')   //可执行
a.length = 0;     //可执行
a = ['dave']      //报错

上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错

如果真的想将对象冻结,应该使用 Object.freeze方法

const foo = Object.freeze({});
//常规模式下,下面一行不起作用
//严格模式下,改行会报错
foo.prop = 123;