js实现继承方式的详细解析

2023-10-19 11:27:22

JavaScript 继承：六种实现方式剖析

在 JavaScript 中，继承是对象获取其他对象属性和方法的能力。这对于代码复用和维护至关重要。JavaScript 提供了多种继承方式，每种方式都有其优点和缺点。

原型链继承

这是最基本的继承方式。对象通过一个内部的 [[Prototype]] 属性链接到其原型对象，从而可以访问原型对象的属性和方法。

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

Parent.prototype.play = function() {
  console.log(this.name + ' is playing.');
}

function Child() {}

Child.prototype = new Parent();

const s1 = new Child();
s1.play(); // "parent is playing"

构造函数继承

子类的构造函数调用父类的构造函数来获得父类的属性和方法。

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

Parent.prototype.play = function() {
  console.log(this.name + ' is playing.');
}

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

const s1 = new Child('child');
s1.play(); // "child is playing"

组合继承

这种方式结合了原型链继承和构造函数继承，解决了这两种方式的缺点。

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

Parent.prototype.play = function() {
  console.log(this.name + ' is playing.');
}

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

Child.prototype = new Parent();

const s1 = new Child('child');
s1.play(); // "child is playing"
console.log(s1.age); // 10

原型式继承

创建一个新对象，并将其原型设置为另一个对象来实现继承。

const parent = {
  name: 'parent',
  play() {
    console.log(this.name + ' is playing.');
  }
};

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

child.play(); // "child is playing"

寄生式继承

创建一个新对象，并将其属性和方法复制到另一个对象来实现继承。

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

Parent.prototype.play = function() {
  console.log(this.name + ' is playing.');
}

function Child(name) {
  const parent = new Parent(name);
  return Object.assign({}, parent, {
    name: name
  });
}

const s1 = new Child('child');
s1.play(); // "child is playing"

混入式继承

将一个对象的属性和方法复制到另一个对象来实现继承。

const parent = {
  name: 'parent',
  play() {
    console.log(this.name + ' is playing.');
  }
};

const child = Object.assign({}, parent, {
  name: 'child'
});

child.play(); // "child is playing"