JavaScript三种Class声明写法的区别及是否可任意选用

以下三类写法可以分为两大类：类声明和类表达式，具体区别如下：

1. 类声明（Class Declaration） #

class Ayhan{
  
}

• 会在当前块级作用域下创建名为Ayhan的类绑定，你可以直接通过Ayhan实例化对象：new Ayhan()
• 不存在变量提升，受暂时性死区约束，在声明代码执行前访问Ayhan会抛出ReferenceError
• 类的name属性固定为"Ayhan"

2. 命名类表达式（Named Class Expression） #

let ayhan=class Ayhan{
  
} ;

• 属于表达式范畴，不会在外部作用域声明Ayhan变量，外部只能通过赋值的变量名ayhan访问该类，直接访问Ayhan会报错
• 类名Ayhan仅在类的内部作用域可用，可用于类内部递归引用自身，不受外部变量修改的影响
• 类的name属性固定为"Ayhan"，和外部赋值的变量名无关

3. 匿名类表达式（Anonymous Class Expression） #

let ayhan=class{
  
}

• 没有显式声明类名，类的name属性会自动匹配赋值的变量名，此处为"ayhan"
• 类内部没有专属的本地类名，如果要引用自身只能依赖外部变量ayhan，如果后续ayhan变量被重新赋值，内部引用会指向错误的对象

是否可以按需选择？ #

完全可以根据实际使用场景自由选择：

• 如果你需要在当前作用域直接通过固定类名访问类，优先选类声明，常见于封装公共类、公共组件的场景
• 如果你需要类内部可以稳定引用自身，同时不想把类名暴露到外部作用域，优先选命名类表达式
• 如果是临时使用的类，不需要在内部引用自身，直接用匿名类表达式即可，常见于类作为参数传递、作为返回值返回、赋值给对象属性的场景

内容的提问来源于stack exchange，提问作者Ayhan Ayvazov