JavaScript 教程：深入理解 Class 基本语法-优快云博客

JavaScript 教程：深入理解 Class 基本语法

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

在 JavaScript 开发中，面向对象编程(OOP)是一种非常重要的编程范式。随着 ES6 标准的发布，JavaScript 正式引入了 class 语法，使得面向对象编程变得更加直观和易于理解。本文将深入讲解 JavaScript 中 class 的基本语法和使用方法。

什么是 Class？

Class（类）是面向对象编程中的一个核心概念，它是创建对象的蓝图或模板。一个类定义了：

对象的属性（数据/状态）
对象的方法（行为/功能）

在 JavaScript 中，类提供了一种更清晰、更接近传统面向对象语言的语法来创建对象和处理继承。

基本语法

类声明

class MyClass {
  // 构造函数
  constructor(param1, param2) {
    this.property1 = param1;
    this.property2 = param2;
  }
  
  // 类方法
  method1() {
    // 方法实现
  }
  
  method2() {
    // 方法实现
  }
}

创建实例

使用 new 关键字创建类的实例：

const instance = new MyClass(value1, value2);

核心概念详解

1. 构造函数

constructor 是一个特殊的方法，用于创建和初始化类创建的对象。一个类只能有一个构造函数。

class User {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hello, ${this.name}!`);
  }
}

const user = new User("John");
user.sayHi(); // 输出: Hello, John!

2. 类方法的本质

在 JavaScript 中，类本质上仍然是基于原型的。类方法实际上被添加到了类的原型(prototype)上：

class User {
  constructor(name) { this.name = name; }
  sayHi() { console.log(this.name); }
}

// 等同于
function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  console.log(this.name);
};

3. 类与普通构造函数的区别

虽然类在功能上与构造函数相似，但存在重要区别：

类必须使用 new 调用，直接调用会报错
类方法不可枚举
类代码自动运行在严格模式下
类有特殊的内部标记 [[IsClassConstructor]]: true

4. 类表达式

类也可以使用表达式形式定义：

const MyClass = class {
  constructor() {}
  method() {}
};

// 命名类表达式
const MyClass = class ClassName {
  constructor() {}
  method() {}
};

5. Getter 和 Setter

类支持 getter 和 setter，用于控制对属性的访问：

class User {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      console.log("Name too short");
      return;
    }
    this._name = value;
  }
}

6. 类字段（Class Fields）

类字段是较新的特性，允许直接在类中定义实例属性：

class User {
  name = "Anonymous";  // 类字段
  
  constructor() {
    // 可以在构造函数中覆盖
    this.name = "John";
  }
}

类字段与在构造函数中定义属性的区别在于：

类字段会在任何构造函数代码运行之前初始化
类字段会被添加到每个实例上，而不是原型上

7. 绑定方法

类方法中的 this 问题是一个常见痛点。使用箭头函数作为类字段可以解决这个问题：

class Button {
  constructor(value) {
    this.value = value;
  }
  
  // 使用箭头函数确保this正确绑定
  click = () => {
    console.log(this.value);
  }
}

const button = new Button("Hello");
setTimeout(button.click, 1000); // 正确输出"Hello"