JavaScript中var、let、const三者的区别

本文详细介绍了JavaScript中的var、let和const的区别。var存在变量提升和作用域问题,let解决了变量提升,提供了块级作用域,const用于定义常量,一旦初始化后不能更改。let和const在重置变量和变量提升上有相似限制。
摘要由CSDN通过智能技术生成

var

在ES6发布之前,JavaScript的作用域有全局作用域函数内部作用域两部分,没有块级作用域一说。
块级作用域一般由{ }包括,if 和 for 里的{ }同样为块级作用域。

初学JS最常见的变量修饰符就是var了,var定义的变量区别也主要体现在全局变量和局部变量上。

  • var在函数外部声明的变量作用域为全局,在任何地方都可以访问;
  • var在函数内部声明的变量仅作用在函数内部,如果不用var则是全局变量。
// 函数内部用var修饰,外部不能使用
function methodOne(){
	var a = "Tom";
}
var a = "Tom";
function methondTwo(){
	console.log(a);//var定义全局变量,函数内部能够使用。
}
var定义变量存在的问题
  1. 块级作用域外扔能使用
for(var i = 0; i < 2 ; i++){
	var a = "a";
}
console.log(a);

跳出 for 循环后仍旧能访问变量 a 以及变量 i 。

  1. 循环内变量的过度共享
for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }

上述代码在运行过程中,输出结果为3个3,而非预想的 0 ,1 ,2。
实际运行过程中,循环过程以及三次timeout回调过程均在共享唯一变量 i 。循环结束时,i 为3,第一次timeout调用 i 时,调用的 i 已经为3了。

因此 let 的出现就是为了解决这些问题出现的。

let

相对于var定义变量能跨块进行访问,let定义的变量只能在块作用域 { } 内进行访问,不能跨块进行访问,更不能跨函数进行访问

var i = 3;
for( var i = 0; i < 5 ; i++){
	...
}  
console.log( i );//输出为5
let j = 2; 
for(let j = 0; j < 4 ; j++ ){
	...
}
console.log( j );//输出为2
  • let 声明的变量拥有块级作用域
  • let 声明的全局变量不是全局对象的属性
    在JavaScript中,全局作用域指的是JavaScript环境,而在HTML中,全局作用域针对的window环境。
    var 声明的全局作用域属于window对象,而 let 声明的全局作用域不属于window对象,你不可以通过window.变量名的方式访问这些 let 定义的变量。它们只存在于一个不可见的块的作用域中,这个块理论上是Web页面中运行的所有JS代码的外层块。
  • 形如 for(let x …)的循环在每次迭代过程都为 x 创建新的绑定
  • 变量重置
    • var 声明的变量在任何地方都可以修改
    • 相同作用域或者块级作用域中,不能用 let 关键字重置 var / let 声明的变量
    • 相同作用域或者块级作用域中,不能用 var 来重置 let 声明的变量。
    • let 关键字在不同的作用域或者不同的块级作用域中可以重新声明赋值
var a = 2;
var a = 3;//正确
var x = 2;
let x = 3;//不合法
{
	var a = 2;
	let a = 3;//不合法
}
{
	let b = 2;
	let b = 3;//不合法
}
let c = 3;
var c = 2;//不合法
let d = 2;
{ 
	let d = 3;//合法
}
  • 变量提升
    • var 关键字可以先使用后声明
    • let 关键字定义变量需要先声明再使用

const

const 是用来定义常量的,声明时候必须初始化(所以单纯声明常量是不行的),且初始化后的值不能再进行修改

const a;//不合法的
const b = 2;//合法的

const的本质:const 定义的变量并非常量,并不是不可变,它定义了一个常量引用一个值,即定义的是指向变量的指针使用 const 定义的对象或者数组,其实是可变的,例如可以改变对象的属性。 修改对象属性的过程中并不改变指向对象的指针,所以是合法的。

const car = {color : "red", size: "big"};
car.color = "blue";
car.size = "small";//合法

const 在重置变量和变量提升上的要求与 let 类似:

  • 重置变量
    • 在相同的作用域或块级作用域中,不能使用 const 来重置var、let 以及 const 关键字声明的变量。
    • const 在不同作用域,或不同块级作用域中是可以重新声明赋值的
var a = 2;
const a = 3;//不合法
{
	const b = 4;
	const b = 5;//不合法
	var b = 4;//不合法
	const a = 5;//合法
}
  • 变量提升
    • const 同于 let ,定义变量需要先声明再使用。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值