轻松了解var,let,const的区别!!

315 阅读3分钟

引言

什么是es5?

ES5即ECMAScript 5,又称ECMAScript 2009,是ECMAScript的第五次修订,可以说是JavaScript比较重要的版本,于2009年正式发布

es5变量声明的方式:

  • var在解析代码时,会先读取当前作用域中的所有var--->全局作用域
  • function

什么是es6?

ES6 也称为 ECMAScript 6 和 ECMAScript 2015。一些人把它称作 JavaScript 6。发行于2015年,也是JavaScript比较重要的一个版本。

es6变量声明的方式:(引入了let和const)

  • let允许我们使用块作用域声明变量--->块级作用域
  • const允许我们声明常量(具有常量值的 JavaScript 变量),常量类似于let变量,但不能更改值

比较var、let、const

1.先了解一下什么叫作用域?

作用域就相当于一个独立的地盘,不会让变量外泄出去。而作用域最大的用处就是隔离变量,使得不同作用域下的同名变量不会有冲突

1.1 全局作用域

即在代码中任何地方都能访问到的对象--->全局作用域

  • 位于最外层函数和在最外层函数外面定义的变量拥有全局作用域
var outVar = "最外层变量";//最外层变量
function outFun() {//最外层函数
    var inVar = "内层变量";
}
1.2 局部作用域

在函数内部声明的对象--->函数作用域

指定块以外的作用域无法被访问的--->块级作用域

  • 位于函数内部和块内部的变量拥有局部作用域
function Fun(){//块语句(大括号‘{}’中间的语句),但是if和switch不算
    var nameWest = "西西里"
    function introduce(){
        console.log(nameWest);
    }
    introduce();
}
console.log(nameWest);//无法访问
introduce();//无法访问

{
    let nameEast = "东东里"
}
console.log(nameEast);//无法访问

2.比较let和var(const比较特殊一点,后面单独讲解)

ES6之前的JavaScript,没有块级作用域,只有全局作用域和函数作用域。而ES6的到来,为我们提供了块级作用域,可通过letconst来实现。

不同处:

1)var函数作用域(伪全局作用域) ,而let块级作用域,在块级作用域内声明的变量无法在块级作用域外面使用(看上面解释作用域)

2)let不能被重新定义,但是var可以

let a = 1
let a = "hi"//报错
console.log(a)
var b = 1
var b = "hehe"
console.log(b)//输出hehe

3.const(constant variable)

JavaScript的const与其他语言不同

如果const声明一个只读的常量,一旦声明,常量的值就不能改变,但是这就意味着const是不能改变的吗?当然不是。

特点:

const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动

1)对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量(eg:字符串,数字,布尔值,null,undefined

2)对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变(eg:对象,数组

const Person = {
   name:"西西里",
   hobbies:["打游戏"]
};
// 为 Person的hobbies 添加一个属性,可以成功
Person.hobbies.push("睡觉")
// 将 Person 指向另一个对象,就会报错
Person = {}; //报错

其余情况,constlet一致


总结

我们粗略的介绍了一下ES5和ES6以及其声明变量的方式,讲解了一下作用域的概念,比较了var,let,const,帮助大家初步了解其区别,但是更深层次的细节还请各位自行研究。

--欢迎各位点赞、收藏、关注,如果觉得有收获或者需要改进的地方,希望评论在下方,不定期更新

0bae-hcffhsw0416753.gif