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

WEBJ2EE

发布于 2020-11-05 10:38:28

5950

发布于 2020-11-05 10:38:28

文章被收录于专栏：WebJ2EE

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

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：

语法：

class BindingIdentifier{ }

示例：

class MyClass {
}

AST：

3.4. 示例2：

语法：

class BindingIdentifier extends LeftHandSideExpression{ }

示例：

class Parent {
}
class Child extends Parent {
}

AST：

3.5. 示例3：

示例：

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

AST：

3.6. 示例4：

示例：

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

AST：

3.7. 示例5：

示例：

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

AST：

3.8. 示例6：

示例：

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

AST：

3.9. 示例7：

示例：

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-10-15，如有侵权请联系 cloudcommunity@tencent.com 删除

babel.js