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

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

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

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

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

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

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

当访问对象属性时：

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

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

示例：

javascript 复制代码

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

arr 自身没有 push 方法

但浏览器会找：

javascript 复制代码

arr → Array.prototype → Object.prototype → null

在 Array.prototype 找到 push
因此能调用

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

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

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

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

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

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

❓ 题目 1

javascript 复制代码

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

javascript 复制代码

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（难度提高）

javascript 复制代码

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（大公司爱考）

javascript 复制代码

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

✔ 解析

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

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

javascript 复制代码

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

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

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