JavaScript如何执行语句

目录

语法/词法分析

预编译

解释执行

预编译什么时候发生

js运行三步曲

预编译前奏

预编译步骤

巩固基础练习

语法/词法分析

按语句块的粒度解析成抽象语法树 ,分析该js脚本代码块的语法是否正确，如果出现不正确，则向外抛出一个语法错误（SyntaxError），停止该js代码块的执行，然后继续查找并加载下一个代码块；如果语法正确，则进入预编译阶段, 此时不涉及到运行时;

预编译

预编译分为全局预编译和局部预编译，全局预编译发生在页面加载完成时执行，而局部预编译发生在函数执行的前一刻。 预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 。只有在解释执行阶段才会进行变量初始化 。

解释执行

js引擎解析代码，解析一行执行一行 ;  将实参带入形参, 直接运行编译好的代码块 ;

预编译什么时候发生

预编译分为全局预编译和局部预编译，全局预编译发生在页面加载完成时执行，而局部预编译发生在函数执行的前一刻。

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

js运行三步曲

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

预编译前奏

imply global暗示全局变量，任何变量，如果变量未经声明就赋值，这些变量就为全局对象所有。一切声明的全局变量和未经声明的变量，全归window所有。

例如：

var a = 123;
window.a = 123;

下面这个函数里面只有一个连等的操作，赋值操作都是自右向左的，而b是未经声明的变量，所以它是归window的，我们可以直接使用window.b去使用它。

function test(){// 这里的b是未经声明的变量，所以是归window所有的。var a = b = 110;
}

预编译步骤

首先JavaScript的执行过程会先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有错误的话，开始从上到下解释一行执行一行。

局部预编译的4个步骤：

  1. 创建AO对象（Activation Object）执行期上下文。
  2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
  3. 将实参值和形参统一。
  4. 在函数体里面找函数声明，值赋予函数体。

全局预编译的3个步骤：

  1. 创建GO对象（Global Object）全局对象。
  2. 找变量声明，将变量名作为GO属性名，值为undefined
  3. 查找函数声明，作为GO属性，值赋予函数体

由于全局中没有参数的的概念，所以省去了实参形参相统一这一步。

tip：GO对象是全局预编译，所以它优先于AO对象所创建和执行

巩固基础练习

关于AO对象的例子

// 函数
function fn(a){console.log(a);// 变量声明+变量赋值（只提升变量声明，不提升变量赋值）var a = 123;console.log(a);// 函数声明function a(){};console.log(a);// 函数表达式var b = function(){};console.log(b);// 函数function d(){};
}
//调用函数
fn(1);

1.预编译第1步：创建AO对象

AO{ }

2.预编译第2步：找形参和变量声明，将形参名和变量名作为AO对象的属性名

AO{a : undefined,b : undefined
}

3.预编译第3步：将实参值和形参统一

AO{a : 1,b : function(){...}
}

4.预编译第4步：在函数体里面找函数声明，值赋予函数体。

AO{a : function a(){...},b : undefined,d : function d(){...}
}

最后输出结果：

// 函数
function fn(a){console.log(a);	 	//根据AO对象中的数据第一个打印的是：fn()// 变量声明+变量赋值（只提升变量声明，不提升变量赋值）var a = 123;		// 执行到这时，由于变量赋值是不提升的，所以函数被123覆盖了console.log(a);		// 123// 函数声明function a(){};		// 这里被提升上去了，可以忽略console.log(a);		// 123// 函数表达式var b = function(){};console.log(b);		// 根据AO对象中的数据：fn()// 函数function d(){};
}
//调用函数
fn(1);

函数执行完毕，销毁AO对象。

关于GO对象的例子

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

1.全局预编译第1步：创建GO对象

GO{}

2.全局预编译第2步：找变量声明，将变量名作为GO属性名，值为undefined

GO{global：undefined
}

3.全局预编译第3步：查找函数声明，作为GO属性，值赋予函数体

GO{
global：undefined
}

4.局部预编译第1步：创建AO对象

AO{}

5.局部预编译第2步：找形参和变量声明，将形参名和变量名作为AO对象的属性名

AO{global: undefined
}

6.局部预编译第3步：将实参值和形参统一（此函数没有形参）

AO{global: undefined
}

7.局部预编译第4步：在函数体里面找函数声明，值赋予函数体。（此函数内没有函数声明）

AO{global: undefined
}

最的结果：

global = 100;
function test(){console.log(global);		// 根据AO对象中的数据：undefinedvar global = 200;		// 执行到这时，200覆盖了undefinedconsole.log(global);		// 200var global = 300;
}
test();
var global;

tip：关于GO对象和AO对象，它们俩是一个种链式关系，就拿上面的这个例子来说吧，如果在函数体的内部没有定义global变量，这也意味着AO对象中将有这个global这个属性。那如果没有会怎么办？它会去GO对象中寻找，说白了也就是一种就近原则。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/72659.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

案例： 用户消费数据分析--Pandas

案例： 用户消费数据分析--Pandas

