来总结下JS中是哪个变量的区别与各自的特性
部分案例与思路来自字节跳动月影大佬的课程 、廖大的教程 变量作用域与解构赋值
一些思路来自 理解ES6中的暂时死区(TDZ)
变量声明概述
-
1.尽量采用let const的声明方式哦
-
2.const的绑定值不可变!因为定义就是 constant variable嘛~
-
3.var使用函数作用域 let/const使用区块作用域
-
4.1 TDZ 暂存死区 -“Temporal Dead Zone”
-
4.2 hoist 声明提升
-
所以在let/const声明之前就访问对应的变量与常量,会抛出
ReferenceError
错误(由于TDZ的作用 变量提升不起作用);但在var声明之前就访问对应的变量,则会得到undefined
我们要记住 let/const声明的变量,的确也是有提升(hoist)的作用!因为提升是JS语言中对于变量声明的基本特性。
只是因为有TDZ的作用 如果我们在声明变量之前就使用了这个变量 会直接抛出ReferenceError错误
防止在变量声明前就使用这个变量可以避免很多错误哦!
变量提升
我们需要先了解下JS语言中变量的 Hoist(提升)特性(所有变量都有的嗷)
JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:
function foo() {
var x = 'Hello, ' + y;
console.log(x);
var y = 'Bob';
}
foo();
这里是参考了廖大的教程哈
JavaScript引擎自动提升了变量y
的声明 但是!不会提升变量y
的赋值 所以 y 的值是 undefined
对于上述foo()
函数,JavaScript引擎看到的代码相当于:
function foo() {
var y; // 提升变量y的声明,此时y为undefined
var x = 'Hello, ' + y;
console.log(x);
y = 'Bob';
}
由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var
申明函数内部用到的所有变量:
function foo() {
var
x = 1, // x初始化为1
y = x + 1, // y初始化为2
z, i; // z和i为undefined
// 其他语句:
for (i=0; i<100; i++) {
...
}
}
这个习惯在C语言编程时就很熟悉啦~
看完变量提升的概念 我们为每一种变量举一个例子
来了解下它们的特性
var
-
红色箭头体现了变量提升在var变量中的应用 但是这种特性容易导致一些错误出现 因为我们可能不小心在变量声明之前就用了这个变量而且还不报错!
-
蓝色剪头体现了var变量的函数作用域
let
-
红色箭头体现了暂存死区TDZ导致let变量无法被提升
-
蓝色箭头体现了let变量的局部作用域
const
-
紫色箭头体现了const对象的特性——没有动态绑定 绑定值不可变!
-
其他特性是和let一样的嗷~ 有暂存死区、有块级作用域
-
我们如果要声明一个不可变的数 使用const来声明体现了我们良好的编码习惯~