【JavaScript】:理解 var let const

var
let
const
声明风格及最佳实践

变量

ECMAScript 变量是松散类型的,意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量:var、let、const。其中var在ECMAScript的所有版本中都可以使用,而let和const只能在ECMAScript6中使用。

1.var

```javascript var message ``` 声明名为message的变量,可以用于保存任何类型的值(不初始化的情况下,变量会保存一个特殊的值undefind)
var message="hi";
message=100;//合法但不推荐

虽然不推荐改变保存变量保存值的类型,但这在ECMAScript中是完全有效的。

1.var作用域

var操作符定义的变量会成为包含它的函数的局部变量

 function test() {
    
    
 var message="hi";
}
console.log(message);//出错

这里message变量是函数内部使用var定义,意味该变量将在函数退出时被销毁,所以打印message会报错

2.var声明提升

使用var时下面的代码不会报错。因为使用var声明的变量会自动提升到函数作用域顶部:

function foo () {
    
    
console.log(age);
var age=20;
}
foo();

//类似于

function foo () {
    
    
var age;
console.log(age);
var age=20;
}
foo();//undefined

这就是所谓的"提升",也就是把所有的变量声明拉到函数作用域的顶部。此外,反复使用多次var也没问题。

function foo() {
    
    
var age = 16;
var age = 26;
var age = 36;
}

2.let

let 跟 var作用差不多,但有着非常重要的区别。最明显的区别是 let:声明范围是块 var:声明范围是函数作用
if(true) {
    
    
var age= 26;
console.log(age);//26
}
console.log(age);//26

if(true) {
    
    
let age= 26;
console.log(age);
}
console.log(age);//ReferenceError: age 没有定义

在这里,age变量之所以不能在if块外部被引用,是因为它的作用域仅限于该块内部。
1)块作用域是函数作用域的子集,因此适用于var的作用域限制同样也适用于let
2)let也不允许同一块作用域中出现冗余声明,会导

致报错

var name;
var name;

let age;
let age;//SyntaxError:标识符age已经声明过

1.暂时性死区

let 与 var的另一个重要的区别就是let声明的变量不会在作用域中被提升

//name会被提升
console.log(name);//undefined
var name ="Matt";

//age不会被提升
console.log(age);//ReferenceError: age 没有定义
let age=26;

在解析代码时,JavaScript引擎也会注意出现在块后面的let声明,只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为"暂时性死区",在此阶段引用任何后面才声明的变量都会抛出ReferenceError。

2.全局声明

与var关键字不同,使用let在全局作用域中声明的变量不会成为window对象的属性(var 声明的变量则会)

var name ="xiao";
cosole.log(window.name);//"xiao"

let age= 20;
console.log(window.age);//undefined

不过,let声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内存续。因此,为了避免SyntaxError,必须确保页面不会重复声明同一个变量。

3.条件说明

在使用var声明变量时,由于声明会被提升,JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明。因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量,同时也就不可能在没有声明的情况下声明它。

<script>
var name= "Continue"
let age=20
</script>

<script>
//假设脚本不确定页面中是否已经声明了同名名量
//那它可以假设还没有声明过

var name ="Continue"
//这里没问题,因为可以被作为一个提升声明来处理
//不需要检查之前是否声明过同名变量

let age=20;
//如果age之前声明过,这里会报错
</script>

4.for循环中的let声明

在let出现之前,for循环定义的迭代变量会渗透到循环体外部:

for(var i=0;i<5;++i){
    
    
}
console.log(i);//5

改成使用let之后,这个问题就消失了,因为迭代变量的作用域仅限于for循环块内部:

for(let i=0;i<5;++i){
    
    
}
console.log(i);//ReferrenceError:i 没有定义

在使用var的时候,最常见的问题就是对迭代变量的奇特声明和修改:

for(var i = 0; i< 5; ++i){
    
    
  setTimeout(()=>console.log(i), 0)
}
//实际上输出5、5、5、5、5

之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时逻辑时,所有i都是同一个变量,因而输出的都是同一个最终值。
而在使用let声明迭代变量时,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量实例。

for(let i = 0; i< 5; ++i){
    
    
  setTimeout(()=>console.log(i), 0)
}
//实际上输出0、1、2、3、4

3.const

const的行为与let基本相同,唯一一个重要的区别是用它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行错误
const age=20;
age=22;//TypeError:给常量赋值

//const也不允许重复声明
const name="Continue";
const name="xiao"//SyntaxError

//const声明的作用域也是块
const name="Continue"
if(true){
    
    
const name="xiao"
}
console.log(name);//Continue

const声明的限制只适用于它指向的变量的引用。换句话说,如果const变量引用的是一个对象,那么修改这个对象的内部属性并不违反const的限制。

const person(){
    
    };
person.name="Continue";

即使JavaScript引擎会为for循环中的let声明分别创建独立的变量实例,而且const变量跟let变量很相似,也不能用const来声明迭代变量(因为迭代变量会自增):

for(const i = 0; i< 5; ++i){
    
    
}//TypeError:给常量赋值

4.声明风格及最佳实践

1.不使用var

有了let和const,大多数开发者会发现不需要var了。限制自己只使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置、以及不变的值。

2. const优先,let次之

使用const声明可以让浏览器运行时强制保持质量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。因此,很多开发者认为应该优先使用const来声明变量,只在提前知道未来会有修改时,在使用let。这样可以让开发者更有信心的判断某些变量的值永远不会变,同时也能迅速的发现因意外赋值导致的非预期行为。

猜你喜欢

转载自blog.csdn.net/qq_43522998/article/details/112800564