重学js —— 类定义（class）

[lizhongzhen11]

类定义（class）

• MDN —— class表达式
• MDN —— class声明
• MDN —— 类
• 类实质上是个“特殊的函数
• 类声明不可以提升
• 不可以重复声明
• super() 只能在构造函数中使用，并且必须在使用 this 关键字前调用
• 静态方法不能传给子级

class定义始终是 严格模式代码。

// 有意思，直接空语句也行
class ClassTest{
  ;
  test;
}

BoundNames

ClassDeclaration : class BindingIdentifier ClassTail

1. 返回 BindingIdentifier 的 BoundNames

ClassDeclaration : class ClassTail

1. 返回 « "*default*" »

ConstructorMethod （构造器方法）

ClassElementList : ClassElement

class Test{
  constructor() {
    // ...  
  }
}

1. 如果 ClassElement 是 ClassElement : ; ，返回 empty
2. 如果 ClassElement 是 静态的，返回 empty
3. 如果 ClassElement 的属性名不是 "constructor"，返回 empty
4. 返回 ClassElement

ClassElementList : ClassElementList ClassElement

class Test{
  constructor() {
    // ...  
  }
  handle() {
    // ...  
  }
}

1. 定义 head 为 ClassElementList 的 ConstructorMethod
2. 如果 head 不是 empty，返回 head
3. 如果 ClassElement 是 ClassElement : ; ，返回 empty
4. 如果 ClassElement 是 静态的，返回 empty
5. 如果 ClassElement 的属性名不是 "constructor"，返回 empty
6. 返回 ClassElement

IsFunctionDefinition （是不是函数）

class Cla{}
typeof Cla // 'function'

1. 返回 true

NonConstructorMethodDefinitions （非构造器方法定义）

ClassElementList : ClassElement

1. 如果 ClassElement 是 ClassElement : ;，返回一个新的空 List
2. 如果 ClassElement 不是静态的，并且 ClassElement 的属性名是 "constructor"，返回一个新的空 List
3. 返回一个包含 ClassElement 的 List

ClassElementList : ClassElementList ClassElement

1. 定义 list 为 ClassElementList 的 NonConstructorMethodDefinitions
2. 如果 ClassElement 是 ClassElement : ;，返回 list
3. 如果 ClassElement 不是静态的，并且 ClassElement 的属性名是 "constructor"，返回 list
4. 在 list 末尾添加 ClassElement
5. 返回 list

ClassDefinitionEvaluation

伴有参数 classBinding 和 className。

ClassTail : ClassHeritage_opt { ClassBody_opt }

1. 定义 lex 为 运行时执行上下文 的 LexicalEnvironment
2. 定义 classScope 为 NewDeclarativeEnvironment(lex)
3. 定义 classScopeEnvRec 为 classScope 的 EnvironmentRecord
4. 如果 classBinding 不是 undefined，
   1. 执行 classScopeEnvRec.CreateImmutableBinding(classBinding, true)
5. 如果 ClassHeritage_opt 不存在，
   1. 定义 protoParent 为 %Object.prototype%
   2. 定义 constructorParent 为 %Function.prototype%
6. 否则，
   1. 将 运行时执行上下文 的 LexicalEnvironment 设置为 classScope。
   2. 定义 superclassRef 为 ClassHeritage 求值结果
   3. 将 运行时执行上下文 的 LexicalEnvironment 设置为 lex。
   4. 定义 superclass 为 ? GetValue(superclassRef)
   5. 如果 superclass 为 null，
      1. 定义 protoParent 为 null
      2. 定义 constructorParent 为 %Function.prototype%
   6. 如果 superclass 不是构造器，抛 TypeError 异常
   7. 否则，
      1. 定义 protoParent 为 ? GetValue(superclass, "prototype")
      2. 如果 protoParent 既不是对象类型又不是 Null 类型，抛 TypeError 异常
      3. 定义 constructorParent 为 superclass
7. 定义 proto 为 OrdinaryObjectCreate(protoParent)
8. 如果 ClassBody_opt 不存在，定义 constructor 为 empty
9. 否则，定义 constructor 为 ClassBody 的 ConstructorMethod
10. 如果 constructor 为 empty，
    1. 如果 ClassHeritage_opt 存在，
       1. 将 constructor 赋值为 源文本 的解析结果

          constructor(...args) { super(...args); }

          将语法与 目标符号 MethodDefinition_{[Yield, Await]} 一起使用
    2. 否则，
       1. 将 constructor 赋值为 源文本 的解析结果

          constructor() { }

          将语法与 目标符号 MethodDefinition_{[Yield, Await]} 一起使用
