YianNotes

一、事件流模型1. 事件流简介事件流描述 DOM 事件 在 DOM 树中传播的完整过程，包含三个阶段： 2. 事件流的三大阶段（1）捕获阶段（Capturing Phase） 事件从 window 向 目标元素 传播 从最外层祖先元素向内传播，直到目标元素 通过 addEventListener 的第三个参数为 true 启用 （2）目标阶段（Target Phase） 事件到达实际触发事件的元素 执行目标元素上绑定的所有事件监听器 此阶段不分捕获和冒泡，按添加顺序执行 （3）冒泡阶段（Bubbling Phase） 事件从 目标元素 向 window 传播 从目标元素向外传播到最外层祖先元素 默认阶段，大多数事件在此阶段触发 3. 完整事件流顺序1234567891011用户交互触发事件 ↓创建事件对象（包含所有事件信息） ↓捕获阶段：window → document → body → 父元素 → 目标元素 ↓（依次执行每个元素上的捕获回调）目标阶段：在目标元素上执行所有监听器 ↓（按添加顺序执行，不分捕获/冒泡）冒泡阶段：目标元素 → 父元素 ...

深入理解对象、函数、[[Prototype]]、prototype、constructor 与属性查找机制 一、核心概念速览 概念 类型 所有者 作用 [[Prototype]] 内部槽（Internal Slot） 所有对象（除 null） 指向原型，用于属性查找 prototype 属性（Property） 函数对象（可构造函数） 作为实例的“模板”对象 constructor 属性（Property） prototype 对象默认属性 指向构造函数本身 原型链 机制 —— 通过 [[Prototype]] 链式查找属性 二、[[Prototype]]：对象的“原型指针”✅ 是什么？ 每个对象（除 null）都有一个内部属性 [[Prototype]] 它是一个指针，指向该对象的“原型”（另一个对象或 null） 它是实现继承和属性查找的核心 ✅ 如何访问？ 推荐：Object.getPrototypeOf(obj) 不推荐：obj.__proto__（已废弃，仅用于调试） 12const obj = {};Objec...

一、执行上下文（Execution Context）JavaScript 执行代码时，会为每一段可执行代码创建一个 执行上下文，它是代码运行的“环境”。 三种类型 全局执行上下文：脚本启动时创建，全局作用域。 函数执行上下文：每次调用函数时创建。 eval 执行上下文：eval 中执行代码时创建（不常用）。 执行上下文的结构每个执行上下文在运行时包含三个核心部分： 组件 说明 LexicalEnvironment 当前上下文的词法环境（管理 let/const） VariableEnvironment 当前上下文的变量环境（管理 var/函数声明） ThisBinding this 的值 ✅ 简记：执行上下文 = 词法环境 + 变量环境 + this 二、词法环境 vs 变量环境 名称 负责 特点 LexicalEnvironment let、const 有块级作用域，有“暂时性死区”（TDZ） VariableEnvironment var、函数声明 有变量提升，无块级作用域 ⚠️ 注意：函数开始...

迭代是什么迭代是指遍历一个集合（如数组、对象、集合等）的所有元素，通常是按照某种顺序访问。迭代器（Iterator）就是提供这种遍历功能的对象。 迭代器 迭代器（Iterator）是一种 ​ 对象​​，它提供了一种标准的方式来 ​ 按顺序访问集合中的元素 ​​。迭代器的核心是它实现了 next()方法，每次调用 next()会返回当前元素并移动指针到下一个位置。 迭代器协议规定:要成为一种迭代器，必须满足迭代器对象有一个 next 方法，next 方法返回一个对象，这个对象包含两个属性，value：当前迭代的值（可以是任意类型）和 done：布尔值，表示迭代是否完成。 其实还有 return()方法和 throw() 用来提前结束或者抛出错误 可迭代对象实现了【Symbol.iterator】 方法的对象 ​，这个方法返回一个迭代器对象。可迭代对象可以用 for...of 遍历，或通过 ... 展开 示例： 1234567891011121314151617181920// 让一个普通对象变为可迭代对象const myIterableObject = { dat...

