Js变量

在Js（ES6）标准中，我们常常会看见var、let、const三种变量申明符，有什么区别呢？

作用域

在具体介绍这三个变量之前，，首先需要介绍作用域概念：

作用域（Scope）就是 JavaScript 中用于规定变量、函数和类在什么范围内可以被访问的一套规则

简单理解就是变量的使用范围

在Js中，分为全局作用域、函数作用域以及块级作用域，查找规则：

JavaScript 采用的是词法作用域，也就是变量的作用域在代码定义时就已经确定，而不是运行时决定。访问变量时会按照作用域链从当前作用域逐层向外查找，直到全局作用域；如果最终找不到，就会抛出 ReferenceError

var的作用域

函数作用域、全局作用域。申明在块中（如if、for语句）会挂载为全局作用域

let和const的作用域

函数作用域、全局作用域、块级作用域

let和const的区别

主要表现在const为常量，引用值不可被修改。注意仅仅是引用值不能修改。

变量提升与暂时性死区

变量提升

JavaScript 在执行代码之前，会先创建当前作用域中的变量和函数绑定。

console.log(a);

var a = 1;

console.log(a);

// Logs
// undefined
// 1

暂时性死区

变量从进入作用域开始，到执行声明语句完成初始化之前，这段时间就是暂时性死区。

发生在let和const中，这俩其实也会有变量提升，如

let a = 100;

{
    console.log(a);

    let a = 1;
}

// Logs
// RefferenError

如果没有提升，这段代码应该输出100，但是依旧输出了RefferenError，原因就是在这个块中其实存在了，只不过进入了暂时性死区无法访问，代码抛出错误。

为什么var没有暂时性死区？因为早期设计就是如此，var在提升时会自动给个undefined值。而 let 和 const 诞生于es6，在创建阶段只创建绑定，不会初始化，它们在执行到声明语句之前都处于一种特殊的 <uninitialized> 状态，会直接抛出错误提示开发者明确的顺序错误。

其他

三者在全局作用域中的表现

var a = 1;
let b = 2;
const c = 3;

function foo() {
    console.log(a);
    console.log(b);
    console.log(c);
}

foo();

// Logs
// 1
// 2
// 3

但是：

var a = 1;
let b = 2;
const c = 3;

console.log(window.a);
console.log(window.b);
console.log(window.c);

// Logs
// 1
// undefined
// undefined

原因是let和const在全局时不会挂载到window对象上面，仅存在于全局词法环境中。

在for循环的表现

一个最神秘且面试相当喜欢问的点：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i));
}

// Logs
// 3
// 3
// 3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i));
}

// Logs
// 0
// 1
// 2

原因就在于，var没有块级作用域，会挂载到全局，最后setTimeout会读取到最后一个值。而let会被es处理成类似：

{
  let i = 0;
  setTimeout(() => console.log(i));
}

{
  let i = 1;
  setTimeout(() => console.log(i));
}

{
  let i = 2;
  setTimeout(() => console.log(i));
}

的结构，最终打印为0、1、2

Js变量

标签

文章助手

推荐文章

Js闭包

String方法总结

Object常用方法

Js变量

标签

文章助手

推荐文章

Js闭包

String方法总结

Object常用方法