当前位置： 首页 > 编程日记 > 正文

5单个编译总会编译全部_5分钟读懂JavaScript预编译

编程日记 2024-04-13 07:30:00
大家都知道JavaScript是解释型语言，既然是解释型语言，就是编译一行，执行一行，那又何来预编译一说呢?脚本执行js引擎都做了什么呢？今天我们就来看看吧。

1-JavaScript运行三部曲

  1. 语法分析
  2. 预编译
  3. 解释执行

语法分析很简单，就是引擎检查你的代码有没有什么低级的语法错误； 解释执行顾名思义便是执行代码了； 预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数 ；

2-JS预编译什么时候发生

预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有错 预编译确确实实在script代码内执行前发生了 但是它大部分会发生在函数执行前

3-实例分析

先来区分理解一下这2个概念： 变量声明 var … 函数声明 function(){}

<script>
var a = 1;
console.log(a);
function test(a) {console.log(a);var a = 123;console.log(a);function a() {}console.log(a);var b = function() {}console.log(b);function d() {}
}
var c = function (){
console.log("I at C function");
}
console.log(c);
test(2);
</script>

分析过程如下：

  1. 页面产生便创建了GO全局对象（Global Object）（也就是window对象）；
  2. 第一个脚本文件加载；
  3. 脚本加载完毕后，分析语法是否合法；
  4. 开始预编译 查找变量声明，作为GO属性，值赋予undefined； 查找函数声明，作为GO属性，值赋予函数体；

预编译

//抽象描述GO/window = {a: undefined,c: undefined，test: function(a) {console.log(a);var a = 123;console.log(a);function a() {}console.log(a);var b = function() {}console.log(b);function d() {}}}

解释执行代码（直到执行调用函数test(2)语句）

//抽象描述GO/window = {a: 1,c: function (){console.log("I at C function");}test: function(a) {console.log(a);var a = 123;console.log(a);function a() {}console.log(a);var b = function() {}console.log(b);function d() {}}}

执行函数test()之前，发生预编译

  1. 创建AO活动对象（Active Object）；
  2. 查找形参和变量声明，值赋予undefined；
  3. 实参值赋给形参；
  4. 查找函数声明，值赋予函数体；

预编译之前面1、2两小步如下：

//抽象描述AO = {a:undefined,b:undefined,}

预编译之第3步如下：

//抽象描述AO = {a:2,b:undefined,}

预编译之第4步如下：

//抽象描述AO = {a:function a() {},b:undefinedd:function d() {}}

执行test()函数时如下过程变化：

//抽象描述AO = {a:function a() {},b:undefinedd:function d() {}}--->AO = {a:123,b:undefinedd:function d() {}}--->AO = {a:123,b:function() {}d:function d() {}}

执行结果：

b8b2b0c35d8e5e3dc070dee544a1074e.png

注意：

预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 ； 只有在解释执行阶段才会进行变量初始化 ；

预编译(函数执行前)

  1. 创建AO对象（Active Object）
  2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
  3. 实参形参相统一，实参值赋给形参
  4. 查找函数声明，函数名作为AO对象的属性，值为函数引用

预编译(脚本代码块script执行前)

  1. 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined
  2. 查找函数声明，函数名作为全局对象的属性，值为函数引用

预编译小结

  • 预编译两个小规则
  1. 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
  2. 变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
  • 预编译前奏
  1. imply global 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
  2. 一切声明的全局变量，全是window的属性； var a = 12;等同于Window.a = 12;
  • 函数预编译发生在函数执行前一刻。

399424f13cd536a5c14455973cba9668.png

https://www.dkcj.cn/info/4604.html

相关文章：

2014百度面试题目---“求比指定整数大且最小的不重复数”解答

题目&#xff1a;给定任意一个正整数&#xff0c;求比这个数大且最小的“不重复数”&#xff0c;“不重复数”的含义是相邻两位不相同&#xff0c;例如1101是重复数&#xff0c;而1201是不重复数。 代码&#xff1a; #include <iostream> using namespace std;bool istha…

