从原型链揭秘JS的原型继承

2023-10-18 15:49:12

揭开 JavaScript 原型链的神秘面纱：深入理解继承与代码优雅

在 JavaScript 的世界里，原型链宛如一条神秘而悠长的锁链，将每个函数和对象紧紧相连。它赋予了代码强大的继承能力，使我们能够编写出更加优雅和健壮的程序。

原型链的运作原理

每个 JavaScript 函数都拥有一个称为 prototype 的属性，该属性指向一个对象，而这个对象正是调用该构造函数创建的实例的原型。我们以一个 Person 构造函数为例，它用来创建 Person 对象：

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

现在，我们创建一个新的 Person 对象：

const person = new Person('John');

此时，person 对象便拥有了构造函数 Person 的 prototype 属性指向的对象，我们称之为 person 对象的原型。

原型链的奥秘在于，当我们访问 person 对象的属性或方法时，JavaScript 引擎首先会在 person 对象本身中查找。如果找不到，它会沿着原型链向上查找，直到找到该属性或方法。

例如，要获取 person 对象的 name 属性，JavaScript 引擎会首先在 person 对象中查找。如果没有找到，它会沿着原型链向上查找，直到找到 Person 构造函数的 prototype 属性指向的对象。

console.log(person.name); // 'John'

在上面的代码中，JavaScript 引擎首先在 person 对象中查找 name 属性，没有找到后，它会沿着原型链向上查找，直到找到 Person 构造函数的 prototype 属性指向的对象。在这个对象中，我们找到了 name 属性，并将其值 'John' 输出到控制台。

原型链的应用：实现继承

原型链最强大的应用之一就是实现继承。它允许我们创建新对象，这些对象可以继承另一个对象的属性和方法，而无需显式复制代码。

我们以 Student 构造函数为例，它继承了 Person 构造函数的功能：

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

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

在上面的代码中，我们首先使用 Person.call(this, name) 将 Person 构造函数的 this 设置为 Student 构造函数的 this 。然后，我们将 Student.prototype 属性设置为 Object.create(Person.prototype)，这将创建一个新对象，它继承了 Person 构造函数的 prototype 属性指向的对象。

现在，我们创建一个新的 Student 对象：

const student = new Student('John', 'Computer Science');

此时，student 对象便拥有了 Person 构造函数和 Student 构造函数的 prototype 属性指向的对象。这意味着，student 对象可以访问 Person 构造函数和 Student 构造函数的所有属性和方法。

console.log(student.name); // 'John'
console.log(student.major); // 'Computer Science'

在上面的代码中，JavaScript 引擎首先在 student 对象中查找 name 属性和 major 属性。没有找到后，它会沿着原型链向上查找，直到找到 Person 构造函数和 Student 构造函数的 prototype 属性指向的对象。在这个对象中，我们找到了 name 属性和 major 属性，并将它们的值 'John' 和 'Computer Science' 输出到控制台。