Day 5：继承hackerrank 10天javascript解决方案——Javascript

简介

本系列文章介绍了如何使用Javascript解决Hackerrank平台上的算法问题，本篇文章是第5天的内容，讲解继承的相关知识。

继承

继承是面向对象编程中非常重要的概念。在Javascript中，对象都是基于原型链的，原型链上的对象都是继承关系，最终都会继承Object.prototype的属性和方法。

创建对象的方式

在Javascript中，我们可以通过多种方式创建对象：对象字面量、构造函数、Object.create等。

对象字面量

对象字面量是最简单的创建对象的方式之一，通过{}包裹一组属性和方法，即可创建一个对象。

const person = {
  name: 'John',
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

构造函数

构造函数是创建对象的一种方式，我们可以通过new关键字来调用构造函数，使它返回一个新的对象实例。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
const person = new Person('John', 30);

Object.create

Object.create方法可以让我们创建一个新的对象，并将现有对象设置为它的原型。

const person = Object.create(Object.prototype, {
  name: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
  },
  sayHello: {
    value() {
      console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
    },
    writable: true,
    enumerable: true,
    configurable: true
  }
});

继承的基本原理

在Javascript中，继承是基于原型链的。每个对象都有一个原型对象，它可以从其他对象继承属性和方法。

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
}
function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

const cat = new Cat('Tom');
cat.sayName(); // My name is Tom.

继承方式

在Javascript中，实现继承有以下几种方式：

• 原型链继承
• 组合继承
• 寄生组合式继承
• class继承

原型链继承

原型链继承即通过将子类的原型对象设置为父类的实例对象，从而实现继承。

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
}
function Cat(name) {
  this.name = name;
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

const cat = new Cat('Tom');
cat.sayName(); // My name is Tom.

组合继承

组合继承即将原型链继承和构造函数继承结合起来使用，既可以继承父类的实例属性，又可以继承父类的原型属性。

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
}
function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

const cat = new Cat('Tom');
cat.sayName(); // My name is Tom.

寄生组合继承

寄生组合继承是组合继承的一种优化方式，通过Object.create方法创建一个仅用于继承父类原型的中间对象，可以避免无用的父类构造函数的调用。

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
}
function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype, {
  constructor: {
    value: Cat,
    enumerable: false,
    writable: true,
    configurable: true
  }
});

const cat = new Cat('Tom');
cat.sayName(); // My name is Tom.

class继承

class继承是ES6中新增的继承方式，通过class关键字创建一个类，使用 extends 继承其他类。

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(`My name is ${this.name}.`);
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

const cat = new Cat('Tom');
cat.sayName(); // My name is Tom.

结语

继承是面向对象编程中非常重要的概念，Javascript中的继承是基于原型链的，实现起来有多种方式。掌握继承的相关知识可以让我们更好地设计和构建Javascript应用程序。