JavaScript块级作用域绑定以及状态提升详解

目录

• 前言
• 作用域/执行上下文
• var 声明
• 块级声明
• 不声明的变量
• 1. 不使用关键字声明变量
• 2. 使用 var 声明的变量
• var 声明和块级声明的区别
• 全局作用域绑定
• 状态提升
• 块级绑定的最佳实践
• 函数声明提升
• 总结

前言

在ES6之前，JavaScript只有经典的var声明，这给开发者带来了很多的困扰。在ES6出现后，又增加了let和const关键字的声明方式。这里会讲有关变量声明，作用域，状态提升相关知识。

作用域/执行上下文

在JavaScript的世界里，作用域可以分为三种，分别是全局作用域，函数作用域，块级作用域。

• 全局作用域/执行上下文：默认或者是最基础的作用域。一个程序只有一个全局作用域，在JavaScript脚本存在的生命周期中都在执行堆栈的底部不会被弹出销毁。全局作用域中有一个全局对象（以浏览器环境为例，这个全局对象是window）。
• 函数作用域：一个函数体内部是一个作用域。
• 块级作用域：存在于块中——字符 { 和 } 之间的区域。（显然函数体也是由大括号包裹的，所以函数作用域也是块级作用域）

var 声明

var声明在全局作用域中，会被添加到全局对象上成为全局对象的属性。在函数作用域中则会被提升到函数顶部。而且不管实际是否会执行，都会在预编译阶段将函数声明提升，初始化操作则留在本地。

• var声明的变量会被提升到当前作用域顶部（当前作用域只包括全局作用域或函数作用域，没有块级作用域）。

块级声明

临时死区（Temporal Dead Zone，TDZ）：用来描述 let 和 const 的不提升效果的术语。JavaScript引擎在扫描代码发现变量声明时，要么将他们提升到作用域顶部（var声明），要么将声明放到TDZ（let声明和const声明）。访问在TDZ中的变量会触发运行时错误，只有执行过变量声明语句后，变量才会从TDZ中移出，然后才可以正常访问。

const 和 let 是块级标识符，所以声明的变量、常量也只在当前代码块中有效，一旦执行到块外就会立即被销毁。

• let声明：可以将变量作用域限制在当前代码块中。在声明语句前会将变量放在临时死区。
• const声明：用来声明常量，并且每个被被const声明的常量必须进行初始化。如果是对象，则对象中的值可以修改（cosnt声明不允许修改绑定，但可以修改绑定的值）

不声明的变量

在JavaScript中，定义一个变量不使用关键字声明也不会报错。但不建议这么做。

不管在全局，函数还是块作用域里，a = 0 这样的语句都会在 window 对象上创建 a 属性，实际上也就是执行了 window.a = 0 。而只有在全局作用域中，var a = 0才会在 window 上创建属性 a，即为 window.a = 0。

1. 不使用关键字声明变量

function func() {
    b = 0
    console.log(b);
    console.log(b === window.b);
}
func()
console.log(b === window.b);

// 输出结果
/*
0
true
true
*/