HelloWorld

Designed & Developed By XingYu Xiao In China
头像 原创自 x先生 #JavaScript 405

浅谈var、let、const

2020-01-22 20:46:38

众所周知,在JavaScript中定义变量的常规方法就是使用 var ,然而,随着ECMA script 6的发布,let和const逐渐进入了开发者们的视野。当有3个关键字可以用来定义变量后,那么就随之迎来了一个问题——生么时候用var,生么时候用let,生么时候用const?

要了解let和const,首先得了解什么是变量提升机制。

JavaScript变量提升机制

变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。

例如,变量提升的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。  

针对变量提升,我先举个栗子:

/* 常规思路,先定义变量,后使用。 */
function hello(){
    alert('hello world')
}

hello();

上面这个代码片段是按照正常思维,即先声明,后调用。接下来,我们看看先调用,会声明会发生什么。

/* 非常规,先调用,后声名变量。(不推荐) */
hello();

function hello(){
    alert('hello world')
}

即使我们在定义这个函数之前调用它,函数仍然可以工作。这就是以为JavaScript中存在的变量提升,如果没有变量提升,第二个代码片段就无法正常执行。变量提升也适用于其他数据类型和变量。变量可以在声明之前进行初始化和使用。但是如果没有初始化,就不能使用它们。

注: 函数和变量相比,会被优先提升。这意味着函数会被提升到更靠前的位置。

通常,使用var定义的变量是存在变量提升的,而使用let和const声明的变量在声明之前,该变量是不可用的。这主要是为了减少发生意料之外的错误。

var、let和const的作用域

首先,JavaScript的作用域常见的有,全局作用域,函数作用域和块级作用域(当然还有其它的作用域,但在本文中不过多阐述),由于var声明的变量具备变量提升机制,所以,由var声明的全局变量,会被挂载到window上,而let和const不会,因为let和const属于块级作用域。

let和const的区别

let和const两者都同属块级作用域,作用也基本一致,但是,const常常用来声明常量。例如

const message = 'hello world';

使用const声明的变量,往往是我们不希望去改变的。如果你试图改变一个使用const声明的变量的值,那么你会遇到控制台输出:

const num = 1;
num = num + 1;
console.log(num);
//Uncaught TypeError:Assignment to constant variable(未知类型错误:将变量赋值给常数)

总而言之

使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;

使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;

使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。  

赞 20

收藏

分享

本作品系 原创,作者:x先生

原文链接:https://www.shiniest.cn/blog/article/60

文本版权:本文版权归作者所有

转载请署名并注明出处 (禁止商业使用)


0条评论


0/200
    加载更多 正在加载 没有更多了...... 暂无数据

    相关文章

    目录
      来自x先生的话
      暂无数据
      实时天气

      岳麓 更新时间:23:26

      8℃

      • 7℃

        体感温度

      • 北风0级

        风向

      • 87%

        相对湿度

      • 0.0mm

        降水量

      • 1019hPa

        大气压强

      • 5km

        能见度

      数据来源:QWeather
      热门标签
      本功能暂未开发