分析一个JavaScript预解析的题

最新推荐文章于 2024-11-25 15:01:12 发布
原创 最新推荐文章于 2024-11-25 15:01:12 发布 · 590 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细剖析了一段JavaScript代码的执行过程，包括预解析阶段如何处理变量声明和函数定义，以及执行阶段如何依据预解析结果进行变量赋值和函数调用。通过具体示例解释了变量提升和函数提升的概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上一篇转了预解析的总结，学习了，感谢！
下面找了个综合的题目来一步步剖析…

        alert(a);
        var a = 1;
        alert(a);
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();
浏览器解析js的步骤
  1. 先是预解析（找关键词 var， function， 参数），获取的数据记录
  2. 然后一句句代码执行

开始

        alert(a);                     // 它什么都没有
        var a = 1;                    // 它有 var  记下来
        alert(a);
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();
记录结果

a = undefined;

（var 的值都不读，凡是var声明的变量预解析就给undefined）

继续下一句

        alert(a);                     // 它什么都没有
        var a = 1;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){ alert(2);}      // 它有 function 记下来
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);
        alert( typeof a);
        a();
记录结果

a = undefined;
a = function a(){ alert(2) }; // 看到function 关键字就全记下来
但是，这俩不会都记下来的，都记下来，后边来人要用 a ,他俩谁上？？
这样规定的，function 和 undefined 都在，取 function

所以，现在的记录结果是：
a = function a(){ alert(2) };

继续下一句

        alert(a);                     // 它什么都没有
        var a = 1;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){ alert(2);}      // 它有 function 记下来
        alert(a);                     // 它什么都没有
        var a = 3;                   // 它有 var  记下来
        alert(a);                    
        function a(){alert(4);}
        alert(a);
        alert( typeof a);
        a();
记录结果

a = function a(){ alert(2) };
a = undefined;
都是 a 比较一下吧；
留 a = function a(){ alert(2) };

继续下一句

        alert(a);                     // 它什么都没有
        var a = 1;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){ alert(2);}      // 它有 function 记下来
        alert(a);                     // 它什么都没有
        var a = 3;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){alert(4);}       // 它有 function 记下来
        alert(a);
        alert( typeof a);
        a();
记录结果

a = function a(){ alert(2) };
a = function a(){ alert(4) };
都是 a， 又都是function，那就后面的覆盖之前的
留下 a = function a(){ alert(4) };

继续下一句

        alert(a);                     // 它什么都没有
        var a = 1;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){ alert(2);}      // 它有 function 记下来
        alert(a);                     // 它什么都没有
        var a = 3;                    // 它有 var  记下来
        alert(a);                     // 它什么都没有
        function a(){alert(4);}       // 它有 function 记下来
        alert(a);                     // 它什么都没有
        alert( typeof a);             // 它什么都没有
        a();                          // 它什么都没有  结束
记录结果

a = function a(){ alert(4) };

开始执行代码

        alert(a);
        var a = 1;
        alert(a);
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

执行代码过程中赋值语句会修改 预解析的记录结果

        alert(a);                    //执行这一行  输出 a      
        var a = 1;
        alert(a);
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

根据记录结果 输出 function a(){ alert(4) };

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

记录由 a = function a(){ alert(4) }; 改为 a = 1;

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}
        alert(a);
        var a = 3;
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

输出结果 1

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}     //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a
        var a = 3;                   
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

输出结果 1

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}     //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a
        var a = 3;                   //执行这一行 赋值语句 改变记录
        alert(a);
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

记录 a = 3;

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}     //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a
        var a = 3;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a   
        function a(){alert(4);}
        alert(a);

        alert( typeof a);
        a();

输出结果 3

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}     //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a
        var a = 3;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a   
        function a(){alert(4);}      //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a 

        alert( typeof a);            
        a();

结果 3

        alert(a);                    //执行这一行  输出 a      
        var a = 1;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a
        function a(){ alert(2);}     //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a
        var a = 3;                   //执行这一行 赋值语句 改变记录
        alert(a);                    //执行这一行  输出 a   
        function a(){alert(4);}      //执行这一行 没有赋值，也没调用
        alert(a);                    //执行这一行  输出 a 

        alert( typeof a);            // a是3 Number
        a();                         // 3(); 报错