编程日记2024/04/13 07:00:00

3DMAX 批量 场景 对象 导出 .X格式 脚本

一、首先你需要下载一个 Total Commader文件管理软件。利用这个软件你可以收集文件夹下包含子文件夹下的max文件&#xff08;或完整路径&#xff09;打开TotalCMD后使用查找文件&#xff1a;&#xff08;如图红框中的操作&#xff09;1.2.3. 复制文件名和完整路径后粘贴到文本文…

编程日记2024/04/13 06:30:00

C++复数类面向对象的参考

#include <bits/stdc.h> #include <future> #include <thread>using namespace std;class Complex { public:Complex (double r 0, double i 0): re (r), im (i) {} ///冒号后面是初始化的过程&#xff0c;注意分清初始化和赋值的区别Comp…

编程日记2024/04/13 06:00:00

快速排序 算法

算法思路 序列终任意选择一个数&#xff0c;把序列分为比这个数大和比这个数小的两个子序列不断重复以上步骤(递归) 代码实现 int partition1(vector<int> &arr, int begin , int end) {int ret arr[begin];int index begin 1;for (int i index;i < end; i…

编程日记2024/04/13 05:30:00

利用Spring AOP与JAVA注解为系统增加日志功能

Spring AOP一直是Spring的一个比较有特色的功能&#xff0c;利用它可以在现有的代码的任何地方&#xff0c;嵌入我们所想的逻辑功能&#xff0c;并且不需要改变我们现有的代码结构。 鉴于此&#xff0c;现在的系统已经完成了所有的功能的开发&#xff0c;我们需要把系统的操作日…

编程日记2024/04/13 05:00:00

maven引入hadoop_如何添加Hadoop依赖通过Maven

匿名用户1级2017-09-09 回答Hadoop开发中需要用到至少不下10个的依赖包&#xff0c;它们相互间的依赖关系比较复杂&#xff0c;不同版本的依赖关系也有所不同&#xff0c;而间接依赖导致的程序错误并不会在运行之前报错&#xff0c;因此确定适合一个版本的依赖包&#xff0c;会…

编程日记2024/04/13 04:30:00

js 闭包作用

2019独角兽企业重金招聘Python工程师标准>>> 一、变量的作用域 要理解闭包&#xff0c;首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种&#xff1a;全局变量和局部变量。 Javascript语言的特殊之处&#xff0c;就在于函数内部可以直接读取全…

编程日记2024/04/13 04:00:00

vue实用组件——页面公共头部

可伸缩自适应的页面头部&#xff0c;屏幕适应范围更广泛 效果如下&#xff1a; 代码如下&#xff1a; <template> <div class"site-header"> <div class"logo"><img src"/assets/icons/logo.png" alt"">&…

编程日记2024/04/13 03:30:00

插入排序 算法

算法思路 维护一段有序数列同时遍历待排序数列&#xff0c;在有序数列中找到合适的位置插入元素 基本代码 实现如下: void insertion(vector<int>& arr){for(int i1;i<arr.size();i){int tempi;for(int ji-1;j>0;j--){//有序序列不断得增加if(arr[temp]<…

编程日记2024/04/13 03:00:00

线段树入门【转】

文章来自 &#xff1a; http://blog.csdn.net/x314542916/article/details/7837276 学习算法&#xff0c;自己收藏着。 线段树的入门级 总结 线段树是一种二叉搜索树&#xff0c;与区间树相似&#xff0c;它将一个区间划分成一些单元区间&#xff0c;每个单元区间对应线段树中的…

编程日记2024/04/13 02:30:00

python自动化框架pytest pdf_pytest+python下的UI自动化基础框架

整体设计模式&#xff1a;config目录&#xff1a;存放一些公共的静态文件&#xff0c;如项目名称&#xff0c;配置文件等这些环境变量(可以用其他组件替换&#xff0c;如sql&#xff0c;主要能把配置文件的内容被程序识别)。httptrquest目录&#xff1a;存放接口代码&#xff0…

