Javascript如何实现继承

2023-10-12 23:29:30

JavaScript 中的继承

在 JavaScript 中，继承允许一个对象获取另一个对象的属性和方法。这使得我们可以创建和扩展现有类的功能，从而提高代码的可重用性。JavaScript 中有四种主要的继承方式：

原型继承

原型继承是 JavaScript 中最简单的继承方式。它允许子类访问父类的原型对象，从而获得父类的方法和属性。

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

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

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

const child = new Child();

child.sayHello(); // 输出: Hello, I'm Child

构造函数继承

构造函数继承通过调用父类的构造函数来实现。它允许子类继承父类的属性和方法，并且可以添加自己的属性和方法。

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

function Child() {
  // 调用父类构造函数
  Parent.call(this);

  this.age = 10;
}

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

const child = new Child();

child.sayHello(); // 输出: Hello, I'm Child
console.log(child.age); // 输出: 10

组合继承

组合继承结合了原型继承和构造函数继承的优点。它允许子类继承父类的属性和方法，并且可以添加自己的属性和方法。

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

function Child() {
  // 调用父类构造函数
  Parent.call(this);

  this.age = 10;
}

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

// 添加自己的方法和属性
Child.prototype.sayGoodbye = function() {
  console.log(`Goodbye, I'm ${this.name}`);
};

const child = new Child();

child.sayHello(); // 输出: Hello, I'm Child
child.sayGoodbye(); // 输出: Goodbye, I'm Child
console.log(child.age); // 输出: 10

寄生组合继承

寄生组合继承是一种组合继承的变体。它允许子类继承父类的属性和方法，但不继承父类的构造函数和实例属性。

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

function Child() {
  // 创建一个空对象
  const obj = {};

  // 设置 obj 的原型为 Parent.prototype
  obj.__proto__ = Parent.prototype;

  // 添加自己的属性和方法
  obj.name = "Child";
  obj.age = 10;
  obj.sayGoodbye = function() {
    console.log(`Goodbye, I'm ${this.name}`);
  };

  // 返回 obj
  return obj;
}

const child = Child();

child.sayHello(); // 输出: Hello, I'm Child
child.sayGoodbye(); // 输出: Goodbye, I'm Child
console.log(child.age); // 输出: 10