脚本的预编译

简介: 脚本的预编译

一、前言

预编译是JS语言的难点重点之一,难点在于不便理解,重点在于必须掌握。

预编译实际上就是JS引擎的两次扫描,第一次扫描是检测声明,第二次扫描是执行代码。

预编译分为脚本的预编译和函数调用的预编译,先来说说脚本的预编译。


二、脚本预编译

1. 过程

1.创建全局对象GO(GlobalObject)

2.加载脚本文件

3.预编译:

  • 找出所有的变量声明,按照变量名加入全局对象,如果已经存在,忽略。
  • 找出所有的函数声明,按照函数名加入全局对象,如果已经存在同名变量或者函数,替换之。
  • 非声明不考虑。

4.解析执行代码

2. 解析

1.没有var的变量,都不是变量声明,全部认为是window的全局变量,不参与预编译。

// console.log(aa); // Uncaught ReferenceError: aa is not defined
aa = 5;
console.log(aa); // 5

2.即使在函数中,aa也是全局变量。(运行时)

test();
function test() {
    aa = 5;
}
console.log(aa); // 5

3.脚本中的所有声明变量,在脚本预编译阶段完成,所有变量的声明与实际书写位置无关。

console.log(aa); // undefined
var aa = 5;
console.log(aa); // 5


4.脚本中的所有函数声明,在脚本预编译阶段完成,所有函数声明与实际书写位置无关。

console.log(hh); // f hh(){...}
function hh() {
    console.log('hh');
}

5.脚本中,如果变量与函数同名,那么将覆盖变量。

console.log(haha); // f haha(){...}
var haha = 123;
function haha() {
    console.log(2333);
}


6.脚本中,只有函数能够覆盖变量,但是变量无法覆盖函数。(注意: 函数优先级大于变量!)

console.log(haha); // f haha(){...}
function haha() {
    console.log(2333);
}
var haha = 123;

7.脚本中,后面的函数声明会覆盖前面的函数声明,并且忽略参数。

haha(1); // 'haha2'
function haha(a) {
    console.log('haha1');
}
function haha(b,c) {
    console.log('haha2');
}

三、本节思维导图

1688210368035.png

目录
相关文章
|
并行计算 TensorFlow 算法框架/工具
tensorflow安装GPU版本
tensorflow安装GPU
267 0
tensorflow安装GPU版本
|
XML Java Android开发
Eclipse/MyEclipse的快捷键以及文档注释、多行注释的快捷键
一、多行注释快捷键   1.选中你要加注释的区域,用 Ctrl+Shift+C 或者 Ctrl+/ 会加上 // 注释,再重复按一下就会去掉 // 注释。(.js文件中只有 Ctrl+Shift+C 管用,.java文件中都管用)   2.选中你要加注释的区域,用 Ctrl+shit+/  会加上 /*...*/ 注释,再用 Ctrl+shit+\  会去掉 /*...*/ 注释。
11417 1
|
数据管理 数据挖掘 OLAP
|
10月前
|
前端开发 开发者
Webpack 插件底层的实现原理是什么?
Webpack 插件通过其插件系统扩展功能,满足不同构建需求。基于事件流模型,Webpack 在编译过程中触发多种事件(如 compile、make、emit、done),插件可监听并执行自定义逻辑。Webpack 使用 tapable 模块管理这些事件,提供 sync、async、promise 等钩子类型。开发者在配置文件中注册插件,通过 apply 方法初始化并注册所需钩子。插件生命周期与编译过程紧密相关,在不同阶段介入执行任务。例如,compilation 事件在每次编译开始时触发,emit 事件在生成输出文件前触发,done 事件在编译完成时触发。
|
9月前
|
传感器 程序员 Go
一文彻底搞清楚常见的IC封装
本文介绍了常见的IC封装类型,包括DIP、SOP、QFP、BGA、CSP等,详细解释了它们的特点、应用及选型参考,帮助读者理解封装技术的发展趋势与核心功能。
2318 0
一文彻底搞清楚常见的IC封装
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
638 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
缓存 监控 负载均衡
提高服务器CPU使用率
提高服务器CPU使用率
1287 8
|
数据采集 Web App开发 前端开发
不存在的!教你几招轻松绕过网站限制
不存在的!教你几招轻松绕过网站限制
3819 0
|
安全 测试技术 Go
Python 和 Go 实现 AES 加密算法的技术详解
Python 和 Go 实现 AES 加密算法的技术详解
663 0
|
存储 固态存储 安全
服务器硬件基础知识
服务器硬件基础知识
1072 1