Js中var,let,const的区别总结

发布时间 2023-06-04 20:01:47作者: 黄河大道东

因为 let 和 const 是es6的新特性, let 和 const 的出现就是为了解决 var 的各种问题,因此在声明变量时能不用var就不用,强烈建议都用let和const声明变量和常量!

区别

1、var 声明的变量属于 函数作用域,而 let 和 const 声明的变量属于块级作用域;

2、var声明的变量存在 变量提升,而 let 和 const 没有

3、var声明的变量可以 重复声明,而在同一块级作用域,let 变量不能重新声明,const 常量不能修改(对象的属性和方法,数组的内容可以修改)

var 关键字

1、使用 var 声明的变量,这个变量属于当前的函数作用域,如果变量的声明在任何函数外,那么这个变量就属于全局作用域

var a = 1;			// 此处声明的变量a为全局变量
function foo() {
    var a = 2;			// 此处声明的变量a为函数foo的局部变量
    console.log(a);		// 2
}
foo();
console.log(a);			// 1

2、如果在声明变量时,省略 var 的话,该变量就会变成全局变量,如全局作用域中存在该变量,就会更新其值

var a = 1;			// 此处声明的变量a为全局变量
function foo(){
   a = 2;			// 此处因为没有使用var关键字,所以声明的变量a也是全局变量
   console.log(a);		// 2
}
foo();
console.log(a);			// 2

3、var 的声明会在 js 预解析时把 var 的声明提升到当前作用域的最前面,意思是是指无论 var 出现在一个作用域的哪个位置,这个声明都属于当前的整个作用域,在其中到处都可以访问到。只有变量声明才会提升,对变量的初始化赋值并不会提升

console.log(a);			// undefined
var a = 1;
// 上方等价于下方
var a;
console.log(a);			// undefined
a = 1;

let 关键字

1、let 声明的变量具有块作用域的特征。

2、在同一个块级作用域,不能重复声明变量。

function foo(){
    let a = 1;
    let a = 2;				// Uncaught SyntaxError: Identifier 'a' has already been declared
}

3、let 声明的变量不存在变量提升,换一种说法,就是 let 声明存在暂时性死区(TDZ)

let a = 1;
console.log(a);				// 1
try {
    console.log(b);			// Uncaught ReferenceError: b is not defined
}catch (e){
    console.log(e)
}
let b = 2;				// let 声明的变量 b 的声明不会提升到当前作用域的前面
console.log(b)				// 此时暂时性死区消失

const 关键字

1、const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。

const a = 1;
console.log(a);				// 1
a = 2;
console.log(a);				// Uncaught TypeError: Assignment to constant variable.

2、但 const 声明的变量其内部内容是可变的,如:

const obj = {"a": 1, "b": 2};
console.log(obj.a);			// 1
obj.a = 3;
console.log(obj.a);			// 3

准确的说 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。(我的理解是如果是简单数据类型,const声明的变量保存的值就是变量的值,是不可以修改,但如果是复杂数据类型(对象,数组等)const只是保存的是复杂数据类型的引用地址,只是确保引用地址不可变,但地址指向的内容是可以变的)

区分var和let声明变量(作用域区别)

var 声明

for (var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 100)
}

1、此时的 var 声明的变量 i 属于 函数作用域,但又不是在函数里声明的,所以 i 属于 全局变量

2、定时器函数属于异步函数,隔100毫秒才会执行,而这100毫秒的时间内,for循环已经循环结束,全局变量 i 已经为10,最后代码的执行后,会在控制台打印出10个10

ps:主要的原因是var声明的变量的没有块级作用域

3、相当于代码

{
    var i = 0;
    // 第1次循环
    {
        setTimeout(() => {
            // 延时器属于异步函数,不会立即执行,
            // 经过1s后,循环已经结束,全局变量i已经变成10
            console.log(i);
        }, 1000)
        i++
    }
    // 第2次循环
    {
        setTimeout(() => {
            // var声明的变量i没有块级作用域,所以可以访问第一次循环体内的变量i,
            // 同样,1s后,循环已经结束,全局变量i已经变成10
            console.log(i);
        }, 1000)
        i++
    }
// .....后续n次循环
}

let 声明

使用闭包原理解决上例中var声明变量的不具有块级作用域的问题:

闭包原理:内层函数引用外层函数的局部变量,将外层函数的局部变量私有化

for (var i = 1; i <= 5; i++) {
    // 第1轮循环,i=0
    ((i) => {
        // 立即执行函数 在执行后形成一个私有的函数上下文
        // 形参 i 是属于 立即执行函数 的局部变量,第一轮循环时相当于 let i = 0
        // 由于 立即执行函数 的参数 i 被下一级的延时器回调函数上下文所引用,所以会产生闭包,
        // 从而形成块级作用域,保护了每一次循环的i,也就是闭包的特点:变量私有化

        setTimeout(() => {
	// 延时器回调函数执行,也会形成一个私有的函数上下文
	// 由于当前延时器回调函数上下文引用了
            console.log(i);
	// 上一级 立即执行函数 的参数i(立即执行函数的局部变量),
	// 所以此时会产生闭包,立即执行函数的参数i会一直保存在内存中供延时器回调函数使用
        }, 5000)
    })(i) // 把每一轮循环全局的i的值作为实参传递给立即执行函数的私有上下文,第1轮传递的是0,依次类推
}

使用 let 声明的变量具有 块级作用域

for (let i = 0; i < 10; i++) {
    // 每一轮都会形成一个私有的块级作用域,并且有一个私有的变量i,分别存储每一轮循环的索引
    setTimeout(() => {
        console.log(i);
    }, 100)
}

PS:这是因为闭包的机制,但是因为 let 的块作用域是浏览器底层机制实现的,比自己创建的闭包性能要好一些