JavaScript基础课程十四、原型与原型链（JS 核心底层）

本课讲解JavaScript最核心底层原理：原型与原型链。构造函数通过prototype存放共享方法，实例通过__proto__指向原型，形成查找链路。原型的意义是实现方法共享、节省内存；原型链是对象属性方法的查找规则，也是JS继承的基础。所有对象最终都继承自Object，构成完整原型链体系。掌握本课能理解JS底层运行逻辑，看懂框架源码、类继承、组件封装原理，是前端工程师必须掌握的核心知识点。学习时重点理清构造函数、实例、原型三者关系，多打印__proto__观察结构，结合案例实操即可快速掌握。

一、课程学习目的

理解JS底层对象运行机制，掌握原型、原型对象、proto、prototype核心概念。
能独立区分构造函数、实例、原型三者关系，看懂原型链访问流程。
掌握原型方法的定义与调用，实现代码复用，优化程序性能。
理解原型链继承的底层逻辑，能写出简单的继承案例。
为后续学习函数、类、组件、框架打下底层基础。

二、核心知识点讲解

1. 原型（prototype）

每个函数天生拥有prototype属性，指向一个对象，称为原型对象。

作用：存放公共方法，让所有实例共享使用，节省内存。

2. 实例的 proto

每一个对象/实例都拥有__proto__属性，指向构造函数的prototype原型对象。

实例访问方法时，优先找自身，没有就去__proto__找。

3. 原型链

当访问一个对象的属性/方法时：

先找自身
再找它的__proto__（原型）
再找原型的__proto__
直到null为止

这条链式查找关系就是原型链。

4. 原型链作用

实现共享方法 、继承，是JavaScript面向对象的核心底层机制。

三、示例程序

JavaScript 复制代码

// 1 构造函数
function Word(en, cn) {
    this.en = en;
    this.cn = cn;
}

// 2 原型添加方法（所有实例共享）
Word.prototype.show = function () {
    console.log(`单词：${this.en}，释义：${this.cn}`);
};

// 3 创建实例
const w1 = new Word("apple", "苹果");
const w2 = new Word("banana", "香蕉");

// 4 调用原型方法
w1.show();
w2.show();

// 5 查看原型链
console.log(w1.__proto__ === Word.prototype);
console.log(w1.__proto__.__proto__ === Object.prototype);
console.log(w1.toString()); // 来自Object原型

四、掌握技巧与方法

公共方法一定要写在prototype上，避免重复创建。
__proto__是底层访问入口，开发中优先使用prototype。
所有对象最终都继承自Object.prototype。
原型链最顶层是null。
实例没有的属性方法，会自动沿原型链向上查找。
原型方法中的this指向调用它的实例对象。

五、课后作业

基础作业

定义构造函数Animal，添加name属性，在原型上添加say方法。
创建两个实例，调用原型方法，打印结果。
打印实例__proto__与构造函数prototype，判断是否相等。

进阶作业

给数组原型Array.prototype添加一个求最大值方法max()，让所有数组可使用。
创建对象，通过原型链调用toString、hasOwnProperty方法，理解继承来源。

实战作业

使用构造函数+原型实现英语单词类：
- 构造函数定义en、cn、level
- 原型定义showInfo方法输出完整信息
- 创建3个实例并调用方法
- 打印原型链结构，加深理解

