JS 高阶原型链完全入门指南：开启高级 JavaScript 编程之旅

2024-02-22 10:58:39

在 JavaScript 的世界中，原型链是一个非常重要的概念，它决定了对象之间的继承关系，以及如何访问对象属性和方法。对于刚接触 JavaScript 的小白来说，原型链可能是一个有点抽象和复杂的概念，但不要担心，在这篇文章中，我们将以深入浅出的方式，带领你一步步理解 JavaScript 高阶原型链。

原型链的基本概念

原型链是指一组对象，它们通过原型属性链接在一起。每个对象都有一个原型，而这个原型又可能指向另一个原型，以此类推，直到到达原型链的顶端，即 Object.prototype。

例如，我们有一个 Person 对象，它包含了 name 和 age 属性，以及一个 greet() 方法。Person 对象的原型是 Object.prototype，它包含了一些基本的方法，如 toString() 和 valueOf()。

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

const person1 = new Person('John', 25);
person1.greet(); // Output: "Hello, my name is John and I am 25 years old."

在这个例子中，person1 对象的原型是 Person.prototype，而 Person.prototype 的原型是 Object.prototype。我们可以通过使用 proto 属性来访问对象的原型。

console.log(person1.__proto__); // Output: Person {}
console.log(Person.prototype.__proto__); // Output: {} (Object.prototype)

原型继承

原型继承是 JavaScript 中实现继承的一种方式。子对象通过继承父对象的原型来获得父对象的所有属性和方法。

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

// 设置 Student 的原型为 Person.prototype
Student.prototype = Object.create(Person.prototype);

// 添加 Student 的 greet() 方法
Student.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. I am majoring in ${this.major}.`);
};

const student1 = new Student('Jane', 22, 'Computer Science');
student1.greet(); // Output: "Hello, my name is Jane and I am 22 years old. I am majoring in Computer Science."