洞悉 JavaScript 的面向对象世界

前端

2024-03-01 13:15:53

面向对象编程之 JavaScript 最全指南

引言

JavaScript 的面向对象编程 (OOP) 是一项核心技能，可帮助你编写结构清晰、可重用的代码。本文将深入探讨 JavaScript 的 OOP，包括对象创建、继承、原型链和深拷贝等概念。

对象和构造函数

对象是包含数据和方法的实体。使用 new 运算符和构造函数创建对象。构造函数用于初始化对象并定义其属性和方法。

创建对象的 5 种模式

构造函数模式： 经典的 OOP 方法，使用 new 运算符创建对象。
字面量模式： 直接使用 { } 创建对象。简单方便，但缺少构造函数。
工厂模式： 创建一个函数来创建和返回对象，提供灵活性。
原型模式： 使用预先定义的原型对象创建对象。
混合模式： 结合其他模式，提供更大的灵活性。

继承

继承允许派生类从基类获取属性和方法。JavaScript 中有 5 种实现继承的方式：

基于原型： 通过将派生类原型指向基类原型实现。
基于构造函数： 通过在派生类构造函数中调用基类构造函数实现。
组合： 使用对象组合模拟继承。
寄生： 通过创建一个包含基类实例的派生类实现。
ES6 类： 使用 ES6 引入的 class 语法实现，类似于其他 OOP 语言。

原型链

原型链是一条对象之间的连接链。当对象访问一个属性或方法时，它会沿着原型链查找该属性或方法。

深浅拷贝

深拷贝创建对象的完全副本，包括嵌套对象和数组。浅拷贝仅创建对象本身的副本。在 JavaScript 中，可以通过以下方法实现深拷贝：

JSON.parse(JSON.stringify(obj))： 使用 JSON 序列化和反序列化。
递归： 创建对象的副本，并递归复制其所有嵌套属性和数组。
库：使用如 Lodash 或 jQuery 等库提供的方法。

示例代码

// 构造函数模式
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 基于原型的继承
function Employee(name, age, salary) {
  Person.call(this, name, age);
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);