编程日记2024/04/13 02:00:01

ny520 最大素因子 筛选法求素数

最大素因子时间限制&#xff1a;1000 ms | 内存限制&#xff1a;65535 KB难度&#xff1a;2 描述 GreyAnts最近正在学习数论中的素数&#xff0c;但是现在他遇到了一个难题&#xff1a;给定一个整数n,要求我们求出n的最大素因子的序数,例如&#xff1a;2的序数是1,3的序数是2…

编程日记2024/04/13 01:30:01

JAVA_SE之内部类

内部类分类&#xff1a; 1. 成员内部类 静态内部类 非静态内部类 2. 局部内部类 3. 匿名内部类 1. 成员内部类&#xff1a; package com.atguigu.java; /** 类的第5个成员&#xff1a;内部类* 1.相当于说&#xff0c;我们可以在类的内部再定义类。外面的类&#xff1a;外部类。…

编程日记2024/04/13 01:00:00

希尔排序 算法

算法思路 插入排序的改进版&#xff0c;选择插入距离远的元素选择一个间距&#xff0c;将序列分成很多子序列并行插入排序降低间距&#xff0c;并重复插入元素&#xff0c;直到间距将为1&#xff0c;完成排序。 算法实现 void shell_sort(vector<int> &arr, int b…

编程日记2024/04/13 00:30:00

解决Apache CXF 不支持传递java.sql.Timestamp和java.util.HashMap类型问题

在项目中使用Apache开源的Services Framework CXF来发布WebService&#xff0c;CXF能够很简洁与Spring Framework 集成在一起&#xff0c;在发布WebService的过程中&#xff0c;发布的接口的入参有些类型支持不是很好&#xff0c;比如Timestamp和Map。这个时候我们就需要编写一…

编程日记2024/04/13 00:00:00

python教学上机实验报告怎么写_Python基础（下）

不要忘了冒号啊&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;对于基本数据类型的变量&#xff0c;变量传递给函数后&#xff0c;函数会在内存中复制一个新的变量&#xff0c;从而不影响原来的变量。(我们称此为值传递)但是对于表来说&#xff0c;表传递给函数…

编程日记2024/04/12 23:30:00

比较有用的样式

背景图水平垂直居中 background:#ebebeb url(/Images/BlogHTImg/bkht_jia.jpg) center center no-repeat; 背景图居左垂直居中 background:#ebebeb url(/Images/BlogHTImg/bkht_jia.jpg) left center no-repeat; background:#ebebeb url(/Images/BlogHTImg/bkht_jia.jpg) 5px…

编程日记2024/04/12 23:00:00

Python：线程之定位与销毁

背景 开工前我就觉得有什么不太对劲&#xff0c;感觉要背锅。这可不&#xff0c;上班第三天就捅锅了。 我们有个了不起的后台程序&#xff0c;可以动态加载模块&#xff0c;并以线程方式运行&#xff0c;通过这种形式实现插件的功能。而模块更新时候&#xff0c;后台程序自身不…

编程日记2024/04/12 22:30:00

选择排序 算法

算法思路 维护一段有序数列&#xff0c;同时遍历待排序数列&#xff0c;找到最小的元素插入有序数列中重复&#xff0c;直到待排序数列没有剩余元素 代码实现 void select_sort(vector<int> &arr) {for (int i 0;i < arr.size(); i) {int temp arr[i];int in…

编程日记2024/04/12 22:00:00

hdu2236 无题II 最大匹配 + 二分搜索

中文题目&#xff0c;题意大家都明白。 看到“不同的行和列”就觉得要用二分匹配来做。要求最大值与最小值的差值最小&#xff0c;是通过枚举边的下限和上限来完成。 枚举过程是这样的&#xff0c;在输入的过程可以记录下边权的最大值MAX和最小值MIN。那么他们的边权的差值的最…

编程日记2024/04/12 21:30:00

python十大标准_python对标准类型的分类

