图解JavaScript 继承，通俗易懂，一学就会！

2023-12-07 12:04:46

JavaScript 继承的概念并不复杂，但对于初学者来说却可能有些难以理解。本文将通过图解的方式，帮助你轻松理解 JavaScript 继承。

什么是继承

在面向对象编程中，继承是一种重要的概念。它允许你创建一个新的类，该类可以继承另一个类的属性和方法。这使得你可以在不重复代码的情况下，创建新的类。

在 JavaScript 中，继承是通过原型链来实现的。原型链是一个对象链，每个对象都指向它的原型对象。原型对象又指向它的原型对象，依此类推。

原型链

要理解 JavaScript 继承，首先需要理解原型链的概念。原型链是一个对象链，每个对象都指向它的原型对象。原型对象又指向它的原型对象，依此类推。

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

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

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

console.log(person1.greet()); // Hello, my name is John and I am 30 years old.
console.log(person2.greet()); // Hello, my name is Jane and I am 25 years old.

在这个例子中，Person函数是一个类，它定义了两个属性（name和age）和一个方法（greet）。当我们使用new调用Person函数时，就会创建一个新的对象（person1和person2）。这些对象继承了Person函数的属性和方法。

我们可以使用Object.getPrototypeOf()方法来获取一个对象的原型对象。

console.log(Object.getPrototypeOf(person1)); // Person {}
console.log(Object.getPrototypeOf(person2)); // Person {}

在这个例子中，Object.getPrototypeOf(person1)和Object.getPrototypeOf(person2)都返回了Person函数的原型对象。

继承

在 JavaScript 中，可以使用原型链来实现继承。要实现继承，你需要创建一个新的类，该类继承另一个类的原型对象。

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

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

const student1 = new Student('John', 30, 'Computer Science');
const student2 = new Student('Jane', 25, 'Business');

console.log(student1.greet()); // Hello, my name is John and I am 30 years old.
console.log(student2.greet()); // Hello, my name is Jane and I am 25 years old.
console.log(student1.major); // Computer Science
console.log(student2.major); // Business

在这个例子中，Student函数继承了Person函数的原型对象。这意味着Student函数的实例对象可以访问Person函数的属性和方法。

我们使用Object.create()方法来创建一个新的对象，该对象继承了Person.prototype对象。然后，我们将Student.prototype对象设置为这个新的对象。最后，我们将Student.prototype.constructor对象设置为Student函数。