文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中的预编译如何进行

2024-04-02 19:55

关注

本篇内容介绍了“JavaScript中的预编译如何进行”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

 前言

预编译,顾名思义就是是做些代码文本的替换工作。是整个编译过程的最先做的工作。JavaScript 的圣经 —— MDN 明确地说过, JavaScript  是一个解释型语言,而并非编译型语言,所以预编译对于JS来说是子虚乌有的。但是人们喜欢称之为预编译其实也无伤大雅,关键在于为什么人们会认为JS存在预编译,是JS的哪种行为让人们觉得它产生了预编译呢?让我们来简单聊一聊。

引入

在代码执行前,编译器会进行如下操作:

一 parse阶段

分词。就是将代码分成原子符号(token)

将token解析翻译成AST(语法生成树)。

二 analyze阶段

遇到声明语句,将会把声明传到作用域(scope)中创建绑定,分配内存并将变量默认设为undefined或函数体。

然后就可以执行代码啦,执行中途每次遇到赋值或者取值,都会从作用域中查找绑定。这样看,是不是有点“预编译”内味了?但是实际上还是称它为预处理更加贴切一点。接下来,让我们来了解一波看起来最像预编译的操作--第三步的干货。

“预编译”

我的老师在和我讲相关知识点前和我说过这么一个笑话:

面试时我因为这么一个问题挂了

var a = 100 function foo(){     console.log(a) } foo()

问:为什么输出a的值是100?

答:因为100赋值给了a。

老师说完我头昏脑涨,完全不明白笑点在哪,后来才知道这是在考察“预编译”这方面的知识。

总的来说,“预编译”可以分为

创建GO对象(global object) 发生在页面加载完成时

创建AO对象(activation object) 发生在函数执行前一刻

具体步骤如下:

全局预编译

1. 创建GO对象

2. 找变量声明,将变量声明作为GO对象的属性名,并赋值undefined

3. 找全局里的函数声明,将函数名作为GO对象的属性名,值赋予函数体

局部预编译

1. 创建一个AO对象

2. 找形参和变量声明,将形参和变量声明作为AO对象的属性名,值为undefined

3. 将实参和形参统一

4. 在函数体里找函数声明,将函数名作为AO对象的属性名,值赋予函数体

所以那个笑话里的面试问题我们应该这么回答:

首先,编译器创建一个GO对象

找到变量声明 var a

和函数声明 function foo(){}

将上面两个变量声明作为GO的属性名赋初值

GO{

a:undefined

foo:function(){}

}

然后运行第一行代码 a=100

在GO中将100赋值给a

再执行第五行代码运行foo函数

创建一个AO对象

在函数体内找变量声明和形参,(无)

再在函数体内找函数声明(无)

所以

AO{

}

完成后运行第三行代码,输出a

先在AO对象中寻找a的值,发现不存在,向外部作用域扩展,在GO对象中寻找a,发现a的值为100

输出100

当然,笑话里的题过于简单,但是能让我们清晰的了解到这个“预编译”的进行

下面,我们来看一道面试题简化版,练练手:

global = 100     function fn() {       console.log(global);        global = 200       console.log(global);        var global = 300     }     fn()

它的逻辑和输出结果是多少呢?通过一步步的分析我们可以知道具体的分析应该是这样的:

GO: {       global: undefined => 100,       fn: function() {}     }     global = 100 // 没有声明的变量默认为全局变量,也会放到GO中     function fn() {       console.log(global); // 输出undefined       global = 200       console.log(global); // 输出200       var global = 300     }     AO: {       global: undefined => 200 => 300     }     fn()

“JavaScript中的预编译如何进行”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