js函数初始

定义方式一

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

js函数初始_第1张图片

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

定义方式二

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

js函数初始_第2张图片
注释:发现函数调用出错。所以此种方式函数未被提前加载。
插入一个js编译原理

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

编译步骤:

分词

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

解析

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

js函数初始_第6张图片
针对一下情况,再次进行展开解释。
js函数初始_第7张图片

js函数初始_第8张图片
如图可得,在加了一个console语句后,语法树上又多了一个节点。

生成代码

js在该步骤把第二步生成的抽象语法树进行转换成可执行的代码。
抽象语法树在线调试网址:添加链接描述
js函数初始_第9张图片

你可能感兴趣的:(js函数,javascript,前端,开发语言)