Day3 完整学习包（原型 原型链）——2026 0312

1. 原型核心概念（3 个核心对象）

表格

2. 原型链核心逻辑

• 定义：当访问对象的属性 / 方法时，JS 会先在对象自身查找，找不到则通过__proto__向上查找其构造函数的prototype，直到Object.prototype（顶端），这条查找链路就是原型链；
• 终止条件：顶端Object.prototype.__proto__ === null，查找不到则返回undefined；
• 核心作用：实现 JS 的继承机制，是面向对象的底层基础。

3. 原型继承（ES5 核心方式）

• 本质：通过修改实例的__proto__指向父类构造函数的prototype，让子类实例能访问父类的共享属性 / 方法。

二、手写原型继承案例（40 分钟必练）

案例 1：基础原型继承（核心写法）

js

// 1. 定义父类（构造函数） function Parent(name) { this.name = name; // 实例私有属性 this.sayHi = function() { // 实例私有方法（不推荐，每个实例都会创建） console.log(`Hi, ${this.name}`); }; } // 父类原型方法（共享方法，所有实例复用） Parent.prototype.eat = function(food) { console.log(`${this.name} eat ${food}`); }; // 2. 定义子类 function Child(name, age) { // 继承父类私有属性（调用父类构造函数，绑定this） Parent.call(this, name); this.age = age; // 子类私有属性 } // 3. 核心：继承父类原型方法 // 方式1：直接赋值（简单但会修改父类原型） // Child.prototype = Parent.prototype; // 方式2：推荐——创建中间对象，隔离子类与父类原型 Child.prototype = Object.create(Parent.prototype); // 修复constructor指向（否则Child.prototype.constructor === Parent） Child.prototype.constructor = Child; // 4. 子类原型方法（不影响父类） Child.prototype.run = function() { console.log(`${this.name} is ${this.age} years old, running`); }; // 5. 测试 const child = new Child("小明", 10); child.sayHi(); // Hi, 小明（继承父类私有方法） child.eat("苹果"); // 小明 eat 苹果（继承父类原型方法） child.run(); // 小明 is 10 years old, running（子类原型方法） console.log(child.constructor); // Child（修复后正确指向） console.log(child.__proto__ === Child.prototype); // true console.log(Child.prototype.__proto__ === Parent.prototype); // true（原型链链路）

案例 2：原型链查找验证

js

// 验证原型链顶端 const obj = {}; console.log(obj.__proto__ === Object.prototype); // true console.log(Object.prototype.__proto__); // null（原型链终点） // 验证属性查找顺序 obj.name = "小红"; Object.prototype.age = 20; console.log(obj.name); // 小红（自身属性） console.log(obj.age); // 20（原型链查找） console.log(obj.gender); // undefined（原型链找不到）

三、核心面试题 + 标准答案（20 分钟背会）

面试题：原型链怎么理解？

标准答案（高级工程师视角，精简且有深度）

1. 原型链的本质

原型链是 JavaScript 实现继承的底层机制，核心基于__proto__（实例的原型指针）和prototype（构造函数的原型对象）的关联关系：当访问对象的属性 / 方法时，JS 会先查找对象自身，若不存在则通过__proto__向上查找其构造函数的prototype，直到原型链顶端Object.prototype，这条逐级查找的链路就是原型链。

2. 原型链的核心特征

• 单向链路：所有对象的原型链最终指向Object.prototype，而Object.prototype.__proto__ === null（终止条件）；
• 属性复用：原型对象（prototype）存放共享属性 / 方法，所有实例可通过原型链访问，避免重复创建，提升内存效率；
• 动态性：修改原型对象的属性 / 方法，所有实例（包括已创建的）都能立即感知（原型链查找是动态的）。

3. 实际开发中的应用

• 自定义构造函数复用方法：将通用方法挂载到prototype上（如表单验证、数据格式化方法），避免每个实例重复创建函数；
• 理解内置对象原型链：如Array.prototype.forEach、String.prototype.slice，本质是通过原型链实现内置方法的共享；
• ES6 Class 的底层逻辑：class/extends是原型链的语法糖，底层仍基于prototype和__proto__实现继承。

4. 加分补充（体现深度）

• 避免直接修改__proto__（性能差且易导致原型污染），推荐用Object.create()实现原型继承；
• 原型链查找是 “读操作”，赋值操作仅修改对象自身属性，不会影响原型对象（如obj.age = 20仅给 obj 加 age 属性，不会改Object.prototype.age）。

四、错题整理模板（10 分钟完成）

表格

总结

1. 核心考点：原型链的核心是「__proto__串联prototype的查找链路」，继承是其核心应用；
2. 实战重点：必须能手写原型继承（Object.create()+call()+ 修复 constructor），这是 ES5 继承的核心；
3. 易错点：避免直接修改__proto__、注意修复 constructor 指向、区分原型链的 “读 / 写” 逻辑。