JavaScript 继承方式深入探究

2023-12-04 15:45:23

JavaScript 作为一门动态语言，提供了灵活的继承机制，允许对象从其他对象继承属性和行为。理解这些继承方式对于构建可重用和可维护的代码至关重要。

原型链继承

原型链继承是 JavaScript 中最基本的继承方式。每个对象都有一个称为“原型”的内部属性，它指向创建该对象的构造函数的原型对象。这创建了一个原型链，其中每个对象都继承自其原型的属性和方法。

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

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

const person1 = new Person('John');
person1.greet(); // Hello, my name is John!

构造函数继承

构造函数继承通过在子构造函数中调用父构造函数来实现继承。这将父构造函数的属性和方法复制到子构造函数的实例中。

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);

const child1 = new Child('Mary', 25);
child1.greet(); // Hello, my name is Mary!

类继承 (ES6)

ES6 引入了类，提供了一种更简洁、更现代的方式来实现继承。类在幕后使用原型链继承，但语法更类似于其他面向对象的语言。

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

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

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

const child1 = new Child('John', 25);
child1.greet(); // Hello, my name is John!

Object.create()

Object.create() 方法允许您直接创建一个新对象，该对象从指定的原型对象继承属性和方法。

const parent = {
  name: 'Parent',
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

const child = Object.create(parent);
child.name = 'Child';

child.greet(); // Hello, my name is Child!