深度解读JS里的面向对象、原型和原型链（二）

2023-12-23 03:20:53

原型链和继承：理解 JavaScript 面向对象编程的基础

原型链

在 JavaScript 中，每个函数都拥有一个名为“prototype”的属性，它指向一个对象，被称为原型对象。而每个对象都有一个隐式的“[[Prototype]]”属性，它指向其原型对象。原型对象就像一个蓝图，为对象提供了它可以继承的属性和方法。这种通过原型链进行的继承机制是 JavaScript 中实现面向对象编程的关键。

想象一下一个家族树，每个家庭成员都从其父母那里继承了某些特征。在 JavaScript 中，原型链就像这个家族树。对象从它们的原型对象（相当于父母）那里继承属性和方法，而原型对象本身也可以从它们自己的原型对象（相当于祖父母）那里继承。这种继承关系一直向上追溯，直到最终到达“null”，表示没有任何父级对象。

访问原型对象和原型链

我们可以使用“Object.getPrototypeOf()”方法来获取一个对象的原型对象。我们也可以使用“proto”属性来访问对象的原型对象。原型链可以一直向上追溯，直到最终到达“null”。

原型的动态性

JavaScript 的原型是动态的，这意味着我们可以随时修改一个对象的原型，这将会影响到所有从该原型继承的实例。这种动态性可以极大地提高代码的灵活性和可维护性。想象一下你在建造一栋房子，你可以随时改变蓝图，而不需要重建整个房子。

原型的优点和缺点

优点：

代码重用：原型机制允许我们重用代码，减少代码冗余。
继承：原型机制允许我们实现继承，从而创建子对象，这些子对象可以继承父对象的属性和方法。
多态：原型机制允许我们实现多态，即子对象可以根据自己的具体情况来实现父对象的方法。

缺点：

理解难度大：原型机制的实现原理较为复杂，理解难度较大。
隐式继承：原型机制中的继承是隐式的，这意味着子对象可能继承了一些它不需要的属性和方法。
属性访问性能差：当我们访问一个对象的属性时，JavaScript 需要沿着原型链向上查找，这会降低属性访问的性能。

原型链示例

让我们通过一个示例来理解原型链如何工作的：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

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

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

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

student.greet(); // "Hello, my name is John Doe."

console.log(student instanceof Student); // true
console.log(student instanceof Person); // true

在这个示例中，“Person”是父类，“Student”是子类，子类继承了父类的属性和方法。

总结

原型和原型链是 JavaScript 中面向对象编程的基石。通过修改原型，我们可以动态地改变对象的属性和方法，从而提高代码的灵活性。原型链使我们能够继承父类的属性和方法，并实现多态。虽然原型机制有其优点，但也有理解难度大、继承方式隐式以及属性访问性能较差的缺点。然而，通过熟练掌握原型和原型链，我们可以构建更强大、更可维护的 JavaScript 应用程序。