编程新视野：深入探索JavaScript的面向对象世界

2023-11-23 14:00:38

面向对象编程简介

面向对象编程 (OOP) 是一种编程范式，它将数据和行为组织成对象。在 JavaScript 中，对象是能够存储数据并执行操作的独立实体。OOP 允许您将复杂的问题分解成更小的、更易于管理的部分，从而使代码更易于编写、理解和维护。

2. 类和对象

类是对象的蓝图，它定义了对象的属性和方法。对象是类的实例，它具有类的所有属性和方法。在 JavaScript 中，可以使用 class 来创建类，可以使用 new 关键字来创建对象。

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('John Doe', 30);
person1.greet(); // Output: "Hello, my name is John Doe and I am 30 years old."

3. 继承

继承是一种创建新类的方式，它允许新类继承另一个类的属性和方法。在 JavaScript 中，可以使用 extends 关键字来实现继承。

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // Call the parent class constructor
    this.jobTitle = jobTitle;
  }

  work() {
    console.log(`I am ${this.name} and I work as a ${this.jobTitle}.`);
  }
}

const employee1 = new Employee('Jane Doe', 35, 'Software Engineer');
employee1.greet(); // Output: "Hello, my name is Jane Doe and I am 35 years old."
employee1.work(); // Output: "I am Jane Doe and I work as a Software Engineer."

4. 封装

封装是一种隐藏对象内部细节的方式，只允许通过对象公开的方法来访问这些细节。在 JavaScript 中，可以使用访问修饰符 (public, private, protected) 来实现封装。

class Person {
  #name; // Private property
  age; // Public property

  constructor(name, age) {
    this.#name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.#name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('John Doe', 30);
person1.greet(); // Output: "Hello, my name is John Doe and I am 30 years old."
console.log(person1.#name); // Error: Cannot access private property

5. 多态

多态是指能够以统一的方式处理不同类型的对象。在 JavaScript 中，可以使用接口和抽象类来实现多态。

interface Shape {
  area(): number;
}

class Circle implements Shape {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

class Square implements Shape {
  constructor(sideLength) {
    this.sideLength = sideLength;
  }

  area() {
    return this.sideLength ** 2;
  }
}

const shapes = [new Circle(5), new Square(10)];
for (const shape of shapes) {
  console.log(`Area: ${shape.area()}`);
}