JavaScript对象及面向对象编程

前端

JavaScript

作者

yangjh

发布日期

November 14, 2022

JavaScript中的对象是数据和功能的组合体。对象和面向对象编程（OOP）是一种编程范式，它将数据和操作数据的方法封装在一起，以创建可重用的代码块，这些代码块被称为类。

想象一个图书馆作为一个类，这个类有一些属性和方法。图书馆的属性可能包括书籍的数量、图书馆的地址和开放时间等等。这些属性用于描述图书馆的状态。而方法可能包括借书、还书、查找书籍等，这些方法用于操作图书馆的状态。每个图书馆的实例都可以被看作是一个独立的对象，它们共享相同的方法，但具有不同的属性值。

在OOP中，类比于图书的实例。一本书可以看作是一个对象，它有自己的属性，比如书名、作者和出版日期，还有一些方法，比如打印详细信息或者借出。每本书都是独立的对象，但它们都属于同一个类（例如，小说、教科书等），因此它们共享类中定义的属性和方法。

面向对象编程的核心思想是将代码组织成可以互相协作的对象，这些对象具有清晰的接口，可以隐藏内部的实现细节，使得代码更易于理解、扩展和维护。这就好比图书馆的工作人员不需要了解每本书的内部结构，只需要知道如何使用书籍的方法就可以了。

通过类比图书馆，我们可以更好地理解对象和OOP，其中类就像图书馆，对象就像图书，而面向对象编程则是以这种方式组织和管理代码，以实现更高效、可维护和可扩展的软件系统。

创建和操作对象

要创建对象，我们使用对象字面量或构造函数。

创建对象： 在JavaScript中，您可以使用对象字面量来创建对象，就像创建一本新书一样。例如，要创建一个代表一本书的对象，可以这样做：
```
let book = {
  title: "JavaScript Programming",
  author: "John Doe",
  publicationYear: 2022,
  isAvailable: true,
  borrow: function() {
    this.isAvailable = false;
  },
  return: function() {
    this.isAvailable = true;
  }
};
```
这里，book 对象就类似于图书馆中的一本书，它有一些属性（title、author、publicationYear、isAvailable）和方法（borrow、return）。

访问和操作对象属性： 就像在图书馆中查看书籍的属性一样，您可以使用点符号或方括号来访问和操作对象的属性。例如：

console.log(book.title); // 输出书名："JavaScript Programming"
book.borrow(); // 借出这本书
console.log(book.isAvailable); // 输出 false，表示书已被借出

创建对象的类： 在JavaScript中，您可以使用构造函数或类来创建多个类似的对象，就像在图书馆中有多本相同类型的书一样。例如：

class Book {
  constructor(title, author, publicationYear) {
    this.title = title;
    this.author = author;
    this.publicationYear = publicationYear;
    this.isAvailable = true;
  }

  borrow() {
    this.isAvailable = false;
  }

  return() {
    this.isAvailable = true;
  }
}

// 创建多本书的实例
let book1 = new Book("JavaScript Programming", "John Doe", 2022);
let book2 = new Book("Web Development Basics", "Jane Smith", 2021);

这里，Book 类就像一个书籍的模板，而 book1 和 book2 是基于这个模板创建的具体书籍对象。

类、继承、封装和多态

类（Class）： 类就像图书馆的图书类别，它是一个模板，定义了对象的属性和方法。在JavaScript中，您可以使用类来创建对象的蓝图。例如，我们可以创建一个名为 Book 的类，表示图书：

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  displayInfo() {
    console.log(`Title: ${this.title}, Author: ${this.author}`);
  }
}

// 创建 Book 类的实例
const book1 = new Book("JavaScript Programming", "John Doe");

继承（Inheritance）： 继承就像图书馆中的书类别之间的继承关系。在JavaScript中，您可以创建子类，继承父类的属性和方法，并添加自己的属性和方法。例如，我们可以创建一个名为 EBook 的子类，继承 Book 类：

class EBook extends Book {
  constructor(title, author, format) {
    super(title, author); // 调用父类构造函数
    this.format = format;
  }

  // 覆盖父类方法
  displayInfo() {
    console.log(`Title: ${this.title}, Author: ${this.author}, Format: ${this.format}`);
  }

  // 子类自己的方法
  download() {
    console.log(`${this.title} is downloading...`);
  }
}

// 创建 EBook 类的实例
const ebook1 = new EBook("Advanced JavaScript", "Jane Smith", "PDF");

封装（Encapsulation）： 封装就像图书馆中的书籍被封装在书皮中，隐藏了内部细节。在JavaScript中，您可以使用类的私有属性和方法来实现封装。例如，我们可以将 title 和 author 属性设为私有，并提供 getter 和 setter 方法来访问和修改它们：

class Book {
  constructor(title, author) {
    let _title = title; // 私有属性
    let _author = author; // 私有属性

    this.getTitle = function() {
      return _title;
    };

    this.getAuthor = function() {
      return _author;
    };

    this.setTitle = function(newTitle) {
      _title = newTitle;
    };

    this.setAuthor = function(newAuthor) {
      _author = newAuthor;
    };
  }

  displayInfo() {
    console.log(`Title: ${this.getTitle()}, Author: ${this.getAuthor()}`);
  }
}

const book2 = new Book("JavaScript Secrets", "Alice Johnson");

多态（Polymorphism）： 多态就像图书馆中可以使用相同的借书接口借不同类型的书一样。在JavaScript中，多态允许不同的对象调用相同的方法名但表现出不同的行为。例如，无论是 Book 类的实例还是 EBook 类的实例，都可以调用 displayInfo 方法：

function displayBookInfo(book) {
  book.displayInfo();
}

displayBookInfo(book1); // 调用 Book 类的 displayInfo
displayBookInfo(ebook1); // 调用 EBook 类的 displayInfo

通过这些图书馆的类比，您可以更好地理解JavaScript中的面向对象编程概念，包括类、继承、封装和多态，并通过代码示例看到它们如何在实践中工作。这些概念有助于构建更模块化、可维护和可扩展的JavaScript应用程序。

回到顶部