JavaScript 词法与语法知识点树状整理

# JavaScript 词法与语法知识点树状整理

## 一、词法层面 (Lexical)
### 1. 词法单元 (Tokens)
   ├── **标识符**
   │    ├── 变量命名规则 (字母/$/_开头)
   │    └── 保留字 (if/function/let等)
   ├── **字面量**
   │    ├── 数字字面量 (123, 0x1F, 1.2e3)
   │    ├── 字符串字面量 ('abc', "xyz", `模板${str}`)
   │    ├── 布尔字面量 (true/false)
   │    ├── null字面量
   │    ├── 正则表达式字面量 (/pattern/flags)
   │    └── 模板字符串解析规则
   ├── **运算符**
   │    ├── 算术运算符 (+ - * / %)
   │    ├── 比较运算符 (== === > <)
   │    ├── 逻辑运算符 (&& || !)
   │    ├── 位运算符 (& | ^ ~)
   │    └── 特殊运算符 (?. ?? **)
   └── **分隔符**
        ├── 分号 (显式/隐式ASI规则)
        ├── 大括号 {} (作用域界定)
        ├── 方括号 [] (数组/属性访问)
        ├── 圆括号 () (函数调用/表达式分组)
        └── 逗号 , (参数/元素分隔)

### 2. 词法作用域
   ├── 变量查找规则 (由内向外)
   ├── 闭包实现基础
   └── 与this绑定的区别

### 3. 词法环境
   ├── 环境记录 (Environment Record)
   └── 外部引用 (Outer Reference)

## 二、语法层面 (Syntax)
### 1. 基本语法结构
   ├── **表达式**
   │    ├── 赋值表达式 (x = 10)
   │    ├── 算术表达式 (a + b * c)
   │    ├── 函数表达式 (const fn = function(){})
   │    └── 箭头函数表达式 (() => {})
   ├── **语句**
   │    ├── 声明语句 (let/const/function)
   │    ├── 流程控制
   │    │    ├── 条件语句 (if/else)
   │    │    ├── 选择语句 (switch)
   │    │    └── 循环语句 (for/while/do-while)
   │    └── 跳转语句 (break/continue/return)
   └── **声明**
        ├── 变量声明 (var/let/const)
        ├── 函数声明 (function foo(){})
        └── 类声明 (class MyClass{})

### 2. 复杂语法结构
   ├── **函数**
   │    ├── 参数传递规则
   │    ├── 作用域链创建
   │    └── 闭包机制
   ├── **对象**
   │    ├── 字面量语法 ({ key: value })
   │    ├── 属性访问 (./[])
   │    └── 方法定义 (shorthand)
   ├── **数组**
   │    ├── 字面量语法 ([1,2,3])
   │    └── 解构赋值 (const [a,b] = arr)
   ├── **类**
   │    ├── 构造函数语法
   │    ├── 继承机制 (extends)
   │    └── 静态成员
   └── **模块**
        ├── import语法
        └── export语法

### 3. 特殊语法机制
   ├── 自动分号插入 (ASI)
   ├── 严格模式限制
   │    ├── 禁止意外全局变量
   │    └── 限制重复参数名
   ├── 解构赋值
   │    ├── 对象解构 ({x,y} = obj)
   │    └── 数组解构 ([a,b] = arr)
   └── 展开语法 (...arr)

### 4. 运行时关联语法
   ├── this绑定规则
   │    ├── 默认绑定 (window/global)
   │    ├── 隐式绑定 (obj.method())
   │    ├── 显式绑定 (call/apply)
   │    └── new绑定
   └── 原型链访问机制
        ├── __proto__ 属性
        └── prototype 属性

> 注：词法层处理字符→Token的转换，语法层处理Token→AST的转换。两者共同构成JavaScript的编译前端基础。