生成器基础生成器返回一个迭代器对象 或者说是一个带迭代器的集合 也就是可迭代的对象 123456function* generator() { const a = yield 1; // 暂停，返回 {value: 1, done: false} return a; // 结束，返回 {value: a, done: true}}const gen = generator(); // 返回生成器对象（可迭代对象） 1. next() 方法传参机制（重点补充）核心规则：next(value) 的参数会成为上一个 yield 表达式的返回值 123456789101112131415161718192021function* demo() { console.log("开始"); const step1 = yield "第一步"; // next() 停在这里 console.log("step1:", step1); // step1: 外...

一句话总览：三个“缓存杀手”都是因为Redis没拦住请求，导致压力转移到数据库，但触发原因和影响范围完全不同。 一、三者对比（一图秒懂） 术语 一句话定义 触发条件 影响范围 危险等级 缓存击穿 一个热点Key过期，海量请求直击DB 热点Key在高并发瞬间过期 只影响这一个Key对应的业务 ⭐⭐⭐⭐⭐ 缓存雪崩 大批量Key同时过期，DB瞬间爆了 大量Key设置了相同的过期时间 影响大面积业务，可能导致整体服务不可用 ⭐⭐⭐⭐⭐ 缓存穿透 查询的Key在DB中根本不存在，每次都绕开缓存 恶意请求查询不存在的ID（如-1） 持续打DB，直到DB扛不住 ⭐⭐⭐⭐ 二、缓存击穿（Cache Breakdown）是什么？一个超级热点数据（比如双11爆款商品、春运车票）在缓存中过期的瞬间，成千上万的并发请求同时发现缓存为空，全部穿透到数据库。 发生原因 热点数据设置了过期时间 在高并发窗口期内恰好过期 大量请求在同一毫秒发现缓存为空，同时查询DB 解决方案 方案 原理 适用场景 代码思路 互斥锁（SET NX） 只有1个请求能抢到锁去查DB，其他请求等...

📚 Redis 核心语法笔记（精华版） 一句话心法：String 存万物，Hash 存对象，List 存队列/流，Set 存标签/去重，ZSet 存排序/排行。 一、全局通用命令（适用于所有类型） 命令 用法 说明（必记点） KEYS KEYS user:* ❌ 生产禁用，会阻塞服务。 SCAN SCAN 0 MATCH user:* COUNT 100 ✅ 推荐代替，游标迭代，不阻塞。 EXISTS EXISTS key 检查 key 是否存在（返回 1/0）。 DEL DEL key1 key2 同步删除（大 key 会卡顿）。 UNLINK UNLINK big_key 异步删除（推荐删大 key）。 EXPIRE EXPIRE key 60 设置过期时间（秒）。 TTL TTL key 查看剩余时间（-1永久，-2不存在）。 TYPE TYPE key 查看数据类型（string/hash/list…）。 二、五大数据类型命令速查（含易混淆点）1. String（...

没问题！我把 BullMQ 四大核心类整理成了一份完整笔记，直接加到你之前的 Redis 笔记后面，形成一份 《Redis + BullMQ 全栈笔记》。复制保存，随时查阅！🚀 📚 BullMQ 四大核心类笔记（精华版） 一句话总览：BullMQ 是基于 Redis 的 Node.js 任务队列库。Queue 放任务，Worker 干活，QueueEvents 广播状态，FlowProducer 编排复杂依赖。 一、工厂流水线比喻（秒懂版） 核心类 角色比喻 一句话职责 Queue 工厂的任务清单 负责创建任务，放到队列里。 Worker 流水线上的工人 负责取出任务并执行。 QueueEvents 工厂的广播系统 负责监听任务状态变化并通知你。 FlowProducer 负责复杂组装的工头 负责编排有父子依赖的复杂任务流。 二、Queue（队列）—— 任务的生产者 作用：创建任务、管理队列。是任务的入口。 核心方法 方法 语法 说明 add queue.add(name, data, options) 最核心。添加一个任务。 ...