python的标准类型可以按照三种方式分类。一、按存储模型分类按存储模型分可以分为原子(标量)类型和容器类型。原子(标量)类型指对象(这里的对象不是对象数据类型&#xff0c;而是任何可能的值)的值只能含有一种数据类型&#xff0c;比如数值和字符串。容器类型指它们的值可以含…

编程日记2024/04/12 21:00:00

mysql慢查询开启及分析方法

最近服务维护的公司的DB服务器&#xff0c;总是会出现问题&#xff0c;感觉需要优化一下了&#xff0c;登陆上去&#xff0c;发现慢查询日志都没有开&#xff0c;真是惭愧&#xff0c; 故果断加上慢查询日志&#xff0c;经过分析sql记录&#xff0c;发现问题很多&#xff0c;开…

编程日记2024/04/12 20:30:00

如何在调试页面的时候清除页面的缓存?

1.按F12,弹出下图 2.点击右上角的三个点: 3.点击settings 4.找到Network,下面的Disable cache(while DevTools is open) 转载于:https://www.cnblogs.com/studybrother/p/10396990.html

编程日记2024/04/12 20:00:00

JAVA图片处理--缩放，切割，类型转换

import java.io.*; import java.awt.*; import java.awt.image.*; import java.awt.Graphics; import java.awt.color.ColorSpace; import javax.imageio.ImageIO;public class ChangeImageSize {/** *//*** 缩放图像* param srcImageFile 源图像文件地址* param result …

编程日记2024/04/12 19:30:00

文本框自动提示_Excel办公小技巧，使用艺术字与文本框，就是那么的简单

Excel中的艺术字同时拥有文字和图形两种对象的属性&#xff0c;不仅可以修改其中的内容&#xff0c;还可以调整形状的大小、设置边框以及内部填充等效果&#xff0c;常在编辑表格标题或者输入一些比较有提示性的文本时使用&#xff0c;在突出关键内容的同时美化表格效果添加艺术…

编程日记2024/04/12 19:00:00

Linux之父盟友分道扬镳 直言开源模式软肋

Linux之父盟友分道扬镳 直言开源模式软肋2005-09-06 12:53:00标签&#xff1a;linux职场开源休闲从1993年起&#xff0c;Larry McVoy就一直是Linux之父Linus Torvalds最忠实的盟友之一。 然而经历了这些年后&#xff0c;McVoy开始相信&#xff0c;开源这种风靡一时、纷纷被…

编程日记2024/04/12 18:30:00

身份证第18位计算

本文计算方式源自 百度百科&#xff0c;根据计算方式&#xff0c;Java计算代码如下文所示。 计算方法 1、将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分别为&#xff1a;7&#xff0d;9&#xff0d;10&#xff0d;5&#xff0d;8&#xff0d;4&…

编程日记2024/04/12 18:00:00

归并排序 算法

算法思路 将一个数列不断拆分为子序列&#xff0c;直到只剩下0或者1个元素再将子序列按顺序合并为原来数列的大小&#xff0c;完成排序 代码实现 //合并两个有序数组 vector<int> merge_two_sort(vector<int> &arr1, vector<int> &arr2) {vector&…

编程日记2024/04/12 17:30:00

DRBD配置参数

用户手册&#xff1a;http://www.drbd.org/users-guide语法及详解参数&#xff1a;http://www.drbd.org/users-guide-emb/re-drbdconf.html官方示例&#xff1a;http://www.drbd.org/users-guidedrbd及其配置文件中的相关名词&#xff1a; failover&#xff1a;失效转移。通俗地…

编程日记2024/04/12 17:00:00

两个苹果手机怎么传通讯录_苹果手机通讯录丢失怎么恢复？货真价实的通讯录恢复技巧...

苹果手机如果只是误删了某个好友的联系方式&#xff0c;完全可以通过其他共同好友要到联系方式&#xff0c;重新添加回手机。如果没有共同好友&#xff0c;或者将手机通讯录所有联系人丢失或误删&#xff0c;该怎么办呢&#xff1f;今天小编就教大家几种找回误删通讯录联系人的…

编程日记2024/04/12 16:30:00