你不知道的Javascript 上 1作用域是什么 1.1编译原理

什么是编译

程序中一段源代码经过parse（解析）、transform(转换)、generate(生成) 三个阶段，这三个阶段统称为编译

编译过程详解

分词/词法分析 解析

1 分词：Tokenizing

分词是对代码进行有规律的切分，例如一下

//会被切分为 var、 a、 = 、 2  
var a  =  2;

会将代码根预设定的语法判断进行不同的切割，这些被切割下来的单元就是词法单元

2 词法分析：Lexing

词法分析与分词存在一定差异，主要差异在于可以对单元进行状态的判断
例如 a 属于独立的一个词法单元，或与一个完整的词法单元存在被包含的关系，则判定为归属关系，调用的是有状态的解析规则

解析/语法分析（Parsing）转换

》这个过程是将词法单元流（数组）转换为一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”
(Abstract Syntax Tree,AsT).

类似下面这个结构

//模板生成
/* 
<username name="123" id=3>
 账号：土豆丝
</username>
<password name="777" id =4>
 密码：potato
 <p>请勿填写非法字符</p>
</password>
*/
{
username:{
name: "123",
id:3
text:"账号：土豆丝"

}
password:{
name:"777"
id:4
text：“密码：potato”
p:{
 text:"请勿填写非法字符"
}
}
}

以上 是一个模板生成的抽象语法树，我们可以一个元素通过转换为类数组对象（抽象语法树 ast），将他进行相互转换

代码生成 生成(generator)

将ast转化 为可执行代码被称为生成

在React 中我们使用

import React from "react";
ReactDOM.render(
<login/>
)

对其从AST抽象语法树重新转换成元素标签进行渲染
vue和react都具备render函数的实现