【前端每天一题】🔥 第 13 题：原型链查找规则是什么？为什么对象能访问到方法？

原型链查找规则 - 前端高频必考题

第 13 题：原型链查找规则 + 面试常考代码题

这题是前端面试的必考知识点之一。

第 13 题：原型链查找规则是什么？为什么对象能访问到方法？

---

一、核心概念：原型链是什么？

原型链（Prototype Chain）是一条由 __proto__ 组成的链式结构，用于查找属性。

当访问对象属性时：

1. 先看对象自身有没有
2. 没有 → 去它的原型（__proto__）找
3. 继续往上找
4. 找到 Object.prototype 后终止
5. 再往上是 null

---

二、为什么对象能访问到方法？（关键点）

示例：

const arr = [1, 2, 3]
arr.push(4)

• arr 自身没有 push 方法

• 但浏览器会找：

  arr → Array.prototype → Object.prototype → null

• 在 Array.prototype 找到 push

• 因此能调用

这就是原型链的核心意义。

---

三、原型查找规则（必须背）

访问属性时：沿着原型链向上查找第一个匹配的属性，查到就停止，查不到返回 undefined。

---

四、原型链结构（一张表秒懂）

对象	它的原型（__proto__）
{}	Object.prototype
[]	Array.prototype
function	Function.prototype
自定义实例	构造函数.prototype
Object.prototype	null

---

五、面试必考：原型链经典代码题

❓ 题目 1

function Foo() {}
Foo.prototype.a = 100
const f = new Foo()

console.log(f.a)           // ?
console.log(f.hasOwnProperty('a'))  // ?

✔ 答案

• f.a → 100（来自原型链）
• f.hasOwnProperty('a') → false（不在自身）

---

❓ 题目 2

const obj = { a: 1 }
const obj2 = Object.create(obj)

console.log(obj2.a)  // ?
obj2.a = 2
console.log(obj.a)   // ?

✔ 解析

• obj2.a → 查到原型 obj → 1
• obj2.a = 2 → 给 obj2 自己加属性，不会改原型

输出：

1
1

---

❓ 题目 3（难度提高）

function Foo() {}
Foo.prototype.x = 1
let f1 = new Foo()

Foo.prototype = { x: 2 }
let f2 = new Foo()

console.log(f1.x) // ?
console.log(f2.x) // ?

✔ 解析

• f1 是在改 prototype 之前创建的： → 它连向旧的 Foo.prototype（x=1）
• f2 是在替换 prototype 之后创建的： → 它连向新的 Foo.prototype（x=2）

结果：

1
2

---

❓ 题目 4（大公司爱考）

Object.prototype.x = 1
const y = {}
console.log(y.x)

✔ 解析

• y 自身没有 → 从原型 Object.prototype 查 → 1

---

六、速记卡片（面试背诵版）

🎯 原型链：由 __proto__ 连接成的属性查找路径
🎯 查找规则：自身找 → 原型找 → 直到 Object.prototype → null

📌 数组的原型链：arr → Array.prototype → Object.prototype → null
📌 实例的原型 = 构造函数.prototype
📌 原型被改后，旧实例不受影响，新实例受影响

🔥 必考题：
f1 = new Foo()
Foo.prototype = {...}
f2 = new Foo()
→ f1 用旧的原型，f2 用新的原型