第 10 周总结：原型、DOM 与事件 — JS 基础收官！
蜗牛往上爬 · 前端工业可视化学习笔记 第 10 周总结
本周是 JS 基础的收官周：原型与继承让 JS 对象机制完整落地，DOM 让 JS 能操作页面，事件让页面能响应交互。收官项目"设备管理系统"用上了全部所学。至此，阶段1 的 JS 核心基础部分完成！
目录
一、本周学了什么
知识图谱
原型、DOM 与事件
├── 原型与继承
│ ├── 构造函数 + new（4 步：建对象→连原型→this→返回）
│ ├── prototype（方法共享，所有实例共用一份）
│ ├── 原型链（属性沿 __proto__ 向上查找）
│ ├── 继承（子.prototype = Object.create(父.prototype)）
│ └── hasOwnProperty（区分实例属性/原型方法）
│
├── DOM 操作
│ ├── 获取：getElementById / querySelector(All)
│ ├── 修改：textContent / innerHTML / classList / style
│ ├── 增删：createElement / appendChild / remove
│ ├── 渲染列表：清空 → 遍历 → appendChild
│ └── 节点关系：parentElement / children / siblings
│
└── 事件
├── addEventListener（推荐，可绑多个）
├── 常用：click / input / submit / keydown
├── event：target / preventDefault / stopPropagation
├── 冒泡：子元素事件传到父元素
├── 事件委托：绑父处理子，动态元素自动生效
└── 定时器：setInterval 实时刷新
二、核心知识速记
三条铁律
方法放 prototype——属性在实例、方法在原型，省内存
事件委托——动态列表只绑一个监听，用
event.target判断表单 submit 必须 preventDefault——否则页面刷新，数据丢失
关键公式
// 继承（手写）
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
// 渲染列表三步
list.innerHTML = ""; // 1. 清空
data.forEach(createCard); // 2. 遍历创建
list.appendChild(card); // 3. 插入
// 事件委托模板
parent.addEventListener("click", function (e) {
if (!e.target.classList.contains("目标类")) return;
// 处理
});
在工业可视化里的应用场景
三、本周踩过的坑
坑点 1：事件委托判断失效
// ❌ 直接用 event.target 操作，可能点到子元素
list.addEventListener("click", function (e) {
e.target.style.color = "red"; // 点到按钮里的小图标会出错
});
// ✅ 先判断目标，再处理
list.addEventListener("click", function (e) {
var btn = e.target.closest(".del"); // 找最近的删除按钮
if (!btn) return;
// 处理
});
坑点 2：忘了 preventDefault 表单刷新
// ❌ 表单提交后页面刷新，数据丢失
form.addEventListener("submit", function () {
devices.push(newDevice); // 数据刚加就丢了！
});
// ✅ 阻止默认行为
form.addEventListener("submit", function (e) {
e.preventDefault();
devices.push(newDevice);
render();
});
坑点 3：动态添加的元素没绑定事件
// ❌ 用 onclick 给每个卡片绑，新加的没绑定
data.forEach(function (d) {
card.onclick = fn; // 之后动态添加的卡片不生效
});
// ✅ 事件委托，父元素监听一次，动态元素自动生效
list.addEventListener("click", function (e) {
// 处理所有卡片（含之后新增的）
});
坑点 4：渲染前没清空，导致重复列表
// ❌ 每次 render 都 append，列表越滚越长
function render() {
data.forEach(function (d) { list.appendChild(card); }); // 重复！
}
// ✅ 先清空再渲染
function render() {
list.innerHTML = "";
data.forEach(function (d) { list.appendChild(card); });
}
四、自测清单
[ ] new 调用构造函数做了哪 4 步？
[ ] 方法为什么放 prototype？验证
d1.method === d2.method[ ] 手写原型链继承的两行关键代码？
[ ] 如何区分实例属性和原型方法？（hasOwnProperty）
[ ] querySelector 和 getElementById 的差异？
[ ] textContent 和 innerHTML 的区别？
[ ] 渲染设备列表的三步是什么？
[ ] addEventListener 比 onclick 好在哪？
[ ] 表单 submit 为什么不加 preventDefault 会出问题？
[ ] 什么是事件冒泡？什么是事件委托？
[ ] 动态添加的元素如何自动响应事件？
[ ] event.target 和 event.currentTarget 的区别？
五、JS 基础阶段总结
第 7-10 周学习地图
JS 核心基础（4 周）
│
├── 第 7 周：环境与入门
│ └── Node.js、变量、六大数据类型、运算符、类型转换
│
├── 第 8 周：流程与函数
│ └── 条件、循环、函数、作用域、闭包、this、IIFE
│
├── 第 9 周：数据结构
│ └── 对象、数组、高阶方法（map/filter/reduce）、JSON
│
└── 第 10 周：原型、DOM 与事件 ⭐
├── 原型与继承（对象机制）
├── DOM（操作页面）
├── 事件（响应交互）
└── 设备管理系统（综合收官项目）
阶段1 基础部分成果
收官项目：设备管理系统
用到了什么？
设备管理系统
├── 数据层：对象数组（设备列表）
├── 渲染层：DOM 遍历渲染
├── 添加：submit 事件 + preventDefault + push
├── 删除：事件委托 + filter
├── 搜索：input 事件 + indexOf 过滤
└── 查重：some 方法
六、下阶段预告：ES6 标准
第 11 周开始：ES6 标准学习（阮一峰 ES6 标准入门 第3版 配合）
ES6 让之前的代码更简洁：
// ES5 老写法
var devices = data.map(function (d) { return d.name; });
// ES6 新写法
const devices = data.map(d => d.name);
JS 基础已经完成，接下来用 ES6 的现代语法，把代码写得更简洁、更专业。
🎓 JS 基础收官！从"控制台打印"到"操作页面、响应交互"，你已经具备用 JS 做真实页面的能力。下一步：ES6 标准——用现代语法武装自己！