11. 将 运行时执行上下文 的 LexicalEnvironment 设置为 classScope。
12. 定义 constructorInfo 为 constructor 的 ! DefineMethod，且参数为 proto 和 constructorParent
13. 定义 F 为 constructorInfo.[[Closure]]
14. 执行 MakeConstructor(F, false, proto)
15. 如果 ClassHeritage_opt 存在，将 F.[[ConstructorKind]] 赋值为 derived
16. 执行 MakeClassConstructor(F)
17. 如果 className 不是 undefined，
    1. 执行 SetFunctionName(F, className)
18. 执行 CreateMethodProperty(proto, "constructor", F)
19. 如果 ClassBody_opt 不存在，定义 methods 为 一个新的空 List
20. 否则，定义 methods 为 ClassBody 的 NonConstructorMethodDefinitions
21. 遍历 methods 中的每个 ClassElement m
    1. 如果 m 不是静态的，
       1. 定义 status 为 m 的 PropertyDefinitionEvaluation，且参数为 proto 和 false
    2. 否则，
       1. 定义 status 为 m 的 PropertyDefinitionEvaluation，且参数为 F 和 false
    3. 如果 status 是 abrupt completion
       1. 将 运行时执行上下文 的 LexicalEnvironment 设置为 lex
       2. 返回 (status)
22. 将 运行时执行上下文 的 LexicalEnvironment 设置为 lex
23. 如果 classBinding 不是 undefined，
    1. 执行 classScopeEnvRec.InitializeBinding(classBinding, F)
24. 返回 F

BindingClassDeclarationEvaluation

ClassDeclaration : class BindingIdentifier ClassTail

1. 定义 className 为 BindingIdentifier 的字符串值
2. 定义 value 为 ClassTail 的 ? ClassDefinitionEvaluation，且参数为 className 和 className
3. 将 value.[[SourceText]] 设置为与 ClassDeclaration 匹配的 源文本
4. 定义 env 为 运行时执行上下文 的 LexicalEnvironment
5. 执行 ? InitializeBoundName(classBinding, value, env)
6. 返回 value

ClassDeclaration : class ClassTail

1. 定义 value 为 ClassTail 的 ? ClassDefinitionEvaluation，且参数为 undefined 和 "default"
2. 将 value.[[SourceText]] 设置为与 ClassDeclaration 匹配的 源文本
3. 返回 value

求值

ClassDeclaration : class BindingIdentifier ClassTail

1. 执行该 ClassDeclaration 的 ? BindingClassDeclarationEvaluation
2. 返回 (empty)

注意：ClassDeclaration : class ClassTail 仅作为 ExportDeclaration 的一部分出现并且从不直接求值。

ClassExpression : class BindingIdentifier_opt ClassTail

1. 如果 BindingIdentifier_opt 不存在，定义 className 为 undefined
2. 否则，定义 className 为 BindingIdentifier 的字符串值
3. 定义 value 为 ClassTail 的 ? ClassDefinitionEvaluation，且参数为 className 和 className
4. 将 value.[[SourceText]] 设置为与 ClassExpression 匹配的 源文本
5. 返回 value

// 静态方法
// static 关键字用来定义一个类的一个静态方法。
// 调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));
console.log(p1.distance); // undefined

// 公有字段 与 私有字段
class Rectangle {
  height = 0; // 公有字段
  #width; // 私有字段
  constructor(height, width) {    
    this.height = height;
    this.#width = width;
  }
}


// 来自高级前端面试，我做错了
class Chameleon{
  static colorChange(newColor) {
    this.newColor = newColor;
  }

  constructor({newColor = 'green'}) {
    this.newColor = newColor;
  }
}
const freddie = new Chameleon({newColor: 'purple'})
freddie.colorChange('orange') // 选D

A. orange
B. purple
C. green
D. TypeError



// 同理，下面也是报错
class test extends Chameleon{
  constructor() {
    super({newColor: 'purple'})
    super.colorChange('red')
  }
}
new test // TypeError