【编译技术】：解读 Babel AST Format——03

1. 什么是 Babel AST Format？

The Babel parser generates AST according to Babel AST format. It is based on ESTree spec with some deviations.

2. 本期涉及哪些 AST node types？

本期涉及：

• Classes
  • ClassBody
  • ClassMethod
  • ClassPrivateMethod
  • ClassProperty
  • ClassPrivateProperty
  • ClassDeclaration
  • ClassExpression
  • MetaProperty

3. 语法规范回顾

3.1. ES6 语法定义

3.2. AST Node

代码语言：javascript复制

export interface ClassExpression extends BaseNode {
  type: "ClassExpression";
  id: Identifier | null;
  superClass: Expression | null;
  body: ClassBody;
  decorators: Array<Decorator> | null;
  implements: Array<TSExpressionWithTypeArguments | ClassImplements> | null;
  mixins: InterfaceExtends | null;
  superTypeParameters: TypeParameterInstantiation | TSTypeParameterInstantiation | null;
  typeParameters: TypeParameterDeclaration | TSTypeParameterDeclaration | Noop | null;
}

export interface ClassDeclaration extends BaseNode {
  type: "ClassDeclaration";
  id: Identifier;
  superClass: Expression | null;
  body: ClassBody;
  decorators: Array<Decorator> | null;
  abstract: boolean | null;
  declare: boolean | null;
  implements: Array<TSExpressionWithTypeArguments | ClassImplements> | null;
  mixins: InterfaceExtends | null;
  superTypeParameters: TypeParameterInstantiation | TSTypeParameterInstantiation | null;
  typeParameters: TypeParameterDeclaration | TSTypeParameterDeclaration | Noop | null;
}

export interface ClassBody extends BaseNode {
  type: "ClassBody";
  body: Array<ClassMethod | ClassPrivateMethod | ClassProperty | ClassPrivateProperty | TSDeclareMethod | TSIndexSignature>;
}

export interface ClassMethod extends BaseNode {
  type: "ClassMethod";
  kind: "get" | "set" | "method" | "constructor";
  key: Identifier | StringLiteral | NumericLiteral | Expression;
  params: Array<Identifier | Pattern | RestElement | TSParameterProperty>;
  body: BlockStatement;
  computed: boolean;
  static: boolean;
  generator: boolean;
  async: boolean;
  abstract: boolean | null;
  access: "public" | "private" | "protected" | null;
  accessibility: "public" | "private" | "protected" | null;
  decorators: Array<Decorator> | null;
  optional: boolean | null;
  returnType: TypeAnnotation | TSTypeAnnotation | Noop | null;
  typeParameters: TypeParameterDeclaration | TSTypeParameterDeclaration | Noop | null;
}

export interface ClassProperty extends BaseNode {
  type: "ClassProperty";
  key: Identifier | StringLiteral | NumericLiteral | Expression;
  value: Expression | null;
  typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop | null;
  decorators: Array<Decorator> | null;
  computed: boolean;
  static: boolean;
  abstract: boolean | null;
  accessibility: "public" | "private" | "protected" | null;
  declare: boolean | null;
  definite: boolean | null;
  optional: boolean | null;
  readonly: boolean | null;
}

export interface ClassPrivateMethod extends BaseNode {
  type: "ClassPrivateMethod";
  kind: "get" | "set" | "method" | "constructor";
  key: PrivateName;
  params: Array<Identifier | Pattern | RestElement | TSParameterProperty>;
  body: BlockStatement;
  static: boolean;
  abstract: boolean | null;
  access: "public" | "private" | "protected" | null;
  accessibility: "public" | "private" | "protected" | null;
  async: boolean;
  computed: boolean;
  decorators: Array<Decorator> | null;
  generator: boolean;
  optional: boolean | null;
  returnType: TypeAnnotation | TSTypeAnnotation | Noop | null;
  typeParameters: TypeParameterDeclaration | TSTypeParameterDeclaration | Noop | null;
}

export interface ClassPrivateProperty extends BaseNode {
  type: "ClassPrivateProperty";
  key: PrivateName;
  value: Expression | null;
  decorators: Array<Decorator> | null;
}

3.3. 示例1：

语法：

代码语言：javascript复制

class BindingIdentifier{ }

示例：

代码语言：javascript复制

class MyClass {
}

AST：

3.4. 示例2：

语法：

代码语言：javascript复制

class BindingIdentifier extends LeftHandSideExpression{ }

示例：

代码语言：javascript复制

class Parent {
}
class Child extends Parent {
}

AST：

3.5. 示例3：

示例：

代码语言：javascript复制

class Parent {
}
class Child extends Parent {
    constructor(props){
        super(props);
    }
    name(){}
    get age(){}
    set age(pAge){}
}

AST：

3.6. 示例4：

示例：

代码语言：javascript复制

class MyClass {
    static name(){}
    async fn1(){}
    * fn2(){}
}

AST：

3.7. 示例5：

示例：

代码语言：javascript复制

class MyClass {
    static age = 20;
    xm = "John";
}

AST：

3.8. 示例6：

示例：

代码语言：javascript复制

const Foo = class NamedFoo {
  constructor() {}
  whoIsThere() {
    return NamedFoo.name;
  }
}

AST：

3.9. 示例7：

示例：

代码语言：javascript复制

class A { 
    #b = 1; 
    #c() {}
}

AST：

参考资料：Modules

http://www.ecma-international.org/ecma-262/6.0/index.html#sec-class-definitions https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md#classes

babel.js http

0 人点赞