浅谈var let const

浅谈var let const

var

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

javascript 复制代码
var a = 10;
console.log(window.a) // 10

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

javascript 复制代码
console.log(a) // undefined
var a = 20

// 编译阶段,编译器会将其变成以下执行
var a
console.log(a)
a = 20

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

javascript 复制代码
var a = 20 
var a = 30
console.log(a) // 30

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

javascript 复制代码
// 局部
var a = 20
function changeA(){
    var a = 30
}
changeA()
console.log(a) // 20 

// 全局
var b = 20
function changeB(){
   b = 30
}
changeB()
console.log(b) // 30 

let

let是ES6新增的命令,用来声明变量

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

javascript 复制代码
{
    let a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在变量提升

javascript 复制代码
console.log(a) // 报错ReferenceError
let a = 1

这表示在声明它之前,变量a是不存在的,这时如果用到它,会抛异常

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

javascript 复制代码
var a = 123
if (true) {
    a = 'abc' // ReferenceError
    let a;
}

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

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

javascript 复制代码
// 相同作用域
let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared


// 不同作用域
let b = 20
{
    let b = 30
}

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

javascript 复制代码
function func(arg) {
  let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

const

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

javascript 复制代码
const a = 1
a = 3
// TypeError: Assignment to constant variable.

因此,const 在声明常量的同时必须初始化

javascript 复制代码
const a;
// SyntaxError: Missing initializer in const declaration

禁止对用var或let声明过变量,再用const声明,会报错

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

  • 对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量
  • 对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变
javascript 复制代码
const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

区别

特点 var let const
变量提升 Y N N
是否存在暂时性死区 N Y Y
是否存在块级作用域 N Y Y
是否允许重复声明 Y N N
是否允许修改声明的变量 Y Y N

参考文献

面试官:说说var、let、const之间的区别

相关推荐
小约翰仓鼠14 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
烛阴31 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
你的人类朋友1 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36782 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550402 小时前
初级程序员入门指南
javascript·python·算法
钡铼技术ARM工业边缘计算机2 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
高山我梦口香糖3 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
拉不动的猪4 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
贩卖纯净水.4 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript