原型链前端知识梳理

2024-02-14 14:43:11

在前端知识的学习和应用过程中，原型链是一个不可避免的概念。理解原型链有助于你对 JavaScript 对象的创建、操作以及内存管理有更深入的了解。在本文中，我们将对原型链进行深入探讨，从基础概念到实际应用，帮助你构建扎实的原型链知识体系。

1. 原型链的基础概念

1.1 构造函数

在 JavaScript 中，构造函数是指可以被 new 调用的函数。构造函数的首字母通常大写，例如：

function Students(name, age) {
  this.name = name;
  this.age = age;
}

1.2 原型对象

在 JavaScript 中，每个构造函数都会自动创建一个原型对象，这个原型对象是一个普通的 JavaScript 对象，它包含了该构造函数的所有共有属性和方法。当我们创建一个构造函数的实例时，这个实例就会自动继承其原型对象上的所有属性和方法。

例如，在上面的 Students 构造函数中，它的原型对象包含了 name 和 age 两个属性，以及一个 sayHello() 方法。当我们创建一个 Students 实例时，这个实例就会自动继承这些属性和方法。

const student = new Students('John', 20);
console.log(student.name); // John
console.log(student.age); // 20
student.sayHello(); // Hello, my name is John!

1.3 原型链

原型链是指 JavaScript 对象之间的一系列连接，它允许一个对象访问另一个对象的所有属性和方法。原型链的本质是：每个对象都有一个原型对象，而这个原型对象又可能有自己的原型对象，如此依次类推，直到最终到达一个没有原型对象的原型对象（通常是 Object.prototype）。

2. 原型链的应用

2.1 继承

原型链最常见的应用之一是继承。在 JavaScript 中，可以通过原型链来实现类和子类的继承关系。子类可以继承父类的所有属性和方法，并且可以重写父类的方法。

function Parent() {
  this.name = 'John';
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

function Child() {
  this.age = 20;
}

Child.prototype = new Parent();

const child = new Child();
console.log(child.name); // John
console.log(child.age); // 20
child.sayHello(); // Hello, my name is John!

在上面的例子中，Child 构造函数继承了 Parent 构造函数的原型对象，因此 Child 实例具有 name 属性和 sayHello() 方法。同时，Child 构造函数还添加了一个新的属性 age 和一个新的方法 sayAge()。

Child.prototype.sayAge = function() {
  console.log(`My age is ${this.age}!`);
};

child.sayAge(); // My age is 20!

2.2 内存管理

原型链还可以帮助 JavaScript 进行内存管理。当我们创建一个新对象时，JavaScript 会在内存中为该对象分配空间。这个空间包含了该对象的所有属性和方法。如果这些属性和方法在该对象的原型对象上已经存在，那么 JavaScript 就不需要在该对象上再次分配空间，而是直接引用原型对象上的属性和方法。

这种内存管理方式可以节省大量的内存空间，尤其是在创建大量对象的情况下。例如，如果我们创建一个包含 100 个学生的数组，那么每个学生对象都需要存储 name 和 age 两个属性。如果我们使用原型链，那么这些属性只需要在 Students 构造函数的原型对象上存储一次，而每个学生对象只需要存储对原型对象属性的引用。