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对象中的数据:undefined
	var global = 200;		// 执行到这时,200覆盖了undefined
	console.log(global);		// 200
	var global = 300;
}
test();
var global;

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NSI45030AT1G LED驱动器方案为汽车外部及内部照明恒流稳流器(CCR)方案

关于线性恒流调节器(CCR):是一种用于控制电流的稳定输出。它通常由一个功率晶体管和一个参考电流源组成。CCR的工作原理是通过不断调节功率晶体管的导通时间来维持输出电流的恒定。当输出电流超过设定值时,CCR会减少功率晶体管的导…

探索未来:元宇宙与Web3的无限可能

随着科技的奇迹般发展,互联网已经成为了我们生活的不可分割的一部分。然而,尽管它的便利性和普及性带来了巨大的影响,但我们仍然面临着传统互联网体验的诸多限制。 购物需要不断在实体店与电商平台间切换,教育依然受制于时间与地…

数据库信息速递 -- MariaDB 裁员后,前景不确定 (翻译)

开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请加 liuaustin3微信号 ,在新加的朋友会分到3群&#xff…

【教程】零成本将小米净化器改造为无叶风扇

某宝某多上,就这么点破塑料,就要买79?!! 我这枚韭菜可不上当。咱自己做一个! 真香~

UNIX网络编程——TCP协议API 基础demo服务器代码

目录 一.TCP客户端API 1.创建套接字 2.connect连接服务器​编辑 3.send发送信息 4.recv接受信息 5.close 二.TCP服务器API 1.socket创建tcp套接字(监听套接字) 2.bind给服务器套接字绑定port,ip地址信息 3.listen监听并创建连接队列 4.accept提取客户端的连接 5.send,r…

Linux设备树详解

Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统,而个人电脑处理器产商较为单一(例如只有 Intel,AMD)同时个人电脑产商均使用 Intel 或 AMD 制造的处理器,业界形成了统一的总线/硬件接口标准…

SQLSERVER 查询语句加with (NOLOCK) 报ORDER BY 报错 除非另外还指定了 TOP、OFFSET 或 FOR XML

最近有一个项目在客户使用时发现死锁问题,用的数据库是SQLSERVER ,死锁的原因是有的客户经常去点报表,报表查询时间又慢,然后又有人在做单导致了死锁,然后主管要我们用SQLSERVER查询时要加with (NOLOCK),但是我在加完 …

Excel设置某列或者某行不某行不可以编辑,只读属性

设置单元格只读的三种方式: 1、通过单元格只读按钮,设置为只为 设置行或者列的只读属性,可以设置整行或者整列只读 2、设置单元格编辑控件为标签控件(标签控件不可编辑) 3、通过锁定行,锁定行的修改。锁定的行与只读行的区别在于锁定的行不…

【已解决】mac端 sourceTree 解决remote: HTTP Basic: Access denied报错

又是在一次使用sourcetree拉取或者提交代码时候,遇到了sourcetree报错; 排查了一会,比如查看了SSH keys是否有问题、是否与sourcetree账户状态有问题等等,最终才发现并解决问题 原因: 因为之前公司要求企业gitlab中…

智安网络|网络安全:危机下的创新与合作

随着信息技术的迅猛发展和互联网的普及,我们进入了一个高度网络化的社会。网络在提供便利和连接的同时,也带来了许多安全隐患和挑战。 一、网络安全的危险 **1.数据泄露和隐私侵犯:**网络上的个人和机构数据存在遭受泄露和盗取的风险&#…

什么是Node js?什么是React?有什么区别

JavaScript是当今最流行的编程语言之一,它用于开发多种技术,两种这样的技术是Node.js和React。许多学生很难理解Nodejs和React之间的区别。 React和Nodejs之间的主要区别在于它们的使用位置。Nodejs 用于开发应用程序的服务器端,而Reactjs用于…

docker 学习--03 环境安装(本人使用的win10 Linux也是在win10下模拟)

docker 学习–03 环境安装(本人使用的win10 Linux也是在win10下模拟) 文章目录 docker 学习--03 环境安装(本人使用的win10 Linux也是在win10下模拟)[TOC](文章目录) 1. windows10 安装docker1.1 访问官网 点击下载1.2.点击下载的…

HTTP和HTTPS协议

目录 一、HTTP和HTTPS区别🌻 二、有了https还有使用http场景吗🍊 三、https协议的工作原理💥 四、https协议的优点和缺点🍞 一、HTTP和HTTPS区别🌻 HTTP(Hypertext Transfer Protocol)和HTT…

Freemarker+thymeleaf应用实现打印银行小票

背景&#xff1a;最近项目里有个需求&#xff0c;需要动态配置一个模板&#xff0c;来打印各种不同银行或者其他行业的小票&#xff0c;下面小小记录一下实现过程。 关键词&#xff1a;Springboot, thymeleaf, Freemarker,html2image 一&#xff0c;引入依赖 <dependency…

【算法——双指针】LeetCode 202 快乐数

题目描述&#xff1a; 思路&#xff1a;快慢指针 看到循环&#xff0c;我就想起了快慢指针的方法&#xff0c;从题目我们可以看出&#xff0c;我们需要模拟一个过程&#xff1a;不断用当前的数去生成下一个数&#xff0c;生成的规则就是将当前数的各位的平方累加&#xff1b; …

项目:基于UDP的TFTP文件传输

1&#xff09;tftp协议概述 简单文件传输协议&#xff0c;适用于在网络上进行文件传输的一套标准协议&#xff0c;使用UDP传输特点&#xff1a; 是应用层协议 基于UDP协议实现 数据传输模式 octet&#xff1a;二进制模式&#xff08;常用&#xff09; mail&#xff1a;已经不再…

C++RAII内存管理技术

文章目录 一.什么是RAII内存管理技术&#xff1f;二.智能指针unique_ptrshared_ptr循环引用问题weak_ptr 一.什么是RAII内存管理技术&#xff1f; C在引入异常机制后,代码执行流的跳转变得难以预料,如果使用普通的指针进行内存管理,很难避免内存泄漏的问题(执行流跳转导致堆区…

【Java 集合框架API接口】Collection,List,Set,Map,Queue,Deque

博主&#xff1a;_LJaXi Or 東方幻想郷 专栏&#xff1a; Java | 从跨行业到跨平台 开发工具&#xff1a;IntelliJ IDEA 2021.1.3 Java集合框架 API接口 Collection接口List接口HashSet&#xff0c; TreeSetSet接口使用 HashSet 实现使用 TreeSet 实现 HashMap、TreeMapMap接口…

MySQL高可用MHA

目录 前言 一、概述 二、配置免密、组从复制 三、MHA配置 四、测试 总结 前言 MySQL高可用管理工具&#xff08;MHA&#xff0c;Master High Availability&#xff09;是一个用于自动管理MySQL主从复制的工具&#xff0c;它可以提供高可用性和自动故障转移。MHA由原版的MHA工具…

Debian/Ubuntu清理硬盘空间

Debian/Ubuntu清理硬盘空间_debian清理磁盘空间_weixin_43606319的博客-CSDN博客 1. 删除残余的配置文件 通常Debian/Ubuntu删除软件包可以用两条命令 sudo apt-get remove <package-name> sudo apt-get purge <package-name> remove将会删除软件包&#xff0…