一、var

在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量

注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象

var a = 10;
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况

console.log(a) // undefined
var a = 20

在编译阶段,编译器会将其变成以下执行

var a
console.log(a)
a = 20

使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明

var a = 20
var a = 30
console.log(a) // 30

在函数中使用使用var声明变量时候,该变量是局部的

var a = 20
function change(){
var a = 30
}
change()
console.log(a) // 20

而如果在函数内不使用var,该变量是全局的

var a = 20
function change(){
a = 30
}
change()
console.log(a) // 30

二、let

letES6新增的命令,用来声明变量

用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效

{
let a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

这表示在声明它之前,变量a是不存在的,这时如果用到它,就会抛出一个错误

只要块级作用域内存在let命令,这个区域就不再受外部影响

var a = 123
if (true) {
a = 'abc' // ReferenceError
let a;
}

使用let声明变量前,该变量都不可用,也就是大家常说的“暂时性死区”

最后,let不允许在相同作用域中重复声明

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared

注意的是相同作用域,下面这种情况是不会报错的

let a = 20
{
let a = 30
}

因此,我们不能在函数内部重新声明参数

function func(arg) {
let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

三、const

const声明一个只读的常量,一旦声明,常量的值就不能改变

const a = 1
a = 3
// TypeError: Assignment to constant variable.

这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

const a;
// SyntaxError: Missing initializer in const declaration

如果之前用varlet声明过变量,再用const声明同样会报错

var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

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

对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量

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

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123 // 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

其它情况,constlet一致

四、区别

varletconst三者区别可以围绕下面五点展开:

  • 变量提升
  • 暂时性死区
  • 块级作用域
  • 重复声明
  • 修改声明的变量
  • 使用

4.1 变量提升

var`声明的变量存在变量提升,即变量可以在声明之前调用,值为`undefined

letconst不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

// var
console.log(a) // undefined
var a = 10 // let
console.log(b) // Cannot access 'b' before initialization
let b = 10 // const
console.log(c) // Cannot access 'c' before initialization
const c = 10

4.2 暂时性死区

var不存在暂时性死区

letconst存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

// var
console.log(a) // undefined
var a = 10 // let
console.log(b) // Cannot access 'b' before initialization
let b = 10 // const
console.log(c) // Cannot access 'c' before initialization
const c = 10

4.3 块级作用域

var不存在块级作用域

letconst存在块级作用域

// var
{
var a = 20
}
console.log(a) // 20 // let
{
let b = 20
}
console.log(b) // Uncaught ReferenceError: b is not defined // const
{
const c = 20
}
console.log(c) // Uncaught ReferenceError: c is not defined

4.4 重复声明

var允许重复声明变量

letconst在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20 // let
let b = 10
let b = 20 // Identifier 'b' has already been declared // const
const c = 10
const c = 20 // Identifier 'c' has already been declared

4.5 修改声明的变量

varlet可以

const声明一个只读的常量。一旦声明,常量的值就不能改变

// var
var a = 10
a = 20
console.log(a) // 20 //let
let b = 10
b = 20
console.log(b) // 20 // const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

4.6 使用

能用const的情况尽量使用const,其他情况下大多数使用let,避免使用var

JavaScript 中的 Var,Let 和 Const 有什么区别的更多相关文章

  1. JavaScript学习系列5 ---ES6中的var, let 和const

    我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...

  2. javascript中加var和不加var的区别

    Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循. 先来看下var关键字的定义和用法 var 语句用于声明变量. JavaScript 变量的创建 ...

  3. JavaScript中querySelector()和getElementById()(getXXXByXX)的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  4. javascript中的var,let,const关键字

    文章:JavaScript 中 var 和 let 和 const 关键字的区别 比较全面的文章.

  5. javascript 中加’var‘和不加'var'的区别,你真的懂吗?

    没看之前千万别说我是标题党,这个问题真的有好多淫都不懂!!! 大家都看了很多文章,都说避免隐式声明全局变量,就是说声明变量前必须加'var',那加了'var'和不加'var'到底有啥区别呢? 先来看一 ...

  6. JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...

  7. javaScript中的return,break,continue的区别

    导语: javaScript中有三种方法可以跳出循环或者终止循环.分别为break.return.continue. 正文: 一.break break 会使得整个程序终止执行或者包含了最内层的循环或 ...

  8. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

  9. javascript中的this在不同场景下的区别

    javascript在初版的设计上存在失误,导致了这门语言在使用时,经验型写法并不能得到像其它几个流行语言一样预期.其中的this的使用就是一个典型. this在javascript中是由解释器注入的 ...

  10. JavaScript中的var,const,let区别与用法(浅谈)

    let 和 const是(ES6) 新增加了两个重要的 JavaScript 关键字. 1.var全局变量 //全局变量在 JavaScript 程序的任何地方都可以访问 //定义的变量可以修改,如果 ...

随机推荐

  1. java使用户EasyExcel导入导出excel

    使用alibab的EasyExce完成导入导出excel 一.准备工作 1.导包 <!-- poi 相关--> <dependency> <groupId>org. ...

  2. ArcGIS JS API使用PrintTask打印地图问题解决汇总

    环境:来源于工作过程,使用的API是  arcgis js 3.*  3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...

  3. Dart 2.13 版现已发布

    作者 / Kevin Moore & Michael Thomsen Dart 2.13 版现已发布,其中新增了类型别名功能,这是目前用户呼声第二高的语言功能.Dart 2.13 还改进了 D ...

  4. MyBatis进阶--接口代理方式实现Dao 和动态SQL

    MyBatis接口代理方式实现Dao层 接口代理方式-实现规则 传统方式实现Dao层,我们既要写接口.还要写实现类.而MyBatis框架可以帮助我们省略写Dao层接口实现类的步骤.程序员只需要编写接口 ...

  5. JAVA基础——变量、常量

    变量 java中,变量时最基本的存储单元,其要素包括变量名,变量类型和作用域. 注意事项: 每个变量都有类型,类型可以是基本类型,也可以是引用类型. 变量名必须是合法的标识符 变量声明时一条完整的语句 ...

  6. Markdown使用概述

    Markdown使用概述 序言 作为一名编程学习的爱好者和初学者,由于学习编程的过程中总是存在遗忘以及很难动手写起来的问题,所以在看了许多关于编程学习方法的文章之后,选择使用typora作为我的笔记工 ...

  7. [刷题] PTA 04-树4 是否同一棵二叉搜索树

    程序: 1 #include <stdio.h> 2 #include <stdlib.h> 3 typedef struct TreeNode *Tree; 4 struct ...

  8. CentOS 7配置静态IP地址的两种方法 来自:互联网

    CentOS 7配置静态IP地址的两种方法 来自:互联网 时间:2021-01-12 阅读:4 如果你想要为CentOS 7中的某个网络接口设置静态IP地址,有几种不同的方法,这取决于你是否想要使用网 ...

  9. [转载]libvirt(virsh命令总结)

    libvirt(virsh命令总结) virsh回车进入交互式界面: version pwd hostname 显示本节点主机名 nodeinfo  显示节点信息 list --all 显示所有云主机 ...

  10. 源码安装Python3

    源码安装Python3 一.安装Python3需要的依赖包 [root@localhost ~]# yum install -y gcc make wget openssl openssl-devel ...