JS中class语法的核心是理清结构逻辑而非画图;需围绕类的基本结构展开四大分支:声明方式、构造函数、方法写法、属性声明位置,并区分实例/静态/私有/原型四类成员,强调继承机制与常见误区。

JS 中 class 语法的核心不是画图本身,而是理清结构逻辑——思维导图只是把已理解的知识点可视化。重点在于分类清晰、层级合理、关键细节不遗漏。下面按实战角度拆解怎么组织这张图。
类的基本结构与语法规则
这是最底层的主干,必须放在中心位置。围绕它展开四个关键分支:
-
声明方式:用
class关键字,首字母大写(如Person),不可变量提升(必须先定义后使用) -
构造函数:唯一方法名是
constructor(),new 实例时自动调用;无显式定义时,JS 提供空构造函数 -
方法写法:不加
function关键字,不写逗号分隔;所有非静态方法默认挂载到原型上 -
属性声明位置:实例属性可写在
constructor内(this.name = …),也可直接写在类体顶层(name = 'default',ES2022+ 支持)
属性与方法的类型划分
这是最容易混淆的部分,建议用颜色或图标区分四类,每类标注访问方式和生命周期:
-
实例属性:每个对象独有,通过
this.xxx或实例点号访问(如p1.name) -
静态属性/方法:用
static声明,仅属于类本身(如MathUtil.PI),实例无法调用 -
私有字段/方法:以
#开头(如#id、#validate()),仅限类内部访问,外部读写均报错 -
原型方法:即普通实例方法,本质是添加到
ClassName.prototype上,所有实例共享
继承与扩展机制
继承是 class 的核心价值之一,导图中要突出语法 + 限制 + 常见陷阱:
-
基础语法:子类用
extends继承父类;子类构造函数中必须调用super()(且必须在this之前) -
super 的双重角色:在构造函数中是调用父类构造器,在方法中是调用父类同名方法(
super.sayHello()) -
不能继承内置类的某些行为:比如 extends Array 后,子类实例可能不被
Array.isArray()识别,需手动修复 -
静态方法也会被继承:子类可直接调用
Parent.staticMethod(),也可重写
常见误区与底层对应关系
这部分是导图的“警示区”,帮助避开典型坑点:
-
class 不是全新机制:它仍是基于原型的语法封装,
new MyClass()底层仍走原型链查找 -
方法不是“绑定 this”:class 中定义的方法不会自动绑定
this,作为回调传入时仍需手动.bind()或箭头函数处理 -
私有字段不可枚举、不可反射:
Object.keys()、for...in、JSON.stringify()都看不到#字段 -
不存在“类变量”概念:JS 没有 Java 那种类级变量,所有“类变量”本质都是静态属性,需显式声明
static


















