JavaScript如何执行语句

news2024/10/7 9:28:23

目录

语法/词法分析

预编译

解释执行

预编译什么时候发生

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对象中寻找,说白了也就是一种就近原则。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

centos7 部署kubernetes(带自动部署脚本)

目录 一、实验规划 1、规划表 2、安装前宿主机检查 1.配置主机名 2.制作ssh免密(VM1中执行) 3.修改hosts 文件 4. 修改内核相关参数 5.加载模块 6. 清空iptables、关闭防火墙、关闭交换空间、禁用selinux 7. 安装ipvs与时钟同步 8.配置docker的…

实现两个table一起滚动的效果

效果 代码 css相关 重点是.head-box .body-box-right .body-box-left 三个类的设置 .box {display: flex;justify-content: flex-start;}table {width: 500px;}tr,th {display: flex;justify-content: space-around;align-content: space-around;height: 50px;}td {width: 8…

Vue 使用 vite 创建项目

vite 是新一代前端构建工具,和 webpack 类似。 vite 的启动速度更快。在开发环境中,不需要打包就可以直接运行。 vite 的更新速度更快。当修改内容后,不需要刷新浏览器,页面就会实时更新。 vite 完全是按需编译。它只会编译需要…

(二分查找) 11. 旋转数组的最小数字 ——【Leetcode每日一题】

❓剑指 Offer 11. 旋转数组的最小数字 难度:简单 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。 给你一个可能存在 重复 元素值的数组 numbers ,它原来是一个升序排列的数组,并按上述情形进行了一次旋转…

LeetCode 37题:解数独

题目 编写一个程序,通过填充空格来解决数独问题。 数独的解法需 遵循如下规则: 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图) 数独…

Docker中MySQL应用部署操作步骤

在linux系统下安装mysql、安装redis是非常麻烦的,但是docker出现后,应用安装会非常简洁。 1.MySQL部署 2.docker中部署mysql的步骤 创建mysql容器 这样mysql就部署好了。 外部机器连接docker中部署的mysql

Python学习笔记_基础篇_初识python

Python简介 python的创始人为吉多范罗苏姆(Guido van Rossum)。1989年的圣诞节期间,吉多范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承。 Python和其他语言的对比&#xff…

15个免费的图标素材网站推荐

想象力没有限制。你在寻找下载免费矢量图标网站吗?本文为需要使用各种图标美化网页布局和界面设计,简单提升更好用户体验的设计师提供了15个矢量图标网站。 1.即时设计资源社区 即时设计是国内一款专业级的 UI 设计工具,像 PC 端的网页&…

htmlCSS-----弹性布局

目录 前言 什么是弹性布局 样式 学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式) 2.父元素容器的属性(*5) (1)主轴 代码示例: (2)交叉轴 3.子元素…

资料分析(三)—— 基期、现期、人口、增长量

基期 基期值 现期值 - 增长量 增长量/增长率 现期值/1&#xff08;间隔)增长率 化除为乘 &#xff1a;当增长率&#xff5c;r| < 5% 时&#xff0c;&#xff0c; 注&#xff1a;当选项首位相同&#xff0c;第二位也相同时&#xff0c;只能用直除 基期和差 (结合选…

Android9开机启动与FBE过程完整介绍与LOG流程

一&#xff0c;开机整体流程概述 Init进程作为Android的第一个user space(用户空间)的进程&#xff0c;它是所有 Android 系统 native service 的祖先&#xff0c;它的进程号是 1。 init进程工作分为第一阶段和第二阶段。 二&#xff0c;init fisrt stage 代码参考&#xff…

js操作剪贴板讲解

文章目录 复制&#xff08;剪切&#xff09;到剪贴板Document.execCommand()Clipboard复制Clipboard.writeText()Clipboard.write() copy&#xff0c;cut事件 从剪贴板进行粘贴document.execCommand(paste)Clipboard粘贴Clipboard.readText()Clipboard.read() paste 事件 安全性…

使用docker快速搭建wordpress服务,并指定域名访问

文章目录 引入使用docker快速跑起服务创建数据库安装wordpress服务配置域名 引入 wordpress是一个基于PHP语言编写的开源的内容管理系统&#xff08;CMS&#xff09;&#xff0c;它有丰富的插件和主题&#xff0c;可以非常简单的创建各种类型的网站&#xff0c;包括企业网站、…

云安全攻防(十一)之 容器编排平台面临的风险

前言 容器技术和编排管理是云原生生态的两大核心部分——前者负责执行&#xff0c;后者负责控制和管理&#xff0c;共同构成云原生技术有机体&#xff0c;我们以 Kubernetes 为例&#xff0c;对容器编排平台可能面临的风险进行分析 容器编排平台面临的风险 作为最为流行的云…

LeetCode150道面试经典题-- 快乐数(简单)

1.题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&am…

OpenLayers实战,高德GCJ-02坐标系转WGS-84坐标系

专栏目录: OpenLayers实战进阶专栏目录 前言 本章实现高德GCJ-02坐标系转WGS-84坐标系。日常开发中经常遇到源坐标高德的情况,这时候如果地图不是高德,而是使用的wgs84坐标系的地图,或者其他坐标系的情况下,就会导致位置偏移,本章就是解决高德坐标偏移问题。 二、依赖…

Detecting Twenty-thousand Classes using Image-level Supervision

Detecting Twenty-thousand Classes using Image-level Supervision 摘要背景方法PreliminariesDetic:具有图像类别的检测器loss技术细节扩展Grad-CAMGrad-CAM原理 总结 摘要 摘要 由于检测数据集的规模较小&#xff0c;目前的物体检测器在词汇量方面受到限制。而图像分类器的数…

深入了解Linux运维的重要性与最佳实践

Linux作为开源操作系统的代表&#xff0c;在企业级环境中的应用越来越广泛。而在保障Linux系统的正常运行和管理方面&#xff0c;Linux运维显得尤为关键。本文将介绍Linux运维的重要性以及一些最佳实践&#xff0c;帮助读者更好地了解和掌握Linux系统的运维技巧。 首先&#xf…

【Linux初阶】system V消息队列 + system V信号量

文章目录 一、system V消息队列&#xff08;了解&#xff09;二、system V信号量&#xff08;了解&#xff09;1.信号量是什么2.临界资源和临界区3.互斥4.为什么要信号量 三、IPC资源的组织方式结语 一、system V消息队列&#xff08;了解&#xff09; 消息队列提供了一个从一…

玩转IndexedDB,比localStorage、cookie还要强大的网页端本地缓存

随着浏览器的功能不断增强&#xff0c;越来越多的网站开始考虑&#xff0c;将大量数据储存在客户端&#xff0c;这样可以减少从服务器获取数据&#xff0c;直接从本地获取数据。 现有的浏览器数据储存方案&#xff0c;都不适合储存大量数据&#xff1a;Cookie 的大小不超过 4K…