知识归纳与沉淀：JavaScript 面向对象精要笔记

前端

2024-02-03 05:24:46

JavaScript 面向对象精要：知识归纳与沉淀

高程面向对象这块内容介绍的比较浅显，个人觉得这本小书是高程的补充，看完之后觉得收获匪浅，所以做了个笔记，以备后询。

面向对象编程概述

面向对象编程（OOP）是一种编程范式，它将对象作为基本单元，对象可以包含数据和方法。OOP 的主要思想是将现实世界中的实体抽象成计算机中的对象，并通过对象之间的交互来模拟现实世界中的行为。

JavaScript 中的面向对象编程

JavaScript 是一种面向对象的语言，它支持类、实例、继承、多态、封装和抽象等面向对象的核心思想和基本概念。

类

类是对象的模板，它定义了对象的数据和方法。在 JavaScript 中，类使用 class 声明。

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.`);
  }
}

实例

实例是类的具体对象，它具有类中定义的数据和方法。在 JavaScript 中，实例使用 new 关键字创建。

const person = new Person('John', 30);
person.greet(); // Hello, my name is John and I am 30 years old.

继承

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

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

多态

多态是指父类和子类的方法具有相同的名称，但实现不同。在 JavaScript 中，多态可以通过继承和方法重写实现。

class Manager extends Employee {
  constructor(name, age, salary, department) {
    super(name, age, salary);
    this.department = department;
  }

  getSalary() {
    return this.salary + 1000;
  }
}

const employee = new Employee('John', 30, 10000);
const manager = new Manager('Mary', 35, 15000, 'Sales');

console.log(employee.getSalary()); // 10000
console.log(manager.getSalary()); // 16000

封装

封装是指将数据和方法绑定在一起，并对外隐藏数据的实现细节。在 JavaScript 中，封装可以通过私有属性和方法实现。

class Person {
  #name;
  #age;

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

  getName() {
    return this.#name;
  }

  getAge() {
    return this.#age;
  }
}

const person = new Person('John', 30);
console.log(person.#name); // 报错
console.log(person.getName()); // John

抽象

抽象是指将类的公共接口和私有实现分开，以便类的实现细节对用户透明。在 JavaScript 中，抽象可以通过抽象类实现。

abstract class Shape {
  constructor() {
    if (this.constructor === Shape) {
      throw new Error('Shape is an abstract class and cannot be instantiated.');
    }
  }

  getArea() {
    throw new Error('getArea() is an abstract method and must be implemented in a subclass.');
  }
}

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

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

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