在浏览器下运行以下代码:
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
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论