JavaScript类和原型继承深度解析（终于搞懂了！！！）

本文链接：https://blog.youkuaiyun.com/weixin_41663997/article/details/140499411

JavaScript类和原型继承深度解析

在JavaScript的世界里,类(Class)和原型(Prototype)是两个非常重要的概念。它们不仅是JavaScript面向对象编程的基石,也是理解JavaScript语言特性的关键。今天,让我们深入探讨这两个概念,看看它们是如何工作的,以及它们之间的关系。

JavaScript类

ES6引入的类(Class)语法糖让JavaScript的面向对象编程变得更加直观和易用。它在现有的基于原型的继承之上提供了一个更清晰、更熟悉的语法结构。

创建一个类

使用class关键字,我们可以轻松创建一个类:

class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  makeSound() {
    console.log(`${this.name}说${this.sound}`);
  }
}

const dog = new Animal('狗', '汪汪');
dog.makeSound(); // 输出: 狗说汪汪

在这个例子中:

Animal类有一个构造函数,用于初始化name和sound属性。
makeSound方法被定义用来输出动物发出的声音。

创建实例

我们使用new关键字来创建类的实例:

const cat = new Animal('猫', '喵喵');
cat.makeSound(); // 输出: 猫说喵喵

类的继承

使用extends关键字,我们可以创建一个子类,从父类继承属性和方法:

class Dog extends Animal {
  constructor(name, sound, breed) {
    super(name, sound); // 调用父类构造函数
    this.breed = breed;
  }

  getBreed() {
    console.log(`这只狗的品种是${this.breed}`);
  }
}

const goldenRetriever = new Dog('狗', '汪汪', '金毛寻回犬');
goldenRetriever.makeSound(); // 输出: 狗说汪汪
goldenRetriever.getBreed(); // 输出: 这只狗的品种是金毛寻回犬

在这个例子中:

Dog类继承自Animal类。
使用super关键字调用父类的构造函数。
Dog类新增了breed属性和getBreed方法。

基于原型的继承

在ES6引入类之前,JavaScript使用基于原型的继承。对象可以通过原型链从其他对象继承属性和方法。

使用原型创建对象

下面是一个使用原型继承的例子:

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

Animal.prototype.makeSound = function() {
  console.log(`${this.name}说${this.sound}`);
};

const dog = new Animal('狗', '汪汪');
dog.makeSound(); // 输出: 狗说汪汪

在这个例子中:

Animal函数被用作构造函数。
makeSound方法被添加到Animal.prototype上。

扩展原型

我们可以创建一个继承自另一个对象的新对象:

function Dog(name, sound, breed) {
  Animal.call(this, name, sound); // 调用父构造函数
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 继承自Animal
Dog.prototype.constructor = Dog; // 设置构造函数

Dog.prototype.getBreed = function() {
  console.log(`这只狗的品种是${this.breed}`);
};

const goldenRetriever = new Dog('狗', '汪汪', '金毛寻回犬');
goldenRetriever.makeSound(); // 输出: 狗说汪汪
goldenRetriever.getBreed(); // 输出: 这只狗的品种是金毛寻回犬

在这个例子中:

Dog函数通过call调用Animal构造函数。
使用Object.create建立从Animal.prototype的继承。
constructor属性被设置为Dog。

类与原型的比较

语法: 类提供了比原型更简洁、更易读的语法。
继承: 类和原型都支持继承,但类使用extends关键字和super函数,而原型使用Object.create和手动设置构造函数。
使用: 由于语法更清晰、使用更方便,类通常在现代JavaScript开发中更受欢迎,而原型则有助于理解JavaScript继承的底层机制。

检查原型链

我们可以使用__proto__属性在控制台中检查原型链:

console.log(goldenRetriever.__proto__); // Dog原型
console.log(goldenRetriever.__proto__.__proto__); // Animal原型
console.log(goldenRetriever.__proto__.__proto__.__proto__); // Object原型

或者使用Object.getPrototypeOf:

console.log(Object.getPrototypeOf(goldenRetriever)); // Dog原型
console.log(Object.getPrototypeOf(Object.getPrototypeOf(goldenRetriever))); // Animal原型
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(goldenRetriever)))); // Object原型