Javascript中的prototype与继承

JavaScript的原型(prototype)是一种机制，它允许对象继承另一个对象的属性和方法。在这种机制下，对象可以通过其原型链访问到其他对象的属性和方法。在本篇文章中，我们将探讨 JavaScript 中的 prototype 和继承。

原型(prototype)

每个Javascript对象(除了null和undefined)都有一个内部的属性[[Prototype]](也称为 .__proto__)，它继承于该对象的原型对象(prototype object)。我们可以通过Object.getPrototypeOf()方法或通过. __proto__操作符获取一个对象的原型。

1.如何给对象添加原型属性

当我们创建一个新对象时，会自动创建一个原型对象，这个原型对象包含了可继承的属性和方法。我们可以使用Object.create()方法来创建一个新对象并将其原型设置为另一个对象的原型对象。

const person = {
  name: '张三',
  age: 18
};

const student = Object.create(person);
student.grade = '大一';
console.log(student.name); // 张三
console.log(student.age); // 18
console.log(student.grade); // 大一

2.如何给构造函数添加原型属性

每个 JavaScript 函数都有一个prototype属性，它指向该函数的原型对象。当我们通过 new 操作符创建一个实例时，JavaScript 将使用构造函数的原型对象创建实例对象。通过构造函数原型对象添加属性，可以实现该构造函数的所有实例的公共属性和方法。

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

Person.prototype.printName = function() {
  console.log(`我的名字是${this.name}`);
}

Person.prototype.printAge = function() {
  console.log(`我今年${this.age}岁了`);
}

const tom = new Person('Tom', 21);
tom.printName(); // 我的名字是Tom
tom.printAge(); // 我今年21岁了

继承

使用原型来继承属性和方法的对象叫做原型继承。JavaScript 中的继承基于原型链，只要我们在原型链上定义属性和方法，就可以实现继承。

3.如何实现原型继承

我们已经知道了如何在原型上定义属性和方法并访问它们，接下来我们将看看如何使用这个特性来实现原型继承。

const animal = {
  species: 'animal',
  makeSound() {
    console.log('Make Sound');
  }
}

const cat = Object.create(animal);
cat.name = 'Tom';
cat.species = 'cat';

cat.makeSound(); // Make Sound
console.log(cat.name); // Tom
console.log(cat.species); // cat

以上代码可以创建一个 cat 对象，该对象继承自 animal 原型对象。当我们调用 cat 对象的 makeSound() 方法时，它将在 animal 对象的原型对象中查找该方法并执行它。

4.如何实现构造函数继承

构造函数继承是使用父构造函数将属性和方法赋予给子构造函数的一种继承方式。子类使用父类的构造函数来创建自己的实例，并且在实例化的过程中，子类的所有属性和方法都将从父类继承。

function Animal(name) {
  this.name = name;
  this.makeSound = function() {
    console.log('Make Sound');
  }
}

function Cat(name) {
  Animal.call(this, name);
}

const tom = new Cat('Tom');
console.log(tom.name); // Tom
tom.makeSound(); // Make Sound

以上代码实现了一个名为 Cat 的构造函数，并继承了 Animal 的属性和方法。可以看到，在子类 Cat 中没有定义任何属性或方法，而 Cat 对象使用了父类Animal的构造函数来创建实例，并继承了 makeSound() 和 name 属性。

5.如何实现通过构造函数和原型的方式继承

JavaScript 中的继承通常使用原型链和构造函数技术来实现。下面，我们将展示使用构造函数和原型继承方式进行对象创建和继承。

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

Animal.prototype.makeSound = function() {
  console.log('Make Sound');
}

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

const tom = new Cat('Tom');
console.log(tom.name); // Tom
tom.makeSound(); // Make Sound

以上代码通过 Animal 原型对象实现了 name 和 makeSound() 的属性和方法定义，之后我们通过 Cat 的构造函数继承了父类 Animal 的属性和方法。同时，我们将 Cat 对象的原型设置为 Animal 对象的原型，并且在子类 Cat 的原型对象中定义了自己的方法和属性，如上述示例中，tom对象的name和makeSound方法及属性均是通过通过构造函数和原型的方式实现的。

综上所述，我们已经学习了 JavaScript 的 prototype 和继承机制，我们可以创建一个新的对象并将其原型设置为另一个对象的原型，同时，我们也可以使用构造函数和原型来继承父类的属性和方法。这将有助于我们构建功能更强大和复杂的应用程序。