JS高级程序设计：通向面向对象编程（OOP）的大门

前端

2024-01-19 00:32:55

JavaScript高级程序设计：踏上面向对象编程之旅

面向对象编程（OOP）是软件开发中一种强大的编程范式，它使开发人员能够创建复杂且可维护的应用程序。JavaScript，作为一门流行的动态语言，也支持 OOP，为开发者提供了构建健壮应用程序的强大工具。

OOP 简介

OOP 的核心思想是将数据和行为封装在称为对象的概念中。对象表示现实世界中的实体，如汽车或用户，并由属性（存储数据）和方法（定义行为）组成。

JavaScript 中的对象

在 JavaScript 中，可以使用对象字面量或构造函数来创建对象。

对象字面量

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

构造函数

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car = new Car('Toyota', 'Camry', 2020);

JavaScript 中的类

类是创建对象的模板。它们定义了对象的属性和方法，并可以使用 class 创建。

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  drive() {
    console.log('Car is driving.');
  }
}

JavaScript 中的继承

继承允许一个类（称为子类）从另一个类（称为父类）继承属性和方法。在 JavaScript 中，可以使用 extends 关键字实现继承。

class ElectricCar extends Car {
  constructor(make, model, year, batteryCapacity) {
    super(make, model, year);
    this.batteryCapacity = batteryCapacity;
  }

  drive() {
    console.log('Electric car is driving.');
  }
}

JavaScript 中的多态

多态是 OOP 中的关键概念，它允许对象以不同的方式响应相同的方法调用。这可以通过继承和方法覆盖来实现。

class Animal {
  makeSound() {
    console.log('Animal makes a sound.');
  }
}

class Dog extends Animal {
  makeSound() {
    console.log('Dog barks.');
  }
}

class Cat extends Animal {
  makeSound() {
    console.log('Cat meows.');
  }
}

// 创建动物对象并调用 makeSound 方法
const animal = new Animal();
animal.makeSound(); // 输出: Animal makes a sound.

// 创建狗对象并调用 makeSound 方法
const dog = new Dog();
dog.makeSound(); // 输出: Dog barks.

// 创建猫对象并调用 makeSound 方法
const cat = new Cat();
cat.makeSound(); // 输出: Cat meows.

JavaScript 中的封装

封装是将数据和方法绑定在一起，形成一个独立单元的概念。在 JavaScript 中，可以使用访问修饰符（如 public、private）来实现封装。

class Person {
  #name; // 私有属性

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

  getName() { // 公共方法
    return this.#name;
  }
}

const person = new Person('John Doe');
console.log(person.getName()); // 输出: John Doe

// 无法直接访问私有属性
console.log(person.#name); // 报错: #name is not defined

JavaScript 中的抽象

抽象是隐藏实现细节，只暴露必要信息的概念。在 JavaScript 中，可以使用抽象类和接口来实现抽象。

abstract class Animal {
  abstract makeSound();
}

class Dog extends Animal {
  makeSound() {
    console.log('Dog barks.');
  }
}

class Cat extends Animal {
  makeSound() {
    console.log('Cat meows.');
  }
}

// 创建动物对象并调用 makeSound 方法
const animal = new Animal(); // 报错: Cannot create an instance of an abstract class.

// 创建狗对象并调用 makeSound 方法
const dog = new Dog();
dog.makeSound(); // 输出: Dog barks.

// 创建猫对象并调用 makeSound 方法
const cat = new Cat();
cat.makeSound(); // 输出: Cat meows.