JS面向对象：解析概念、特点与优势

前端

2023-10-24 18:30:15

从面向过程到面向对象：思维的转变

在计算机编程中，面向过程和面向对象是两种截然不同的编程范式。面向过程编程关注的是任务的分解和步骤的顺序，而面向对象编程则关注的是数据的封装和对象之间的交互。

面向过程编程将程序视为一系列步骤的集合，这些步骤按顺序执行以完成任务。例如，一个计算两个数字之和的程序可能包含以下步骤：

从用户获取两个数字。
将两个数字相加。
将结果显示给用户。

在面向过程编程中，数据和操作是紧密耦合的，这使得程序难以维护和扩展。例如，如果我们要修改程序以计算三个数字之和，我们就需要修改三个步骤。

面向对象编程将程序视为一系列相互关联的对象的集合。对象包含数据和操作这些数据的行为。例如，一个计算两个数字之和的程序可能包含以下对象：

一个计算器对象，包含计算两个数字之和的方法。
一个输入对象，负责从用户获取两个数字。
一个输出对象，负责将结果显示给用户。

在面向对象编程中，数据和操作是松散耦合的，这使得程序更容易维护和扩展。例如，如果我们要修改程序以计算三个数字之和，我们只需要修改计算器对象的方法。

JS面向对象：核心概念与特点

对象

对象是面向对象编程的基本单位。对象是一个具有属性和方法的数据结构。属性是对象的特征，而方法是对象的行为。例如，一个表示人的对象可能具有以下属性：

姓名
年龄
性别

以及以下方法：

说话
走路
吃饭

类

类是对象的模板。类定义了对象的属性和方法。例如，我们可以定义一个表示人的类如下：

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

  speak() {
    console.log(`Hello, my name is ${this.name}.`);
  }

  walk() {
    console.log(`I am walking.`);
  }

  eat() {
    console.log(`I am eating.`);
  }
}

继承

继承是面向对象编程的重要特性之一。继承允许一个类从另一个类继承属性和方法。例如，我们可以定义一个表示学生的类如下：

class Student extends Person {
  constructor(name, age, gender, school) {
    super(name, age, gender);
    this.school = school;
  }

  study() {
    console.log(`I am studying.`);
  }
}

Student类继承了Person类的所有属性和方法，并添加了新的属性school和方法study()。

多态

多态是面向对象编程的另一重要特性。多态允许不同的对象以不同的方式响应相同的消息。例如，我们可以定义一个send()方法，该方法可以发送不同的消息给不同的对象。

function send(object, message) {
  object.send(message);
}

const person = new Person('John Doe', 30, 'male');
const student = new Student('Jane Doe', 20, 'female', 'Harvard University');

send(person, 'Hello, John Doe.');
send(student, 'Hello, Jane Doe.');

当send()方法被调用时，它会根据对象的类型调用相应的方法。在这种情况下，person对象会调用Person类的send()方法，而student对象会调用Student类的send()方法。

封装

封装是面向对象编程的最后一个重要特性。封装允许对象将自己的数据和行为隐藏起来，只对外暴露必要的接口。例如，我们可以将Person类的属性和方法设置为private，这样其他对象就不能直接访问它们。

class Person {
  #name;
  #age;
  #gender;

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

  getName() {
    return this.#name;
  }

  getAge() {
    return this.#age;
  }

  getGender() {
    return this.#gender;
  }
}