基础知识|原型在什么时候用和类的区别

在 JavaScript 中，原型和类是两个密切相关但有所不同的概念。理解这两者之间的差异有助于更好地掌握面向对象编程（OOP）在 JavaScript 中的实现。

1. 原型（Prototype）

原型是 JavaScript 中实现继承和共享行为的核心机制。每个函数在被用作构造函数创建对象时，都会自动获得一个 prototype 属性，指向一个包含共享方法和属性的对象。

• 原型的作用: 原型提供了一个可以在对象实例间共享的方法或属性的地方。当你访问对象的方法或属性时，如果该对象自身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到或达到原型链的末端（null）。

• 什么时候用原型:

  • 共享方法和属性: 当你希望所有实例共享某些方法或属性时，可以将它们定义在构造函数的原型上，而不是每个实例上。例如，你想给所有 MyLinkedList 的实例添加一个 get 方法，可以将它定义在 MyLinkedList.prototype 上。
  • 继承: 通过 prototype 你可以实现继承，让一个对象从另一个对象继承方法和属性。通过 Object.create() 或 class 语法，JavaScript 使用原型链来建立对象之间的继承关系。

• // 定义构造函数
  function Person(name) {
    this.name = name;
  }
  
  // 定义原型方法
  Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
  };
  
  // 创建实例
  const person1 = new Person('Alice');
  person1.sayHello(); // 输出 "Hello, Alice"
  

  2. 类（Class）

​​​类是 JavaScript 在 ECMAScript 6（ES6）引入的一个新语法，它是构造函数和原型的语法糖，提供了一种更接近传统面向对象语言（如 Java、C++）的方式来创建对象和定义方法。

• 类的作用: 类是用于创建对象的蓝图，定义了构造函数和实例方法。类的每个实例都会有自己的属性，但共享类中的方法。虽然语法上类提供了更清晰、更简洁的方式，但它在底层依然依赖原型机制。

• 什么时候用类:

  • 创建对象: 如果你想使用面向对象的编程风格来创建对象，并通过类提供更清晰的结构，可以使用 class。
  • 继承: 类的继承非常直观，使用 extends 关键字可以轻松继承另一个类的属性和方法。
  • 更易维护: 类提供了更简洁的语法，特别是当涉及到继承和代码组织时，比原型链方式更加清晰和易于维护。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('Hello, ' + this.name);
  }
}

const person2 = new Person('Bob');
person2.sayHello(); // 输出 "Hello, Bob"

这里，Person 类的实例有一个 sayHello 方法。class 语法自动处理了原型链的创建，实例对象通过类自动继承这些方法

3. 原型与类的区别

4. 原型链与类继承的关系

虽然 class 语法是对 prototype 机制的封装，但它本质上还是依赖原型链来实现继承。class 会自动处理原型的设置，使得代码更加简洁易读。

例如，使用 class 语法继承另一个类时，JavaScript 内部实际上是在做原型链的设置。来看这个例子：

class Animal {
  speak() {
    console.log('Animal speaking');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barking');
  }
}

const dog = new Dog();
dog.speak(); // 输出 "Dog barking"

这里，Dog 类继承了 Animal 类。在底层，Dog 会通过 __proto__ 属性指向 Animal 类的原型。这意味着 Dog 的实例可以访问 Animal 类的 speak 方法，除非它自己定义了该方法（如这里所示）。

5. 什么时候选择使用原型，什么时候使用类

• 使用原型:

  • 当你想直接操作原型链或实现更底层的继承时，原型机制非常灵活且高效。
  • 当你在学习 JavaScript 面向对象的实现原理时，原型链机制能帮助你理解 JavaScript 中的继承、方法共享等概念。

• 使用类:

  • 当你希望代码结构更加简洁、易读且更接近传统面向对象语言时，使用 class 会更直观。
  • 如果你的项目需要清晰的继承体系和方法组织，使用 class 可以让代码更容易维护。

总结

• 原型是 JavaScript 中实现继承的核心机制，每个构造函数都有一个 prototype 属性，用于定义共享方法和属性。
• 类是对原型机制的语法糖，使得面向对象编程的风格在 JavaScript 中更加直观和易用。
• 虽然 class 提供了更简洁的语法，但底层仍然依赖原型链。因此，你可以把类看作是对原型机制的封装，它让继承和方法共享的实现更易于理解和使用。