在 JavaScript 中掌握继承与深复制的奥秘

2024-02-12 09:01:34

在 JavaScript 的世界中，继承和深复制是两个重要的概念，它们使我们能够创建和管理复杂的对象结构。理解这些概念至关重要，可以帮助我们编写更可重用、更可维护和更有效率的代码。

继承

继承是一种强大的机制，允许子类（或派生类）从其父类（或基类）继承属性和方法。这使得我们可以创建共享公共属性和行为的对象层次结构。在 JavaScript 中，继承是通过原型委托实现的。

原型委托的工作原理是，每个对象都有一个内部的“原型”属性，该属性指向其父对象的原型。子类通过其原型链继承父类的方法和属性。通过这种方式，子类可以访问父类的方法和属性，但又不会直接拥有它们。

function Father(name) {
  this.name = name;
}

Father.prototype.introduce = function() {
  console.log(`我是 ${this.name}，是父亲。`);
};

function Son(name) {
  Father.call(this, name);  // 调用父类构造函数
}

Son.prototype = Object.create(Father.prototype);  // 设置子类的原型为父类的原型
Son.prototype.constructor = Son;  // 修正子类的构造函数指向自身

const father = new Father('John');
const son = new Son('Tom');

console.log(son.name, father.name);  // Tom, John
son.introduce();  // 我是 Tom，是父亲。

在示例中，Son 继承了 Father 的 name 属性和 introduce 方法。这意味着 Son 实例可以访问这些属性和方法，即使它们不在 Son 本身的原型中。

深复制

深复制是一种创建对象副本的过程，其中原始对象的所有属性和子对象也会被复制。这与浅复制不同，浅复制只会复制原始对象的引用。

在 JavaScript 中，对象是一个引用类型，这意味着变量存储的不是对象本身，而是一个指向该对象的引用。浅复制只会复制这个引用，而不是复制对象本身。因此，如果对浅复制的副本进行更改，原始对象也会受到影响。

深复制则不同，它将递归地遍历对象及其所有子对象，并创建它们的副本。这样可以确保副本中的任何更改都不会影响原始对象。

// 浅复制
const original = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

const shallowCopy = Object.assign({}, original);

// 修改浅拷贝
// 对副本进行更改也会影响原件
// 更改副本的地址
// 原件的地址也发生了更改
// 更改副本中的街道
// 原件中的街道也发生了更改

// 深复制
const deepCopy = JSON.parse(JSON.stringify(original));

// 修改深拷贝
// 对副本进行更改不会影响原件
// 更改副本的地址
// 原件的地址保持不变
// 更改副本中的街道
// 原件中的街道保持不变