JavaScript 继承的机制与实例解析

前端

2024-02-06 00:01:31

JavaScript 继承的核心

1. 继承的概念

继承是指从一个类或对象中派生出一个新的类或对象，新类或对象可以继承父类或父对象的数据和行为。

2. JavaScript中的继承方式

JavaScript 中实现继承有以下几种主要方式：

原型链继承 ：这是一种最常见和最基本的继承方式，它通过原型链来实现继承。原型链是一个对象到另一个对象的引用链，每个对象都有一个指向其原型对象的指针，原型对象又指向其原型对象的指针，以此类推。当一个对象调用一个不存在的方法或属性时，JavaScript 会沿着原型链向上查找，直到找到该方法或属性。
构造函数继承 ：这种继承方式通过在子类的构造函数中调用父类的构造函数来实现继承。这样，子类对象就可以继承父类对象的所有属性和方法。
组合继承 ：这种继承方式结合了原型链继承和构造函数继承的优点，它通过在子类的构造函数中调用父类的构造函数来实现继承，然后将父类的原型对象赋给子类的原型对象。这样，子类对象就可以继承父类对象的所有属性和方法，并且子类对象还可以访问父类的原型对象。

3. JavaScript继承的实例

3.1 原型链继承的实例

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

// 父类的方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 子类
function Student(name, age, school) {
  // 通过原型链继承父类
  Person.call(this, name, age);

  this.school = school;
}

// 子类的方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying at ${this.school}.`);
};

// 创建子类对象
const student = new Student('John Doe', 20, 'Harvard University');

// 调用子类的方法
student.sayHello(); // Hello, my name is John Doe and I am 20 years old.
student.study(); // John Doe is studying at Harvard University.

3.2 构造函数继承的实例

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

// 父类的方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 子类
function Student(name, age, school) {
  // 通过构造函数继承父类
  Person.call(this, name, age);

  this.school = school;
}

// 子类的方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying at ${this.school}.`);
};

// 创建子类对象
const student = new Student('John Doe', 20, 'Harvard University');

// 调用子类的方法
student.sayHello(); // Hello, my name is John Doe and I am 20 years old.
student.study(); // John Doe is studying at Harvard University.

3.3 组合继承的实例

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

// 父类的方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 子类
function Student(name, age, school) {
  // 通过构造函数继承父类
  Person.call(this, name, age);

  this.school = school;
}

// 将父类的原型对象赋给子类的原型对象
Student.prototype = Object.create(Person.prototype);

// 子类的方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying at ${this.school}.`);
};

// 创建子类对象
const student = new Student('John Doe', 20, 'Harvard University');

// 调用子类的方法
student.sayHello(); // Hello, my name is John Doe and I am 20 years old.
student.study(); // John Doe is studying at Harvard University.