JavaScript继承，一文让你成为继承大师！

2023-06-24 18:26:20

JavaScript中的继承：对象导向编程的基石

子标题 1：经典继承：基于原型的继承

JavaScript 中的经典继承，也称为基于原型的继承，是一种在 JavaScript 中创建新对象的传统方法。它使用 prototype 属性来创建新的对象，这个新对象将继承其原型对象的所有属性和方法。这种方法有助于代码的可重用性、可扩展性和维护性。

代码示例：

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.`);
};

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

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

const employee1 = new Employee('John Doe', 30, 'Software Engineer');

employee1.greet(); // Output: Hello, my name is John Doe and I am 30 years old.

子标题 2：原型链：理解继承的机制

原型链是 JavaScript 中继承的一个关键概念。每个对象都有一个原型对象，这个原型对象就是该对象的父对象。当一个对象尝试访问一个属性或方法时，JavaScript 会首先在该对象中查找。如果没有找到，它会沿着原型链向上查找，直到找到该属性或方法。

代码示例：

const person1 = {
  name: 'John Doe',
  age: 30
};

person1.greet(); // Error: person1.greet is not a function

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

person1.greet(); // Output: Hello, my name is John Doe and I am 30 years old.

子标题 3：ES6 中的类继承：简洁高效

ES6 中引入了类，为 JavaScript 中的继承提供了更简洁、更易读的方式。类继承使用 extends 来指定父类，子类将继承父类中定义的所有属性和方法。

代码示例：

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

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

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }
}

const employee1 = new Employee('John Doe', 30, 'Software Engineer');

employee1.greet(); // Output: Hello, my name is John Doe and I am 30 years old.