本课讲解JavaScript最核心底层原理原型与原型链。构造函数通过prototype存放共享方法实例通过__proto__指向原型形成查找链路。原型的意义是实现方法共享、节省内存原型链是对象属性方法的查找规则也是JS继承的基础。所有对象最终都继承自Object构成完整原型链体系。掌握本课能理解JS底层运行逻辑看懂框架源码、类继承、组件封装原理是前端工程师必须掌握的核心知识点。学习时重点理清构造函数、实例、原型三者关系多打印__proto__观察结构结合案例实操即可快速掌握。一、课程学习目的理解JS底层对象运行机制掌握原型、原型对象、proto、prototype核心概念。能独立区分构造函数、实例、原型三者关系看懂原型链访问流程。掌握原型方法的定义与调用实现代码复用优化程序性能。理解原型链继承的底层逻辑能写出简单的继承案例。为后续学习函数、类、组件、框架打下底层基础。二、核心知识点讲解1. 原型prototype每个函数天生拥有prototype属性指向一个对象称为原型对象。作用存放公共方法让所有实例共享使用节省内存。2. 实例的proto每一个对象/实例都拥有__proto__属性指向构造函数的prototype原型对象。实例访问方法时优先找自身没有就去__proto__找。3. 原型链当访问一个对象的属性/方法时先找自身再找它的__proto__原型再找原型的__proto__直到null为止这条链式查找关系就是原型链。4. 原型链作用实现共享方法、继承是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个实例并调用方法打印原型链结构加深理解上一课数组与对象高级操作 实战作业代码!DOCTYPE html html langzh-CN head meta charsetUTF-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 classbox h2英语单词数据管理器/h2 button classbtn onclickfilterWords()filter筛选/button button classbtn onclickmapWords()map格式化/button button classbtn onclickfindWord()find查找/button button classbtn onclicksomeWord()some判断/button button classbtn onclickreduceScore()reduce统计/button button classbtn onclickobjectExtend()对象扩展/button div classresult idresult/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 classitem是否存在等级3单词${res}/div; } // 5 reduce统计总分 function reduceScore() { const total wordList.reduce((sum, item) sum item.score, 0); result.innerHTML div classitem单词总分数${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 classitem${JSON.stringify(data, null, 2)}/div; } function showHtml(data) { result.innerHTML data.map(i div classitem${i}/div).join(); } /script /body /html代码功能说明本实战代码基于ES6语法实现英语单词数据的完整管理系统集成数组高级方法与对象扩展语法。通过filter筛选指定条件单词map格式化数据并渲染页面find精准查找单词some判断数据合法性reduce统计单词总分运用对象属性简写、方法简写、扩展运算符实现对象快速创建与合并。代码采用可视化界面点击按钮可分别执行筛选、格式化、查找、统计、对象合并等功能结果实时展示在页面全程无冗余代码覆盖数组高阶函数、对象扩展所有核心考点适合零基础巩固底层操作能力可直接运行验收。注意事项数组高级方法均不修改原数组返回新数据保证数据安全。filter、map、find、some、reduce必须搭配箭头函数使用语法规范。对象扩展运算符…可拷贝合并对象不可直接赋值导致引用污染。reduce必须传入初始值避免空数组报错。页面渲染使用模板字符串禁止号拼接保持代码统一风格。变量命名遵循语义化注释清晰方便验收与二次修改。运行前确保浏览器支持ES6打开控制台排查异常。作业验收标准所有按钮点击可正常执行无控制台报错。筛选、格式化、查找、统计、对象合并结果准确无误。代码使用箭头函数、扩展运算符、模板字符串符合ES6规范。数组方法使用正确不污染原数据逻辑清晰。界面整洁结果展示直观可直接用于课堂验收。作业拓展要求进阶新增函数实现filtermap链式调用筛选出等级2单词并格式化渲染新增嵌套对象解构扩展运算符组合案例强化综合运用能力。
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面向对象的核心底层机制。三、示例程序// 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个实例并调用方法打印原型链结构加深理解上一课数组与对象高级操作 实战作业代码!DOCTYPE html html langzh-CN head meta charsetUTF-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 classbox h2英语单词数据管理器/h2 button classbtn onclickfilterWords()filter筛选/button button classbtn onclickmapWords()map格式化/button button classbtn onclickfindWord()find查找/button button classbtn onclicksomeWord()some判断/button button classbtn onclickreduceScore()reduce统计/button button classbtn onclickobjectExtend()对象扩展/button div classresult idresult/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 classitem是否存在等级3单词${res}/div; } // 5 reduce统计总分 function reduceScore() { const total wordList.reduce((sum, item) sum item.score, 0); result.innerHTML div classitem单词总分数${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 classitem${JSON.stringify(data, null, 2)}/div; } function showHtml(data) { result.innerHTML data.map(i div classitem${i}/div).join(); } /script /body /html代码功能说明本实战代码基于ES6语法实现英语单词数据的完整管理系统集成数组高级方法与对象扩展语法。通过filter筛选指定条件单词map格式化数据并渲染页面find精准查找单词some判断数据合法性reduce统计单词总分运用对象属性简写、方法简写、扩展运算符实现对象快速创建与合并。代码采用可视化界面点击按钮可分别执行筛选、格式化、查找、统计、对象合并等功能结果实时展示在页面全程无冗余代码覆盖数组高阶函数、对象扩展所有核心考点适合零基础巩固底层操作能力可直接运行验收。注意事项数组高级方法均不修改原数组返回新数据保证数据安全。filter、map、find、some、reduce必须搭配箭头函数使用语法规范。对象扩展运算符…可拷贝合并对象不可直接赋值导致引用污染。reduce必须传入初始值避免空数组报错。页面渲染使用模板字符串禁止号拼接保持代码统一风格。变量命名遵循语义化注释清晰方便验收与二次修改。运行前确保浏览器支持ES6打开控制台排查异常。作业验收标准所有按钮点击可正常执行无控制台报错。筛选、格式化、查找、统计、对象合并结果准确无误。代码使用箭头函数、扩展运算符、模板字符串符合ES6规范。数组方法使用正确不污染原数据逻辑清晰。界面整洁结果展示直观可直接用于课堂验收。作业拓展要求进阶新增函数实现filtermap链式调用筛选出等级2单词并格式化渲染新增嵌套对象解构扩展运算符组合案例强化综合运用能力。