上一课：数组与对象高级操作实战作业代码

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第11课 数组与对象高级操作</title>
    <style>
        .box{width:700px;margin:50px auto;padding:20px;border:1px solid #eee;border-radius:8px;}
        .btn{padding:8px 16px;margin:8px;background:#42b983;color:#fff;border:none;border-radius:4px;cursor:pointer;}
        .result{margin-top:20px;line-height:1.8;}
        .item{padding:8px;border-bottom:1px dashed #eee;}
    </style>
</head>
<body>
    <div class="box">
        <h2>英语单词数据管理器</h2>
        <button class="btn" onclick="filterWords()">filter筛选</button>
        <button class="btn" onclick="mapWords()">map格式化</button>
        <button class="btn" onclick="findWord()">find查找</button>
        <button class="btn" onclick="someWord()">some判断</button>
        <button class="btn" onclick="reduceScore()">reduce统计</button>
        <button class="btn" onclick="objectExtend()">对象扩展</button>
        <div class="result" id="result"></div>
    </div>

<script>
const wordList = [
    { en: "apple", cn: "苹果", level: 1, score: 90 },
    { en: "banana", cn: "香蕉", level: 1, score: 85 },
    { en: "orange", cn: "橙子", level: 2, score: 88 },
    { en: "grape", cn: "葡萄", level: 2, score: 95 }
];
const result = document.getElementById("result");

// 1 filter筛选等级1单词
function filterWords() {
    const res = wordList.filter(item => item.level === 1);
    showJson(res);
}

// 2 map格式化
function mapWords() {
    const res = wordList.map(item => `${item.en} - ${item.cn} - 等级${item.level}`);
    showHtml(res);
}

// 3 find查找orange
function findWord() {
    const res = wordList.find(item => item.en === "orange");
    showJson(res);
}

// 4 some判断是否有等级3
function someWord() {
    const res = wordList.some(item => item.level === 3);
    result.innerHTML = `<div class="item">是否存在等级3单词：${res}</div>`;
}

// 5 reduce统计总分
function reduceScore() {
    const total = wordList.reduce((sum, item) => sum + item.score, 0);
    result.innerHTML = `<div class="item">单词总分数：${total}</div>`;
}

// 6 对象扩展
function objectExtend() {
    const en = "pear";
    const cn = "梨";
    const word = { en, cn, show() { console.log(this.en) } };
    const info = { type: "名词" };
    const full = { ...word, ...info };
    showJson(full);
}

// 工具函数
function showJson(data) {
    result.innerHTML = `<div class="item">${JSON.stringify(data, null, 2)}</div>`;
}
function showHtml(data) {
    result.innerHTML = data.map(i => `<div class="item">${i}</div>`).join("");
}
</script>
</body>
</html>

代码功能说明

本实战代码基于ES6+语法，实现英语单词数据的完整管理系统，集成数组高级方法与对象扩展语法。通过filter筛选指定条件单词，map格式化数据并渲染页面，find精准查找单词，some判断数据合法性，reduce统计单词总分；运用对象属性简写、方法简写、扩展运算符实现对象快速创建与合并。代码采用可视化界面，点击按钮可分别执行筛选、格式化、查找、统计、对象合并等功能，结果实时展示在页面，全程无冗余代码，覆盖数组高阶函数、对象扩展所有核心考点，适合零基础巩固底层操作能力，可直接运行验收。

注意事项

数组高级方法均不修改原数组，返回新数据，保证数据安全。
filter、map、find、some、reduce必须搭配箭头函数使用，语法规范。
对象扩展运算符...可拷贝合并对象，不可直接赋值导致引用污染。
reduce必须传入初始值，避免空数组报错。
页面渲染使用模板字符串，禁止+号拼接，保持代码统一风格。
变量命名遵循语义化，注释清晰，方便验收与二次修改。
运行前确保浏览器支持ES6+，打开控制台排查异常。

作业验收标准

所有按钮点击可正常执行，无控制台报错。
筛选、格式化、查找、统计、对象合并结果准确无误。
代码使用箭头函数、扩展运算符、模板字符串，符合ES6+规范。
数组方法使用正确，不污染原数据，逻辑清晰。
界面整洁，结果展示直观，可直接用于课堂验收。

作业拓展要求（进阶）

新增函数实现filter+map链式调用，筛选出等级2单词并格式化渲染；新增嵌套对象解构+扩展运算符组合案例，强化综合运用能力。