当前位置：首页 > article >正文

【前端】JavaScript作用域与预解析：深入理解问题与解答

article 2024/11/26 17:13:54

在这里插入图片描述

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

文章目录

💯前言
💯题目一：局部变量与提升
- 代码分析：
- 预解析后的代码结构
- 详细执行过程
- 输出结果：
- 思考要点：
💯题目二：函数参数与变量提升
- 代码分析：
- 预解析后的代码结构
- 详细执行过程
- 输出结果：
- 思考要点：
💯题目三：函数声明与局部变量遮蔽
- 代码分析：
- 预解析后的代码结构
- 详细执行过程
- 输出结果：
- 思考要点：
💯拓展知识：函数声明与变量声明的提升
- 函数声明是局部变量的声明
- 变量遮蔽与作用域链
💯小结

在这里插入图片描述

💯前言

在 JavaScript 中，作用域、变量提升（Hoisting）、函数声明与赋值的行为经常是开发者在学习中遇到的难点。本文通过对几道经典的代码解析题目进行详细剖析，来帮助你更好地理解 JavaScript 的执行顺序和作用域链。我们会一一讨论题目中的预解析结果、具体的输出以及背后的原因。
JavaScript

💯题目一：局部变量与提升

在这里插入图片描述

代码分析：

在这里插入图片描述

var x = 20;

function fn() {
    if (x) {
        var x = 30;
    }
    console.log(x); // 这里打印值是多少？
}

fn();
console.log(x); // 这里打印值是多少？

预解析后的代码结构

在这里插入图片描述
在 JavaScript 中，变量声明和函数声明会被提升到各自作用域的顶部。因此，函数 fn 中的 var x 也会被提升到函数顶部。预解析后的代码结构如下：

var x; // 全局变量声明提升，初始值为 undefined
function fn() {
    var x; // 局部变量声明提升，初始值为 undefined

    if (x) {
        x = 30; // 不会执行，因为 x 是 undefined，条件为 false
    }
    console.log(x); // 输出 undefined
}

// 执行阶段
x = 20; // 全局变量赋值
fn();   // 调用函数 fn，进入局部作用域
console.log(x); // 输出 20

详细执行过程

在这里插入图片描述

全局作用域提升阶段：
- var x 提升到全局作用域顶部，初始值为 undefined。
- 函数 fn 提升到全局作用域顶部，完整保留。
执行 fn() 函数：
- fn 内的 var x 被提升到函数顶部，初始值为 undefined。
- 在 if (x) 语句中，x 的值为 undefined，所以条件为 false，不会进入 if 块。
- console.log(x) 输出的是局部变量 x 的值，即 undefined。
- 然后在全局作用域中，console.log(x) 输出全局变量的值 20。

输出结果：

fn() 内的 console.log(x) 输出：undefined。
全局的 console.log(x) 输出：20。

思考要点：

局部变量 x 遮蔽了全局变量 x，即使局部变量未赋值。
if (x) 判断时，使用的是函数作用域中的局部 x，初始值是 undefined。

💯题目二：函数参数与变量提升

在这里插入图片描述

代码分析：

在这里插入图片描述

function fun(param) {
    console.log(param); // 这里打印值是多少？
    var param = function () {
        console.log(1);
    };
    console.log(param); // 这里打印值是多少？
}

fun(5);

预解析后的代码结构

在这里插入图片描述
在 JavaScript 中，当函数参数和局部变量同名时，参数的声明会被优先考虑，但局部变量的声明会被忽略，赋值操作仍然会执行。

function fun(param) {
    // 参数 `param` 被提升，作为函数的局部变量，初始值为传递的参数值 5
    console.log(param); // 输出 5
    param = function () { // 赋值操作覆盖了参数的值
        console.log(1);
    };
    console.log(param); // 输出函数体
}

// 执行阶段
fun(5);

详细执行过程

在这里插入图片描述

调用 fun(5) 时，参数 param 被赋值为 5。
第一次 console.log(param)：
- 输出 5，因为此时 param 的值是传递的参数。
执行 param = function() { console.log(1); }：
- param 被赋值为一个函数，覆盖了之前的参数值。
第二次 console.log(param)：
- 输出 function () { console.log(1); }，因为此时 param 已经被覆盖为该函数。

输出结果：

第一次 console.log(param) 输出：5。
第二次 console.log(param) 输出：function () { console.log(1); }。

思考要点：

函数参数会优先于函数内部的 var 声明。
var param 的声明被忽略，但赋值操作仍然执行，因此覆盖了参数 param 的值。

在这里插入图片描述

💯题目三：函数声明与局部变量遮蔽

在这里插入图片描述

代码分析：

在这里插入图片描述

var foo = 1;

function bar() {
    function foo() {}
    foo = 10;
    console.log(foo); // 这里打印值是多少？
}

bar();
console.log(foo); // 这里打印值是多少？

预解析后的代码结构

在这里插入图片描述

var foo; // 全局变量声明，初始值 undefined
function bar() {
    function foo() {} // 局部变量 foo，初始值为函数
    foo = 10;         // 覆盖局部变量 foo 的值
    console.log(foo); // 输出 10
}

// 执行阶段
foo = 1; // 全局变量赋值
bar();   // 调用 bar 函数
console.log(foo); // 输出 1

详细执行过程

在这里插入图片描述

全局作用域提升阶段：
- var foo 提升，初始值为 undefined。
- 函数 bar 提升到全局作用域顶部。
- 在 bar 函数中，function foo() 声明被提升到 bar 内部顶部，声明了一个局部变量 foo，初始值为函数。
执行阶段：
- 调用 bar() 时，局部变量 foo（最初是一个函数）被重新赋值为 10。
- console.log(foo) 输出 10，因为局部变量 foo 已被赋值为 10。
- 最后在全局作用域中，console.log(foo) 输出全局变量的值 1，因为全局变量 foo 没有被 bar 内部的操作影响。