js函数初始

定义方式一

<script>
		first();
		function first(){
			console.log('定义方法一');
		}
		</script>

在这里插入图片描述

解析:在函数定义之前就进行调用。并未出错,应该是提前加载。

定义方式二

<script>
		second();
		var a=function second(){
			console.log('定义方法二');
		}
		</script>

在这里插入图片描述
注释:发现函数调用出错。所以此种方式函数未被提前加载。
插入一个js编译原理

<script>
		 var a=10;
		 
		</script>

编译步骤:

分词

js代码由一句句话组成,分词目的把这些代码分解为一个个有意义代码块。
var、a、=、2、;

解析

对分词得到的一个个代码块进行解析生成一颗抽象的语法树(AST).
注意:js代码无法直接运行,必须先通过js编译器进行编译。然后通过js引擎执行代码逻辑。编译和运行的时间差间隔很小,几乎感受不到。
抽象语法树:定义了代码本省身,通过操作这棵树,可以精确定位到赋值语句、声明语句、运算语句。
针对var a=2;展开分析。
该语句是一个赋值语句,但他也是一个声明语句。通过js解析器把它解析成一颗抽象树。
在这里插入图片描述
抽象树分析:
1.树的顶端:Program body,代表写的是一个程序。
2.该程序的唯一节点:Variable Declaration:变量声明。
3.展开唯一的子节点,可以看到包含了declarations1和kind(种类).。继续展开declarations[1],发现一个Variable Declarator节点,表示变量声明。
在这里插入图片描述
展开Variable Declarator节点,可以看到id(identifier,代表变量名,即此处的a)和init(表示变量的初始化操作)。
注:如果没有给定义变量赋值,js解释器会给变量赋初始值。是语义上的空,但不等同于null。
在这里插入图片描述

在这里插入图片描述
针对一下情况,再次进行展开解释。
在这里插入图片描述

在这里插入图片描述
如图可得,在加了一个console语句后,语法树上又多了一个节点。

生成代码

js在该步骤把第二步生成的抽象语法树进行转换成可执行的代码。
抽象语法树在线调试网址:添加链接描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值