let、var、const用法
var 、 let、 const 都可以用来声明变量,那么它们的区别是什么?他们之间又有怎样的联系?
让我们一起来康康。
- var声明的变量会挂载在window上,而let和const声明的变量不会
- var声明变量存在变量提升,let和const不存在变量提升
- let和const声明形成块作用域
- 同一作用域下let和const不能声明同名变量,而var可以
- 暂时性死区
一、var声明的变量会挂载在window上,而let和const声明的变量不会
话不多说,直接上代码,请看码…
var b = 123;
let c = 246;
const d = 512;
console.log(b,'b');
console.log(window.b,'window.b');
console.log(c,'c');
console.log(window.c,'window.c');
console.log(d,'d');
console.log(window.d,'window.d');
二、var声明变量存在变量提升,let和const不存在变量提升
首先解释一下什么是变量提升和函数提升:
变量提升和函数提升:通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理。这就是变量提升和函数提升
引擎在读取js代码的过程中,分为两步。 第一个步骤是整个js代码的解析读取,第二个步骤是执行。
在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
变量提升和函数提升的规则:
1.变量提升只会提升变量名的声明,而不会提升变量的赋值初始化。
2.函数提升的优先级大于变量提升的优先级,即函数提升在变量提升之上。
console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
console.log("foo1");
};
var foo2 = function () {
console.log("foo2");
};
输出结果如下:
也就是说,函数提升只会提升函数声明,不会提升函数表达式
三、let和const声明形成块作用域
所谓块级作用域,简单点来说就是一对花括号包裹起来的区域{}
{
var e = 100;
let f = 10;
const g = 200;
}
console.log(e); // 100
// console.log(f) // 报错:f is not defined ===> 找不到f这个变量
// console.log(g);//报错:g is not defined ===> 找不到g这个变量
四、同一作用域下let和const不能声明同名变量,而var可以
如下,用var重复声明和赋值一个变量,都不会报错
var name1 = "hello";
console.log(name1,'name1');
var name1 = "hello2";
console.log(name1,'name1');
如下用let重复声明一个变量会报错,而重复给一个变量赋值不会报错
let name1 = "hello";
let name1;
console.log(name1,'name1');
//Uncaught SyntaxError: Identifier 'name1' has already been declared
let name1 = "hello";
name1 = "hello2";
console.log(name1,'name1'); //hello2
如下用const重复声明和赋值一个变量都会报错。
如果声明的是复合类型数据,可以修改其属性
const name1 = "hello";
const name1;
console.log(name1,'name1');
//Uncaught SyntaxError: Missing initializer in const declaration
const name1 = "hello";
name1 = 'hello2';
console.log(name1,'name1');
//Uncaught SyntaxError: Unexpected end of input
const obj3 = {a:100};
obj3.name = 'apple';
obj3.a = 10000;
console.log(obj3); // {a:10000,name:'apple'}
五、 暂时性死区
暂时性死区:let 和 const 声明的变量不存在变量提升,其作用域都是块级作用域,凡是在声明变量之前使用变量就会报错,所以,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
if (true) {
// 死区开始
name = 'lut'; // ReferenceError
console.log(name); // ReferenceError
// 开始声明变量,死区结束
let name;
console.log(name); // undefined
name = 520;
console.log(name); // 520
}
来自:一个喜欢前端的杰迷