javascript类class语法_如何实现面向对象

javascript class 是语法糖，本质仍是基于原型的函数机制；constructor 需显式处理 this 绑定；static 方法属类本身，普通方法属原型；子类 constructor 必先调用 super()；class 不提升，顺序依赖严格。

JavaScript class 是语法糖，不是真正的类机制

JavaScript 的 class 关键字从 ES6 开始引入，但它只是对原型链（prototype-based）继承的封装，并不改变底层基于对象和原型的运行机制。这意味着你不能像 Java 或 Python 那样依赖“类实例化即创建全新类型”的直觉——class 本质仍是函数，new MyClass() 仍是在操作 MyClass.prototype。

constructor 和 this 指向必须显式处理

在 class 内部，constructor 是唯一自动调用的初始化方法；但如果你在事件回调、定时器或异步回调中使用实例方法（比如 setTimeout(this.handleClick, 100)），this 会丢失绑定，指向 undefined（严格模式）或全局对象。这不是 bug，是函数调用方式决定的。

• 用 bind(this) 在构造函数里绑定：

  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }

• 用箭头函数定义方法（隐式绑定 this）：

  handleClick = () => { console.log(this.value); };

• 在调用处内联箭头函数：

  setTimeout(() => this.handleClick(), 100);

static 方法和 prototype 方法不能混用

static 方法属于类本身，只能通过 MyClass.staticMethod() 调用；而普通方法写在 class 块里（无 static）则挂载到 MyClass.prototype，只能由实例调用。混淆这两者会导致 TypeError: xxx is not a function。

VIVA

一个免费的AI创意视觉设计平台

下载

• static 方法无法访问 this（因为没实例）；若需访问类自身，用 MyClass.name 或传参
• 想让某个方法既可静态调用又可实例调用？得手动在类外或构造函数里复制逻辑，class 不支持自动双模式
• 继承时，super 只能用于原型方法中调用父类同名方法；static 方法里用 super 指向父类构造函数，但必须配合 static 上下文

extends 和 super 的调用顺序有硬性约束

子类 constructor 中，必须在使用 this 前调用 super()；否则会报 ReferenceError: Must call super constructor in derived class before accessing 'this'。这是因为子类实例的内部槽位（如 [[Prototype]]）尚未初始化。

立即学习“Java免费学习笔记（深入）”；

• super() 必须带参数（如果父类 constructor 有形参），且通常应原样传递：

  constructor(name) {
    super(name); // 不是 super.call(this, name)
    this.id = Date.now();
  }

• 不能在 super() 前返回值或抛错（除非是 return 一个对象，绕过默认实例创建）
• super 在非构造函数中表示父类的原型对象，可用于调用父类方法：

  sayHi() {
    return super.sayHi() + ' from child';
  }