返回

JS实现继承的五种方式

前端

在 JavaScript 中,继承是指一个对象获取另一个对象的属性和方法的过程。通过继承,子对象可以重用父对象的行为和数据,从而减少代码重复并提高开发效率。

在 JavaScript 中,有五种常用的实现继承的方法:

  1. 原型链继承
    原型链继承是一种简单且常见的继承方式,它利用了 JavaScript 的原型机制。每个对象都有一个原型对象,原型对象又可能有一个原型对象,如此递归下去,形成一条原型链。子对象可以通过原型链访问父对象的方法和属性。

例如:

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

Parent.prototype.greet = function() {
  console.log("Hello, I am " + this.name);
};

function Child() {
  this.name = "child";
}

// 将 Child 的原型设置为 Parent 的实例
Child.prototype = new Parent();

const child = new Child();
child.greet(); // 输出 "Hello, I am child"
  1. 构造函数继承
    构造函数继承是一种通过调用父对象的构造函数来创建子对象的方法。子对象的构造函数会执行父对象的构造函数,从而初始化父对象的方法和属性。

例如:

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

Parent.prototype.greet = function() {
  console.log("Hello, I am " + this.name);
};

function Child(name) {
  // 调用父对象的构造函数
  Parent.call(this, name);
}

// 将 Child 的原型设置为 Parent 的实例
Child.prototype = new Parent();

const child = new Child("child");
child.greet(); // 输出 "Hello, I am child"
  1. 组合继承
    组合继承是原型链继承和构造函数继承的组合。它通过原型链继承来实现子对象对父对象方法的访问,同时通过构造函数继承来初始化父对象的方法和属性。

例如:

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

Parent.prototype.greet = function() {
  console.log("Hello, I am " + this.name);
};

function Child(name) {
  // 调用父对象的构造函数
  Parent.call(this, name);
}

// 将 Child 的原型设置为 Parent 的实例
Child.prototype = Object.create(Parent.prototype);

// 修正 Child 的构造函数
Child.prototype.constructor = Child;

const child = new Child("child");
child.greet(); // 输出 "Hello, I am child"
  1. 类式继承
    类式继承是通过创建一个类来实现继承。类可以包含属性、方法和构造函数。子类可以继承父类的属性、方法和构造函数,并可以覆盖父类的方法。

例如:

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

  greet() {
    console.log("Hello, I am " + this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }

  // 覆盖父类的方法
  greet() {
    console.log("Hello, I am " + this.name + " (child)");
  }
}

const child = new Child("child");
child.greet(); // 输出 "Hello, I am child (child)"
  1. ES6 class 继承
    ES6 class 继承是类式继承的语法糖。它使用 classextends 来定义类和继承关系。

例如:

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

  greet() {
    console.log("Hello, I am " + this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }

  // 覆盖父类的方法
  greet() {
    console.log("Hello, I am " + this.name + " (child)");
  }
}

const child = new Child("child");
child.greet(); // 输出 "Hello, I am child (child)"

在 JavaScript 中,继承是一种常用的代码复用方式。它可以通过多种方式实现,包括原型链继承、构造函数继承、组合继承、类式继承和 ES6 class 继承。每种继承方式都有其自身的特点和使用场景。