1. 数据读入 2. 数据处理–日期处理 3. 用户整体消费趋势分析 4. 用户个体消费分析 4.1 用户消费数量与消费金额关系的散点图 4.2 每位用户消费金额分布 4.2.1 消费金额贡献度折线图 用户贡献度折线图 4.2.2 消费金额占比前80%的客户，消费分布直方图 4.3 消费时…
阅读更多...
C++ 面向对象三大特性——多态

C++ 面向对象三大特性——多态

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C 继承 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;面向对象三大特性的&#xff0c;封装&#xff0c;继承&#xff0c;多态&#xff…
阅读更多...
步步为赢：打造一个酷炫而吸引人的Hadoop HDFS分布式文件系统集群部署方案

步步为赢：打造一个酷炫而吸引人的Hadoop HDFS分布式文件系统集群部署方案

文章目录 版权声明一 分布式存储缘起二 分布式的基础架构2.1 大数据架构模式2.2 主从模式 三 HDFS的基础架构HDFS的角色组成 四 HDFS集群环境部署4.1 安装包下载4.2 Hadoop安装包目录结构4.3 修改配置文件&#xff0c;应用自定义设置4.4 分发Hadoop文件夹4.5 配置环境变量4.6 授…
阅读更多...
FL Studio for Windows-21.1.0.3713中文直装版功能介绍及系统配置要求

FL Studio for Windows-21.1.0.3713中文直装版功能介绍及系统配置要求

FL Studio 21简称FL水果软件,全称是&#xff1a;Fruity Loops Studio编曲&#xff0c;由于其Logo长的比较像一款水果因此&#xff0c;在大家更多的是喜欢称他为水果萝卜&#xff0c;FL studio21是目前最新的版本&#xff0c;这是一款可以让你的计算机就像是一个全功能的录音室&…
阅读更多...
开发者不可错过的提效工具——低代码开发

开发者不可错过的提效工具——低代码开发

开发者不可错过的提效工具 基础低码功能及搭建 01、代码生成器 02、工作流程 03、门户设计 04、大屏设计 05、报表设计 06、第三方登录 07、多租户实现 08、分布式调度 为什么低码平台能够成为开发者的宠儿&#xff1f; 1.低码平台能够大幅提高开发效率 2.低码平台具备高度的可…
阅读更多...
【算法基础19-模拟队列】

【算法基础19-模拟队列】

模拟队列 算法示意图 算法的伪代码 例题 实现一个队列&#xff0c;队列初始为空&#xff0c;支持四种操作&#xff1a; push x – 向队尾插入一个数 x&#xff1b;pop – 从队头弹出一个数&#xff1b;empty – 判断队列是否为空&#xff1b;query – 查询队头元素。 现在要…
阅读更多...
Matplotlib数据可视化（六）

Matplotlib数据可视化（六）

目录 1.绘制概率图 2.绘制雷达图 3.绘制流向图 4.绘制极坐标图 5.绘制词云图 1.绘制概率图 from scipy.stats import norm fig,ax plt.subplots() plt.rcParams[font.family] [SimHei] np.random.seed() mu 100 sigma 15 x musigma*np.random.randn(437) num_bins …
阅读更多...
由于找不到msvcp120.dll怎么解决？哪个解决方案操作简单

由于找不到msvcp120.dll怎么解决？哪个解决方案操作简单

我最近我的电脑遇到了一个问题&#xff0c;运行某些软件的时候出现了一个msvcp120.dll的错误提示。这个错误导致我无法正常运行一些程序&#xff0c;非常影响我的工作和娱乐体验。经过一番搜索和尝试&#xff0c;我最终成功修复了这个问题&#xff0c;现在我把修复方法分享给大…
阅读更多...
实践-传统深度学习

实践-传统深度学习

简介与安装 2 训练自己的数据集整体流程3 数据加载与预处理4 搭建网络模型5 学习率对结果的影响6 Drop-out操作7 权重初始化方法对比8 初始化标准差对结果的影响9 正则化对结果的影响10 加载模型进行测试 TensorFlow&#xff1a;每一步都需要自己做。 Keras&#xff1a;做起来更…
阅读更多...
mysql 01.三范式，数据类型

mysql 01.三范式，数据类型

01.概念的区分&#xff1a; mysql是属于DBMS层次的&#xff0c;sql语句是用于DBMS的语句。 02.sql语句详细介绍&#xff1a; SQL的概述Structure Query Language(结构化查询语言)简称SQL&#xff0c;它被美国国家标准局(ANSI)确定为关系型数据库语言的美国标准&#xff0c;后…
阅读更多...
PostgreSQL空值的判断

PostgreSQL空值的判断

PostgreSQL空值的判断 空值判断非空判断总结 空值判断 -- 查询为空的 is null,sql简写isnull select * from employees where manager_id isnull;select * from employees where manager_id is null;非空判断 -- 查询不为空的 is not null;sql简写notnull select * from empl…
阅读更多...
C++多线程场景中的变量提前释放导致栈内存异常

C++多线程场景中的变量提前释放导致栈内存异常

多线程场景中的栈内存异常 在子线程中尝试使用当前函数的资源&#xff0c;是非常危险的&#xff0c;但是C支持这么做。因此C这么做可能会造成栈内存异常。 正常代码 #include <iostream> #include <thread> #include <windows.h>// 线程函数&#xff0c;用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023