JavaScript中的类（Class）与原型继承的对比与实现

1. 背景与核心概念

JavaScript的继承机制基于原型链（Prototype Chain），而ES6引入的class语法糖是为了让开发者更直观地实现面向对象编程（OOP）。但class的本质仍是原型继承，理解其底层原理对避免常见陷阱（如this指向问题）至关重要。

2. 原型继承的基本原理

（1）构造函数与原型对象

function Animal(name) {  
  this.name = name;  
}  
// 方法挂载到原型上，共享给所有实例  
Animal.prototype.speak = function() {  
  console.log(`${this.name} makes a noise.`);  
};  
const dog = new Animal("Rex");  
dog.speak(); // "Rex makes a noise."  

• 通过new调用构造函数时，会创建一个新对象，并将其原型（__proto__）指向Animal.prototype。
• 实例的__proto__与构造函数的prototype属性相等（dog.__proto__ === Animal.prototype）。

（2）原型链继承

function Dog(name, breed) {  
  Animal.call(this, name); // 继承属性  
  this.breed = breed;  
}  
// 关键步骤：将Dog的原型指向Animal的实例  
Dog.prototype = Object.create(Animal.prototype);  
// 修正constructor指向  
Dog.prototype.constructor = Dog;  
// 子类新增方法  
Dog.prototype.bark = function() {  
  console.log(`${this.name} barks!`);  
};  
const myDog = new Dog("Max", "Husky");  
myDog.speak(); // 继承父类方法  

问题：

• 手动维护原型链（如Object.create和constructor修正）容易出错。
• 代码可读性差。

3. ES6类的语法与特性

（1）基本语法

class Animal {  
  constructor(name) {  
    this.name = name;  
  }  
  speak() {  
    console.log(`${this.name} makes a noise.`);  
  }  
}  
class Dog extends Animal {  
  constructor(name, breed) {  
    super(name); // 必须调用super()才能使用this  
    this.breed = breed;  
  }  
  bark() {  
    console.log(`${this.name} barks!`);  
  }  
}  
const myDog = new Dog("Max", "Husky");  
myDog.speak(); // 继承父类方法  

（2）类的本质仍是函数

typeof Animal; // "function"  
Animal.prototype.speak; // 方法在原型上  

• class中的方法自动挂载到原型，constructor对应构造函数。
• extends关键字自动建立原型链（Dog.prototype.__proto__ === Animal.prototype）。

（3）类的特殊特性

• 静态方法与属性：

  class Animal {  
    static className = "Animal";  
    static identify() {  
      console.log("I am an animal class.");  
    }  
  }  
  Animal.identify(); // 直接通过类调用  
  

• 私有字段（ES2022）：

  class Animal {  
    #age = 0; // 私有属性  
    getAge() { return this.#age; }  
  }  
  

4. 类与原型继承的对比

5. 常见陷阱与最佳实践

（1）this指向问题

class Button {  
  constructor() {  
    this.text = "Click me";  
  }  
  click() {  
    console.log(this.text);  
  }  
}  
const button = new Button();  
// 以下会丢失this指向！  
setTimeout(button.click, 1000); // 输出undefined  
// 解决方案：绑定this或使用箭头函数  
setTimeout(() => button.click(), 1000);  

• 类方法中的this由调用方式决定，需注意传递方法时的上下文丢失。

（2）子类必须调用super()

class Dog extends Animal {  
  constructor(name, breed) {  
    // 不调用super()会报错！  
    super(name);  
    this.breed = breed;  
  }  
}  

6. 总结

• 类（Class） 是原型继承的语法糖，提供了更清晰的OOP风格代码结构。
• 理解原型链是调试复杂继承关系的基础（如使用instanceof检查类型）。
• 在需要高性能或特殊继承逻辑（如对象组合）时，仍可能需要直接使用原型继承。