重学前端四---Expressions（表达式）、Statement (语句)以及Structure(结构化)

一、语法树和运算符优先级的关系Grammar Tree vs Priority

Grammar
- Grammar Tree vs Priority 语法树和运算符
- Left hand side & Right hand side 运算符左值和右值
Tree vs Priority
- + --3
- * /--2
- ()---1
Expression
- Member运算优先级最高
  - a.b --------成员访问
  - a[b] -------成员访问支持运行时
  - foo`tring`
  - super.b ----class
  - super['b']
  - new.target
  - new Foo()---带括号的new比不带括号的优先级更高
```
3 > 2 && 2 > 1
// return true

3 > 2 > 1
// 返回 false，因为 3 > 2 是 true，并且 true > 1 is false
// 加括号可以更清楚：(3 > 2) > 
```
- Call 低于new和Member运算
  - foo() 基础的Call Expression
  - super()
  - foo()['b'] 降级Call Expression
  - foo().b 降级Call Expression
  - foo()abc 降级Call Expression
Reference类型标准中的类型
- Object 对象
- Key 可以是string或者symbol
  
  Reference类型取出来的是一个Object 和一个Key
- delete
- assign
Left hand side & Right hand side 左手和右手运算

Left hand side在等号左边，Right hand side在等号右边

Left hand Expression一定是Right hand Expression（在JavaScript里面没有例外）
```
a.b = c;  //成立
a + b = c // 错误
```
- Updata Expression 自增自减不能放在等号左边
  - a++
  - a--
  - --a
  - ++a
- Unary Expression 单目运算符
  - delete a.b
  - void foo() undefined 改变语法结构
  - typeof a
  - +a 不会改变表达式的值，如果后边是字符串会发生类型转换
  - -a
  - ~a 位运算整数按位取反，不是整数强制转换整数
  - !a 非运算针对布尔型的运算两个!!把数字强制转换成布尔类型
  - await a
- Multiplicative
  - * / % 乘除余
- Addtive
  - + - 加减
- Shift
  - << >> >>> 左移右移
- elationship
  - < > <= >= instanceof in 关系比较
    
    字符串字典顺序
- Equality 相等
  - == 优先把布尔型的变量转换为number类型
  - !=
  - ===
  - !==
- Bitwise 位运算
  - & ^ | 按位与异或按位或
- Logical 逻辑运算短路原则
  - &&
  - ||
- Conditional 三目运算符
  - ?:
Exponental 右运算符 ** 乘方

javascript唯一一个右结合的运算符 3**2**3 = 3**8

二、运行时的类型转换和引用类型

Runtime
- Type Convertion
- Reference

Type Convertion 类型转换

false' == false // false
''== false      // true
'  '== false    // true
Number(' ')     //0
Number('')      //0
Number(false)   //0

==两边类型不同全转换为Number再进行比较，所以推荐使用===。

Unboxing拆箱转换

Boxing装箱转换

三、运行时相关概念

Statement 语句
- Grammar
  - 简单语句不会容纳其他语句
    - ExpressionStatement 表达式语句
    - EmptyStatement 空语句 ';'
    - DebuggerStatement 断点debugger;
    - ThrowStatement 抛出异常 throw+空格+表达式
    - ContinueStatement 和循环语句匹配，结束单次循环，后面循环继续
    - BreakStatement 和循环语句匹配，结束单次循环，结束整个循环
    - ReturnStatement 函数中使用，返回函数值
  - 复合语句
    - BlockStatement ｛语句列表｝单条语句变多条语句
    - IfStatement 条件语句
    - SwitchStatement 多分支结构，不建议在JavaScript使用，用if代替
    - IterationStatement 代表多个语句，while，do while,for,for await
    - WithStatement 通过with打开一个对象，把对象所有的属性直接放进作用域
    - LabelledStatement
    - TryStatement 三段结构 try\catch\Finally
  - 声明
声明
- FunctionDeclaration 函数声明 4种形态
  - function* generator声明
  - Async function 异步函数声明
  - Async function* 异步产生器
- GeneratorDeclaration 生成器声明
- AsyncFunctionDeclaration 异步函数声明
- AsyncGeneratorDeclaration 异步生成器声明
- VariableStatement 变量声明可声明可计算
- ClassDeclaration 类声明
- LexicalDeclaration 词汇声明 const let
  
  function、function*、async function、async function*、var作用范围function body，没有先后关系，当做第一行处理。 class、const、let声明之前调用报错（建议）
预处理pre-process

在代码执行之前javascript引擎会对代码做预先处理,var不管是写在函数哪个位置，if里面 return之后， catch里面 finally里面都会预处理声明到函数级别。
作用域
运行时
- Completion Record 语句执行结果的记录
```
if(x == 1)
    return 10;
```
  - [[type]]:normal,break,continue,renturn,or throw
  - [[value]]:基本类型
  - [[target]]:label
- Lexical Environment 词汇环境作用域