理解 JavaScript 中的面向对象编程

Source: Dev.to

Hello readers 👋, welcome back to the 9th blog in this JavaScript series.

Imagine you are a car manufacturer. You don’t build each car from scratch, right? You have a blueprint (or design) that defines what a car should have: wheels, engine, doors, colour options, etc. Then you use that blueprint to create many cars – each car is an object made from the same blueprint.

This is exactly what Object‑Oriented Programming (OOP) is all about. You create a blueprint (called a class) and then create multiple objects (called instances) from it.

In this post we’ll explore how JavaScript implements OOP using classes and objects, with simple, practical examples.

面向对象编程 (OOP)

OOP 是一种编程风格，它围绕 对象 而不是函数和逻辑来组织代码。一个对象可以包含：

• 数据 – 属性（例如 name、age）
• 行为 – 方法（例如 drive()、displayInfo()）

主要思想是将现实世界的事物——人、汽车、学生——建模为代码中的对象。

现实类比：蓝图 → 对象

什么是 JavaScript 中的类？

class 是用于创建对象的模板。它封装了其对象将拥有的数据和行为。

JavaScript 在 ES6（2015）中引入了 class 语法，作为对现有基于原型的继承的语法糖。可以把类简单地视为蓝图。

语法

class ClassName {
  // properties and methods
}

创建一个简单的类和对象

class Car {
  // Constructor – runs when a new object is created
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  // Method
  displayInfo() {
    console.log(`This is a ${this.color} ${this.brand}.`);
  }
}

// Creating objects (instances) from the class
const car1 = new Car('Toyota', 'red');
const car2 = new Car('Honda', 'blue');

car1.displayInfo(); // This is a red Toyota.
car2.displayInfo(); // This is a blue Honda.

解释

• constructor 是一个特殊的方法，用于初始化对象的属性（this.brand、this.color）。
• this 指向当前实例。
• new Car(...) 基于该类创建一个全新的对象。

构造方法

构造函数就像工厂里的装配线：它接受原材料（参数）并构建对象。

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }

  introduce() {
    console.log(`Hi, I'm ${this.name}, ${this.age} years old, from ${this.city}.`);
  }
}

const person1 = new Person('Raj', 25, 'Delhi');
person1.introduce(); // Hi, I'm Raj, 25 years old, from Delhi.

如果你没有定义构造函数，JavaScript 会默认提供一个空的构造函数。

类中的方法

方法是属于类的函数，用于定义其对象的行为。

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this; // enables chaining
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  getValue() {
    return this.value;
  }
}

const calc = new Calculator(10);
calc.add(5).subtract(3); // chaining
console.log(calc.getValue()); // 12

方法可以通过 this 读取和修改对象的属性。

Source: …

封装的基本概念

封装 将数据（属性）和操作这些数据的方法捆绑到一个单元（类）中，并控制对内部的访问。

把它想象成一辆汽车：你不需要了解发动机是如何工作的就能驾驶它；只需使用方向盘和踏板即可。

在 JavaScript 中，我们可以标记某些属性为“私有”（真正的私有使用 # 语法）。即使没有真正的私有，封装也有助于保持代码组织有序，防止意外干扰。

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this.balance = balance; // 理想情况下这里应该是私有的
  }

  deposit(amount) {
    if (amount > 0) {
      this.balance += amount;
      console.log(`Deposited ${amount}. New balance: ${this.balance}`);
    }
  }

  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
      console.log(`Withdrew ${amount}. New balance: ${this.balance}`);
    } else {
      console.log('Insufficient funds!');
    }
  }
}

const myAccount = new BankAccount('Satya', 1000);
myAccount.deposit(500);   // Deposited 500. New balance: 1500
myAccount.withdraw(2000); // Insufficient funds!

balance 属性仍然是公开可访问的，这并不理想。在现代 JavaScript 中，你可以将其声明为 #balance 来实现真正的私有化。

结论

• OOP 将代码围绕同时包含数据和行为的对象组织起来。
• 类 是创建这些对象的蓝图。
• 构造函数 在对象创建时初始化其属性。
• 方法 定义对象可以执行的操作，并且它们可以通过 this 访问或修改对象自身的状态。
• 封装 将相关的数据和行为组合在一起，并控制这些数据的访问方式。

理解这些基础概念将使编写简洁、可复用且易于维护的 JavaScript 代码变得更容易。祝编码愉快！

关键要点

• 定义对象能够做什么。
• 封装 将数据和方法捆绑在一起，隐藏内部细节。
• 类使得创建具有相同结构的多个对象变得容易，促进 可复用性 和 组织性。

随着学习的深入，你将学习更高级的 OOP 概念，如继承、多态和私有字段。目前，练习创建类和对象——这是现代 JavaScript 开发的基础。

希望你喜欢这篇博客。如果有任何错误或可以改进的地方，请告诉我。你可以在 LinkedIn 和 X 找到我；我会在那里发布更多内容。