【前端八股文面试题】【JavaScript篇7】什么是JavaScript的原型、原型链? 有什么特点

一、原型（Prototype）

1. 定义

   • 每个 函数 都有一个特殊的属性 prototype（显式原型）。
   • prototype 是一个对象，用于存储该构造函数创建的实例共享的属性和方法。
   • 例如：

     function Person(name) {
       this.name = name;
     }
     // 向原型添加共享方法
     Person.prototype.sayHello = function() {
       console.log(`Hello, I'm ${this.name}`);
     };
     

2. 关键点

   • 构造函数的 prototype 属性指向其原型对象。
   • 实例对象通过 __proto__（隐式原型，非标准属性）或 Object.getPrototypeOf() 访问原型。
   • 原型对象中默认包含 constructor 属性，指回构造函数本身（如 Person.prototype.constructor === Person）。

二、原型链（Prototype Chain）

1. 定义

   • 当访问一个对象的属性或方法时：
     • 先在该对象自身查找。
     • 找不到则通过 __proto__ 查找其原型。
     • 若原型中仍找不到，则继续向原型的原型查找（即原型链层层向上）。
     • 直到找到属性或到达顶层原型（Object.prototype.__proto__ === null）。

2. 结构示例

   const john = new Person("John");
   

   原型链关系：

   john → Person.prototype → Object.prototype → null
   

   • john.sayHello() 调用流程：
     • john 自身无 sayHello → 通过 john.__proto__ 找到 Person.prototype.sayHello。
   • john.toString() 调用流程：
     • john 和 Person.prototype 均无 toString → 最终在 Object.prototype 中找到。

三、核心特点

1. 动态性

   • 原型对象上的修改实时生效，所有实例均可立即访问。

   Person.prototype.age = 30;
   console.log(john.age); // 30（即使john是之前创建的）
   

2. 共享性

   • 原型上的属性和方法被所有实例共享，节省内存。
   • 但引用类型属性（如数组）的修改会跨实例共享（需谨慎）：

     Person.prototype.hobbies = [];
     john.hobbies.push("Coding");
     const alice = new Person("Alice");
     console.log(alice.hobbies); // ["Coding"]（所有实例共享同一数组）
     

3. 继承机制

   • 通过原型链实现对象之间的继承关系。

     function Student(grade) {
       this.grade = grade;
     }
     // 继承Person的原型
     Student.prototype = Object.create(Person.prototype);
     Student.prototype.constructor = Student; // 修复constructor指向
     

4. 原型链终点

   • 所有原型链的终点是 Object.prototype（其 __proto__ 为 null）。
   • 内置方法（如 toString()、hasOwnProperty()）均定义于此。

5. 性能注意

   • 过长的原型链（如多层继承）会降低属性查找效率。
   • 可通过 hasOwnProperty() 区分自身属性和继承属性。

四、原型 vs 类（ES6 class）

• class 语法是原型的语法糖，底层仍基于原型链。
• class 中的 extends 和 super 本质是原型继承的封装：

  class Student extends Person {
    constructor(name, grade) {
      super(name); // 调用父类构造函数
      this.grade = grade;
    }
  }
  

总结

理解原型和原型链是掌握JavaScript继承、类实现、设计模式的关键。