深入剖析JavaScript中的类（Class）

烛阴
350 阅读4分钟

一、JavaScript中类的基本概念与使用

类（Class）作为ES6标准的一大亮点，不仅标志着JavaScript语言特性的重大扩展，更是对面向对象编程（OOP）理念的一次深刻融合。

类的定义与特性

类，作为创建对象的模板，其本质是一种特殊的函数。它利用代码封装数据，进而对数据进行处理和管理。在JavaScript中，类建立在原型（Prototype）的基础之上，同时融入了独有语法和语义，为开发者提供了一种全新的面向对象编程体验。类的存在，使得代码的组织和结构更加清晰，提高了代码的可读性和可维护性。

类的声明方式

JavaScript中的类定义方式主要有两种：类声明与类表达式。

类声明使用关键字class，后跟类的名称，再通过花括号{}来定义类的主体。这种声明方式使得类的定义一目了然，便于开发者识别和理解。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    public this.width = width;
  }
}

类表达式则更为灵活，它允许类在运行时动态地创建，或者匿名地绑定到其他变量上。这种方式为代码的组织和复用提供了更多的可能。

const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
};

// 或者
const ins = new class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
}(20, 30);
console.log(ins.area());

类的实例化与构造函数

类的实例化是创建类的具体对象的过程。通过new关键字，我们可以调用类构造函数来创建类的特定实例。

const rect = new Rectangle(20, 30);

在这个过程中，new关键字扮演着至关重要的角色。它首先会创建一个新的空对象，这个对象将成为构造函数的上下文（即this的指向）。随后，构造函数中的代码被执行，用于初始化新创建对象的状态。一旦构造函数执行完毕，new关键字会返回这个新鲜出炉的对象供我们使用。

构造函数在类中占据着核心地位，它是用于初始化新对象状态的特殊成员。通过构造函数，我们能够为新创建的对象设置初始的属性值。在JavaScript中，每个类只能拥有一个构造函数，它是类定义中不可或缺的一部分。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

在上述代码片段中，Rectangle类的构造函数接收两个参数height和width，并将它们分别赋值给新创建对象的height和width属性。这一步骤确保了每当一个新的Rectangle实例被创建时，它都会拥有正确的宽高属性，从而为后续的操作奠定坚实的基础。

类的方法定义

在类中，方法是一种特殊的属性，它们定义了对象可以执行的操作。类中定义的方法实质上是绑定到类构造函数原型上的普通函数。这种绑定机制使得每个类的实例都可以访问类定义的方法。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  getArea() {
    return this.height * this.width;
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.getArea()); // 输出 50

在上述代码片段中，我们定义了一个名为Rectangle的类，它有一个计算面积的getArea方法。当我们通过new关键字创建一个Rectangle实例rect时，我们可以直接调用rect.getArea()来获取这个矩形的面积。这里的关键是，rect实例并没有自己的getArea方法副本，它调用的是类构造函数原型上的方法。

继承与super关键字的使用

继承是面向对象编程的核心概念之一，它允许子类继承父类的属性和方法，从而实现代码的复用和扩展。在JavaScript中，通过extends关键字可以声明一个类继承自另一个类。

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

在上述代码中，Dog类继承自Animal类，并通过super关键字调用父类的构造函数，以初始化继承自父类的name属性。super关键字的使用在子类的构造函数中是必须的，因为它是连接子类与父类之间的桥梁，确保父类的初始化逻辑得以正确执行。

静态方法与访问器属性

静态方法是直接关联到类本身而不是类的实例的方法。在JavaScript中，使用static关键字可以定义静态方法，这些方法可以通过类本身直接调用，而不需要创建类的实例。

class Animal {
  static info() {
    console.log('This is an animal');
  }
}

Animal.info(); // 输出：This is anProperty animal

访问器属性是一种特殊的属性，它们定义了对象属性的读取和设置规则。通过get和set关键字，可以定义访问器属性，从而对类的属性进行精细的控制。

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

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

在这个例子中，name是一个访问器属性，它允许我们通过.name来获取和设置_name属性的值。

avatar
文章
阅读
粉丝