有关JavaScript变量提升的思考

什么是变量提升

在浏览器下运行以下代码：

	console.log(id);
    var id = 22;
    console.log(id);

会前后输出 undefined和22。
可以看到变量id在赋值前可以使用，且不会保错。
其背后的原理模拟如下：

	var id = undefined; // step1 创建，step2 初始化
	console.log(id);
    id = 22; // step3 赋值
    console.log(id);

在探究原理之前我们先看看生成执行环境的过程如下表1：

阶段	工作内容
1-创建阶段	找到需要提升的变量和函数，分别进行提升
2-执行阶段	按顺序执行代码

ps: 执行环境分为全局执行环境和函数执行环境(在函数内)。
以及JS变量的解析过程如表2：

步骤	工作内容
1-创建	在内存中创建空间
2-初始化	将变量指向一个对象或者基本类型
3-赋值	将变量指向一个对象或者基本类型

以下是 var let const function的变量提升规则：

类型	提升规则
var	创建、初始化的过程被提升
function	创建、初始化、赋值的过程被提升
let	创建的过程被提升
const	创建的过程被提升、没有赋值这个过程

大家可以通过以下代码来理解上述规则：
function

	fnTest();
	
	function fnTest() {
		console.log('test');
	}

输出test，在调用函数前已完成表2所有步骤。
let

	console.log(id);
	let id = 23;

会报错，因为在调用函数前只完成了表2的创建，还未完成初始化就调用，故报错。
const

	console.log(id);
	const id = 23;

会报错，原理与let一样，区别是

	const id = 24;
	id = 25;

上述代码会报错，因为没有赋值的过程，如果改为let则正常。

后言

如果大家感觉有所收获，就点赞支持下吧。

本文地址：https://blog.csdn.net/weixin_44235656/article/details/107359619