前端面试宝典

 

JavaScript 原型链（最通俗易懂、面试必问核心）

用最简单、最直白、不绕弯的方式给你讲清楚 JS 原型链到底是什么、怎么工作、面试怎么答。

一、先记住 3 个核心概念

JS 原型链就围绕 3 个东西：

  1. __proto__：每个对象都有的隐式原型属性（指向自己的“爸爸”）
  2. prototype：每个函数才有的显式原型对象（用来给后代继承的）
  3. constructor：原型对象里的属性，指回构造函数本身

一句话口诀：
对象有 __proto__，函数有 prototype，原型链就是 __proto__ 连起来的链条。

二、最核心的一句话原理

在 JS 里，一切都是对象。
当你访问一个对象的属性/方法时：

  1. 先在自己身上找
  2. 找不到 → 去 __proto__ 指向的爸爸身上找
  3. 还找不到 → 去爸爸的爸爸身上找
  4. 一直找到最顶端 null
    这条查找路径 = 原型链

三、用代码秒懂

// 1. 构造函数（函数才有 prototype）
function Person(name) {
  this.name = name;
}

// 2. 往原型上添加方法
Person.prototype.sayHi = function () {
  console.log('我是 ' + this.name);
};

// 3. 创建实例对象（对象只有 __proto__）
const p = new Person('小明');

p.sayHi(); // 我是 小明

查找过程（原型链工作）：

  1. p 自己没有 sayHi
  2. 去 p.__proto__ 找 → 找到了 Person.prototype
  3. 执行里面的 sayHi

四、一张图看懂关系

p 对象
  ↓ __proto__
Person.prototype（原型对象）
  ↓ __proto__
Object.prototype（根原型）
  ↓ __proto__
null

这就是完整原型链。

五、3 条铁律（面试必考）

  1. 所有对象的 __proto__ 最终都指向 Object.prototype
  2. 所有函数的 __proto__ 都指向 Function.prototype
  3. 原型链的顶端是 null

六、最经典的等式（必须背）

p.__proto__ === Person.prototype

Person.prototype.constructor === Person

Person.prototype.__proto__ === Object.prototype

Object.prototype.__proto__ === null

七、原型链的作用

  1. 实现继承（子类共用父类的方法，节省内存）
  2. 共享方法（数组/字符串/对象的原生方法都在原型上）
  3. JS 面向对象的基础

八、一句话终极总结

原型链就是对象通过 __proto__ 向上查找属性和方法的链条，
它让 JS 实现了继承、代码复用和方法共享，是 JS 的核心底层机制。

总结（面试直接背）

  1. __proto__ 是对象的隐式原型，指向构造函数的 prototype
  2. prototype 是函数的显式原型，存放共享属性方法
  3. 原型链 = __proto__ 组成的查找链条
  4. 终点是 Object.prototype，再往上是 null
  5. 作用：继承 + 共享方法