【JavaScript】预解析 ② ( 预解析示例分析 | 分步骤分析预解析过程 )

一、预解析示例分析一1、要分析的代码2、代码预解析分析3、作用域链分析二、预解析示例分析二1、要分析的代码2、代码预解析分析三、预解析示例分析三1、要分析的代码2、预解析过程分析

文章共4,569字 · 阅读需要大约16分钟

一键AI生成摘要，助你高效阅读

问答

韩曙亮

4286人浏览 · 2024-04-09 01:15:00

韩曙亮 · 2024-04-09 01:15:00 发布

文章目录

一、预解析示例分析一
二、预解析示例分析二
- 1、要分析的代码
- 2、代码预解析分析
三、预解析示例分析三
- 1、要分析的代码
- 2、预解析过程分析

一、预解析示例分析一

1、要分析的代码

要分析的代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        var num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }
    </script>
</head>

<body>
</body>

</html>

执行结果如下 :

在这里插入图片描述

2、代码预解析分析

给定如下代码 , 分析 JavaScript 预解析过程 ;

        var num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }

分析上述代码的预解析过程 :

全局作用域的 var num = 666; 变量 , 进行预解析 , 提升该变量到全局作用域顶部 , 提升后的效果如下 :

		// ★ 本步骤要点
		var num;
        num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }

全局作用域的 fun 函数预解析 , 将该函数提升到全局作用域最顶部 , 在 var num 的下方 ;

		var num;
		// ★ 本步骤要点
        function fun() {
            console.log(num);
            var num = 888;
        }
        num = 666;

        fun();

fun 函数的局部作用域中的 var num = 888; 变量进行预解析 , 将该变量在局部作用域中提升到最顶端 ;

该提升操作 , 也是只提升变量声明 , 变量初始化赋值操作仍然保留在原地 ;

		var num;
        function fun() {
        	// ★ 本步骤要点
        	var num;
            console.log(num);
            num = 888;
        }
        num = 666;

        fun();

这是 JavaScript 预解析的最终结果 ;

3、作用域链分析

预解析结果如下 :

		var num;
        function fun() {
        	var num;
            console.log(num);
            num = 888;
        }
        num = 666;

        fun();

在 fun 函数的局部作用域中 , 执行 console.log(num); 代码 , 打印 num 变量的值 ,

num 变量查找 , 需要沿着上述 JavaScript 代码的作用域链逐层向上查找 ,

优先查找局部作用域 num 变量 , 然后再向上查找全局作用域中的 num 变量 ;

在 fun 函数的局部作用域中 , 找到了 num 变量 , var num; , 但是该 num 变量只进行了声明 , 没有进行初始化操作 ,

在 num 变量声明后 , 未初始化前 , 打印 num 的值为 undefined ;

二、预解析示例分析二

1、要分析的代码

要分析的代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        var num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述

2、代码预解析分析

给定如下代码 , 分析 JavaScript 预解析过程 ;

        var num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }

先预解析全局作用域的 num 变量 , 将 var num; 提升到全局作用域最顶端 , num 变量初始化仍然留在原地 , 完成后代码变为 :

		// ★ 本步骤要点
        var num;
        num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }

然后将 fun 函数声明 , 提升到全局作用域顶端 , 全局 num 变量声明的下面 ;

        var num;
        // ★ 本步骤要点
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }
        num = 666;
        fun();

再后对 fun 函数局部作用域的 num2 和 num 进行预解析 , 将变量声明提升到局部作用域的顶端 , 将变量初始化赋值留在原地 , 预解析后的结果如下 :

        var num;
        function fun() {
        	// ★ 本步骤要点
            var num2;
            var num;
            num2 = 333;
            console.log(num);
            console.log(num2);
            num = 888;
        }
        num = 666;
        fun();

在上述 fun 函数局部作用域 , 打印 num 变量时 , 局部作用域的 num 变量还没有初始化 , 打印的值为 undefined , 打印 num2 变量时 , 局部作用域的 num2 变量已经赋值 333 , 因此执行结果如下 :

在这里插入图片描述

三、预解析示例分析三

1、要分析的代码

要分析的代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述

2、预解析过程分析

预解析的代码 :

        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }

全局作用域的 fun 函数预解析 , 将该函数提升到全局作用域的最顶端 ;

		// ★ 本步骤要点
        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
        
        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

下面分析局部作用域的 var num = num1 = num2 = 888; 语句 , num1 和 num2 变量没有经过声明直接使用 , 这两个变量等同于全局变量 ;

这里将这两个变量提升到全局作用域的最顶端 ;

本步骤预解析结果如下 :

		var num1;
		var num2;
		// ★ 本步骤要点
        function fun() {
            var num; 
            num2 = 888;
            num1 = 888; 
            bnum = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
        
        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

在 fun 函数内部 , 可以打印出 3 个变量的值 888 ;

在全局作用域中 , 可以打印出 num1 和 num2 的值 888 , 但是 num 变量是 fun 函数的局部变量 , 访问不到 , 因此全局作用域打印 num 变量会报错 ;

Uncaught ReferenceError: num is not defined
    at hello.html:17:21

在这里插入图片描述

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

python代码调试神器-pdb

GitCode 开源社区

uboot源码结构、配置、编译

GitCode 开源社区

Android记录19-朋友圈动态发布时间计算

GitCode 开源社区

所有评论(0)

查看更多评论

韩曙亮

@han1202012

已为社区贡献139条内容