ES6中let，const，var讲解与区别简单分析(第一弹：了解知识点)-CSDN博客

本文链接：https://blog.csdn.net/YX0711/article/details/125230820

文章目录

使用let,const关键字

ES6中新增加了两种声明方式，let和const，解决了声明的一些问题，同时也引进了块级作用域的概念。

块级作用域

在ES6以前是没有块级作用域的概念的，有的是函数作用域和全局作用域，块级作用域是以花括号来区分的例如:

 		//块级作用域
		{
            let color="yellow";
            console.log(color);//yellow
        }
         //console.log(color);报错
        if(true){
            let color="black";
        }

块级作用域只在这个大括号里边有效，离开之后就会把变量销毁。

var关键字声明

使用var关键字可以声明一个变量，可以为其初始化赋值也可以不赋值，初始化赋值其可以是任意类型,不赋值是其为默认值undefined，var声明的一般为全局作用域，并添加为window的属性(函数里边声明的除外其为函数作用域)。同时var关键字还有变量提升的效果,具体情况可以看一下执行上下文

        var color="red";//声明的是全局变量
        function fn(){
            var color="blue";//函数作用域
            console.log(color);//blue
        }
        fn();
        console.log(color);//red
        //console.log(window.color);//red，全局里边var声明的关键字最后会绑定为window的属性

在函数里边我们定义了一个和外部相同的变量:color,但是这两个变量输出结果互不影响，这是因为在函数里边var声明的变量作用域为函数作用域，只在这个函数里边有效，而外部的变量为全局作用域，在整个作用域都有效。

let关键字

作用域

let声明的变量是块级作用域,同时let声明最顶部的变量并不会绑定为window的属性，这个会在下边的进行演示

		if(true){
            let color="red";
            console.log(color);//red
        }
        console.log(color);//报错

暂时性死区

let声明的变量不存在变量提升，也就是我们不能再声明前输出它

		console.log(color);//报错
        let color="red";

for循环里边的let

有了let关键字，用的最方便的就是for循环我们看一下使用var关键字声明的for循环

	for(var i=0;i<5;i++){
        setTimeout(()=>{
            console.log("for循环里边的i:"+i);//5
        },0)
       }
       console.log("for循环外边的i:"+i);//5

这里的i的值都是5，是因为这里的i是全局变量，而终止循环时i的值是5。
let声明的for循环

for(let i=0;i<5;i++){
        setTimeout(()=>{
            console.log("for循环里边的i:"+i);//依次输出0,1,2,3,4
        },0)
       }
       console.log("for循环外边的i:"+i);//报错

将for循环里边的var改为let结果就有很大的区别，是因为let声明的变量是块级作用域，只在这个区域有效。

补充

let不允许再同一个块级作用域中声明同一个变量，否则会报错

		let color="red"
        let color="red"
        var color="red"

const关键字

const关键字与let基本一致，不同的是const声明变量时必须初始化，也不允许重复声明且其值不能改变(如果是一个对象或者数组，可以修改对象和数组里边的值)

		const color="red";
       	//color="blue"//报错
       	const obj={};
       	obj.color="blue";//可以修改对象里边的属性
       	//obj={};//报错

拓展

上边说了这么多，相信大家对这三个关键字有了一个简单的了解，但是var与let和const的区别有一点就是var声明的变量我们可以看到其是window的属性，那么let和const声明的变量又到了哪里呢？

 		var a_color1="red";
        let color2="yellow";
        const color3="blue";

我们可以对上边的代码打一个断点进行查看:
在这里插入图片描述
我们可以发现var声明的全局变量是给window绑定了，而顶部使用let，const声明的变量是绑定给其同级的script，但是我们并不能像window,变量名的方式通过script.变量名去访问它。

原因：

在ES6中，全局变量从全局对象window中脱离，但是为了保持兼容性，旧的不变，所以var声明的全局变量和function声明的函数依然绑定为window的属性，我们可以通过window.属性名来访问，而let、const声明的全局变量在window对象上看不到，在script中形成了一个块级作用域，不能通过script.变量名的方式访问。