JavaScript实现继承[总结篇]💯

2024-02-09 00:24:30

JavaScript实现继承[总结篇]💯

前言

JavaScript作为一门强大的编程语言，在网页开发领域有着广泛的应用。继承是面向对象编程中的一个重要概念，它允许一个对象从另一个对象中继承属性和方法，从而实现代码的重用和扩展。在JavaScript中，我们可以通过原型链、构造函数和ES6 class等多种方式实现继承。

原型链

原型链是JavaScript实现继承的一种最基本方式。在JavaScript中，每个对象都有一个原型对象，原型对象又可以有自己的原型对象，如此循环下去，直到最终到达Object.prototype对象。当一个对象试图访问一个不存在的属性或方法时，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法。

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

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

const person = new Person('John');

person.sayHello(); // Hello, my name is John

构造函数

构造函数是一种特殊的函数，它用于创建和初始化对象。在JavaScript中，我们可以通过构造函数实现继承，具体做法是将父类的构造函数作为子类的原型对象。

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

Person.prototype.sayHello = 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); // 继承父类原型

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

student.sayHello(); // Hello, my name is John
console.log(student.major); // Computer Science

ES6 class

ES6中引入了class，使得JavaScript支持类和继承。ES6 class的继承方式与Java等其他语言类似，使用extends关键字指定父类。

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, major) {
    super(name); // 调用父类构造函数
    this.major = major;
  }
}

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

student.sayHello(); // Hello, my name is John
console.log(student.major); // Computer Science