【系统架构设计师-2024下半年真题】案例分析-参考答案及部分详解（完整回忆版）
数据知道的博客
11-11 9069
根据h中描述，为了保证高可靠性，有ping/echo，心跳机制两种策略，从资源利用率问为啥心跳更好。王工觉得使用ping/echo好，但李工觉得从系统资源利用率来说，使用心跳机制好 1、针对质量属性可以使用ping/echo和心跳模式实现，分别简述ping/echo和心跳的实现原理。 2、张工认为心跳策略比较适合，简述为什么？
关于函数预解析、构造函数、原型上的方法的一道经典面试题
m0_56991207的博客
03-31 228
使用var声明的变量和function声明的函数会提前定义，但是注意变量赋值并不会预解析；实例对象调用某一个方法时，会先在自身查找该方法，如果自身没有此方法，才会去调用原型上的同名方法。
预解析题目
weixin_42854399的博客
11-21 234
var a=“aa”; function test(){ alert(a); a=“bb”; } test(); alert(a); 求预解析过程 为什么输出结果为aa→bb 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对...
预解析练习题及解析
xiaoyaGrace的博客
05-25 318
1 [JavaScript]纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 ...
JS预解析和常见题目总结
ggbee_的博客
06-29 491
JS预解析是什么？ 浏览器在解析JS代码时候，首先会进行一个预解析的操作。即寻找作用域中var 和 function 关键字及其声明的变量和函数，将其进行事先声明存储。此时变量的值为undefined 函数也未调用。然后再从上到下逐行解析代码。见到操作，就修改前面存储的值，见到读取，就取得前面存储的值。遇到函数执行，就又开启一个新的域，执行预解析和逐行解读。 常见JS预解析情况类型 情况一： console.log(a); // undefined var a = 10; console.log(
js预解析
weixin_33874713的博客
12-30 205
1. 定义 预解析：在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。 预解析只会发生在通过var定义的变量和function上。 2. var 通过var关键字定义的变量进行预解析的时候：都是声明declare，不管它有没有赋值，都会赋值undefined。 alert(a); /...
JavaScript忍者秘籍（第2版）笔记、习题与解析
04-22
每个对象都有一个`__proto__`属性，指向其构造函数的原型对象。`Object.create()`方法可以用来创建一个新的对象，指定其原型。ES6引入的类和`class`关键字实际上是对原型继承的一种语法糖。 5. **事件与异步编程**...
腾讯笔试题（JavaScript预解析和逐步执行）
u010340306的博客
02-05 317
以下代码执行结果是什么 <script> console.log(a); var a = 1; console.log(a); function a(){console.log(2)} console.log(a); var a = 3; console.log(a); function a(){console.log(4)} console.log(a); a() </script> 执行结果
【前端】JavaScript作用域与预解析：深入理解问题与解答
最新发布
禅宗里有一个词叫做“因缘和合”。 所谓因缘，是指事件要发生所必须的条件。因缘和合就是当你聚集了这件事的一切条件，它就会自然而然的发生。“它就会自然而然的发生”，这种朴素而坚定的价值观让我们感到无比安心，安心到可以不用有任何担心焦虑。
11-25 706
在 JavaScript 中，作用域、变量提升（Hoisting）、函数声明与赋值的行为经常是开发者在学习中遇到的难点。本文通过对几道经典的代码解析题目进行详细剖析，来帮助你更好地理解 JavaScript 的执行顺序和作用域链。我们会一一讨论题目中的预解析结果、具体的输出以及背后的原因。
1.JavaScript面试真题-210页.zip
02-28
这份"JavaScript面试真题-210页.zip"文件包含了一份2024年的最新前端面试题大全，旨在帮助求职者或者开发者深入理解JavaScript以及相关技术，如TypeScript和Vue.js。下面，我们将详细探讨这些面试题所涵盖的知识点。...
预解析案例（经典面试题，简单且详细）
周粥舟轴的博客
05-27 335
** 预解析案例（经典面试题，简单且详细） 首先看一下这一小段代码：（大家可以先自己思考一下运行结果） f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c); } 以下是详解和运行结果：
JS-预解析练习
堇年
09-19 245
练习1 下列程序的执行结果 : if(true){ function demo() { console.log("hello demo1"); } }else{ function demo() { console.log("hello demo2"); } } demo(); // 高级hello demo1 低级hello de...
JavaScript预解析、作用域题目记录
小猴子的博客
07-08 915
JavaScript预解析、作用域题目记录 写出以下题目执行的结果及过程分析 function fun ( n ) { console.log( n ); var n = 456; console.log( n ); } var n = 123; fun( n ); function fun () { console.log( n ); var n= 456; console.log( n ); } var n = 123; fun( n ); function fun ()
js——预解析练习题以及答案详解
weixin_49070186的博客
08-12 728
1.输出结果undefined console.log(num) //预解析后，var fn在最前面，fn现在属于变量定义未赋值，所以输出undefined var num = 100 2.输出结果123 fn(); // 预解析后，把函数定义整个放在最前面，会执行fn()函数 function fn() { console.log(123); } 3.第一行的console.log(fn)输出undefined 第二行的fn()会输出报错，不执行之后代码 consol
JS学习--JS预解析
爱玲姐姐的博客
02-24 829
JS预解析 一、预解析的相关概念（ES5） JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。 JavaScript 解析器在运行 JavaScript 代码的时候分为两步： ​ 预解析和代码执行。 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义，预解析也叫做变量、函数提升。 ...
js预解析最强面试题 看看你会不会
m0_62641005的博客
03-05 409
话不多说 直接上题目 f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c); } 问：在控制台输
JS预解析/预编译、var和function变量提升；全局对象和活动对象、全局变量和局部变量、全局函数和局部函数；作用域和作用域链；
小草莓的博客
07-15 508
JavaScript是解释性语言，解释性是指逐行解析、逐行执行。在JavaScript真正被解析之前，JS解析引擎会把整个文件进行预处理，以消除一些歧义。这个预处理的过程就称为预编译。
js预编译步骤及练习题
黑蜀黍的博客
01-21 1340
预编译发生在函数执行的前一刻              1.创建AO对象（Activetion Object）（执行期上下文）              2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined；              3.将实参和形参统一              4.在函数体里面找函数声明，值赋予函数体              ps：未经声明的就赋值，此...
seecVue:一站式JavaScript学习资源库
标题中提到的 "seecVue:功课都在这里" 指的可能是关于 Vue.js 相关的知识点或者是一个专门介绍和学习 Vue.js 的资源集合。Vue.js 是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。它以数据驱动和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值