存储与 JavaScript 的this绑定 核心概念详解

文章目录一、存储1.1 MySQL 关系型数据库1.2 浏览器缓存1.3 本地存储1.4 云盘1.5 Redis 缓存1.6 LLM Embedding 存储二、前端八股Form 表单2.1 原生提交的问题2.2 正确做法fetch / ajax三、JavaScript 中的 this 关键字3.1 普通函数调用3.2 对象方法调用⚠️ 经典陷阱引用式赋值丢失 this3.3 构造函数调用3.4 事件处理函数调用3.5 手动指定 this —— call / apply / bind⚠️ 事件中为什么只能用 bind3.6 箭头函数 —— 没有自己的 this全文总结核心知识点复盘常见问题 / 避坑指南从数据存储的多种形态到前端表单处理再到this关键字 —— 一次性打通这些关键知识点。一、存储1.1 MySQL 关系型数据库MySQL是最流行的开源关系型数据库用表Table组织数据。核心价值数据持久化到磁盘断电不丢、重启还在。-- 建表CREATETABLEarticles(idINTPRIMARYKEYAUTO_INCREMENT,titleVARCHAR(200)NOTNULL,contentTEXT,created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP);-- 增删改查INSERTINTOarticles(title,content)VALUES(MySQL入门,...);SELECT*FROMarticlesORDERBYcreated_atDESCLIMIT20;UPDATEarticlesSETtitle新标题WHEREid1;DELETEFROMarticlesWHEREid1;⚠️性能瓶颈MySQL 数据在磁盘上每次查询是毫秒级代码内存操作是纳秒级差了6 个数量级。高并发场景下磁盘 I/O 成为瓶颈这就是需要缓存的根本原因。1.2 浏览器缓存浏览器将 Web 资源HTML/CSS/JS/图片存在本地。第二次访问同一页面时优先从本地缓存读取而非重新下载——这就是打开之前打开过的页面很快的原因。1.3 本地存储以文件形式保存在用户设备上常见格式JSON、CSV、Excel。// JSON灵活支持嵌套JS 原生支持constdata[{id:1,title:文章一},{id:2,title:文章二}];fs.writeFileSync(./data.json,JSON.stringify(data,null,2));// CSV体积小Excel 可直接打开但不支持嵌套// id,title// 1,MySQL入门// 2,Redis实战格式优点缺点场景JSON灵活嵌套JS 原生冗余字符多API 交换、配置CSV体积小Excel 兼容无嵌套数据导出Excel用户友好需特定库报表输出1.4 云盘云盘阿里云 OSS、AWS S3就是网络上的硬盘——通过 HTTP 访问的远程文件存储。适合存图片、附件等文件本身数据库只存 URL 即可。1.5 Redis 缓存Redis是内存型 KV 数据库读写微秒级常作为 MySQL 的缓存加速层。核心场景首页文章列表每次刷新都查 MySQL → 1000 人同时访问 1000 次磁盘查询 → 扛不住。加一层 Redis1.6 LLM Embedding 存储传统数据库靠精确匹配WHERE title MySQL入门但学数据库和MySQL教程语义相同却匹配不到。Embedding将文本转为高维向量语义相近的文本向量距离也近MySQL入门教程 → [0.23, -0.45, 0.78, ..., -0.12] 数据库学习指南 → [0.21, -0.43, 0.75, ..., -0.10] ← 距离很近 今天天气不错 → [0.89, 0.12, -0.34, ..., 0.67] ← 距离很远流程文本 → Embedding 模型 → 向量 → 向量数据库Milvus/Pinecone→ 查询时做相似度检索。应用RAG检索增强生成、语义搜索、推荐系统。传统存储管精确向量存储管语义两者互补。二、前端八股Form 表单2.1 原生提交的问题formactionhttps://www.baidu.commethodGETinputtypetextnameiteminputtypesubmitvalue提交/form点击提交 → 浏览器收集name属性的输入 → 向action地址发请求 →页面刷新/跳转。❌ 页面刷新闪白屏 ❌ JS 状态丢失变量、滚动位置全部重置 ❌ 无法局部更新、加 loading、做校验反馈2.2 正确做法fetch / ajaxuse strict;constoFormdocument.querySelector(.add-items);oForm.addEventListener(submit,function(e){e.preventDefault();// 阻止页面刷新constformDatanewFormData(oForm);constvalueformData.get(item);fetch(/api/items,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({item:value})}).then(resres.json()).then(data{/* 局部更新页面不刷新 */}).catch(errconsole.error(err));});方式刷新异步推荐form action默认✅❌❌fetch/ajax❌✅✅e.preventDefault()是阻止默认提交行为的关键面试必问。三、JavaScript 中的this关键字核心心法this在函数运行时动态绑定不是声明时决定。this指向函数的调用者。3.1 普通函数调用use strict;varname李四;// var 会挂载到 window 上functionshowName(){console.log(this);// 非严格window / 严格undefinedconsole.log(this.name);// 非严格李四 / 严格报错}showName();// 普通调用没有调用者⚠️var声明的变量挂载在window上window.name 李四污染全局let/const不会。严格模式下普通函数this为undefined因为指向全局毫无意义且容易出 bug。3.2 对象方法调用letobj{name:张三,say:function(){console.log(this.name);}};obj.say();// 张三 —— this 指向 . 前面的 obj⚠️ 经典陷阱引用式赋值丢失 thisconstfnobj.say;// 只是把函数本身赋值给 fn切断了与 obj 的关联fn();// undefined严格模式—— 调用方式是 fn()不是 obj.fn()JS 只看调用方式不看函数来自哪里。解决const fn obj.say.bind(obj);3.3 构造函数调用functionPerson(name){this.namename;// new 调用时this 指向新创建的实例}constpnewPerson(张三);console.log(p.name);// 张三new做了创建空对象 → 绑定原型 →this绑定到新对象 → 执行函数体 → 返回对象。3.4 事件处理函数调用document.querySelector(.link).addEventListener(click,function(e){console.log(this);// 指向触发事件的 DOM 元素e.preventDefault();});事件处理函数中this默认指向事件绑定的元素。3.5 手动指定 this —— call / apply / bindletobj{name:张三,speak:function(a,b){console.log(a,b,this.name);}};letobj2{name:王五};// call逐个传参立即执行obj.speak.call(obj2,你好,我是张三);// 王五// apply数组传参立即执行obj.speak.apply(obj2,[你好,我是张三]);// 王五// bind返回新函数不立即执行constfnobj.speak.bind(obj2,你好,我是张三);fn();// 调用时才执行 → 王五方法传参执行适用场景call逐个(ctx, a, b)立即明确参数个数apply数组(ctx, [a,b])立即参数已是数组bind逐个(ctx, a, b)返回函数事件监听、回调⚠️ 事件中为什么只能用 bind// ❌ call/apply 立即执行返回结果undefined不是函数引用oForm.addEventListener(submit,addItem.call(obj));// 报错// ✅ bind 返回新函数事件触发时才调用oForm.addEventListener(submit,addItem.bind(obj));事件监听器需要函数引用不是执行结果。3.6 箭头函数 —— 没有自己的 this箭头函数不仅写法简洁核心特点是没有自己的this继承外层作用域的this。// ❌ 普通函数forEach 回调里 this 丢失constobj{name:张三,friends:[李四,王五],greet:function(){this.friends.forEach(function(friend){console.log(this.name 和 friend);// this.name → undefined!});}};// ✅ 箭头函数this 继承自外层的 greet指向 objconstobj2{name:张三,friends:[李四,王五],greet:function(){this.friends.forEach((friend){console.log(this.name 和 friend);// 张三 和 李四});}};this 优先级从高到低new 绑定→call/apply/bind→对象方法调用(obj.fn())→默认绑定(普通调用)。箭头函数不参与以上规则始终继承外层。全文总结MySQL持久化结构化数据瓶颈在磁盘 I/O浏览器缓存强缓存 协商缓存二次访问不走网络本地存储JSON 灵活、CSV 紧凑、Excel 友好按场景选择云盘网络上的硬盘数据库存 URL、云盘存文件Redis内存缓存层模式为先查缓存 → 未命中查库 → 写回缓存LLM Embedding向量存储管语义相似度与传统精确匹配互补Forme.preventDefault()阻止默认提交用fetch/ajax实现无刷新交互this运行时动态绑定6 种场景 箭头函数核心看调用方式核心知识点复盘#知识点一句话1MySQL持久化存结构化数据磁盘 I/O 是瓶颈2Redis内存缓存加速层“先查缓存再查库”3浏览器缓存强缓存 协商缓存304 继续用4Embedding文本→向量→相似度管语义不管精确5e.preventDefault()阻止表单默认提交异步提交的前提6this本质运行时绑定指向调用者7var vs letvar污染 windowlet不污染8引用式赋值fn obj.method切断关联this 丢失9call vs apply都立即执行call 逐个传、apply 数组传10bind返回新函数不执行事件监听专用11箭头函数无自己的 this继承外层词法作用域12严格模式普通函数 this → undefined防隐式 bug常见问题 / 避坑指南Q1MySQL 和 Redis 的分工MySQL 存全量数据持久化Redis 存热点数据高频访问。Redis 是加速层不是替代品。Q2表单默认提交为什么刷新页面浏览器原生行为——表单提交是一次同步页面导航服务器返回新 HTML 后重新渲染。现代 SPA 必须e.preventDefault()改为异步。Q3fn obj.method; fn()为什么 this 丢了调用方式是fn()不是obj.fn()。.前面的对象就是 this没有.就是默认绑定。Q4call / apply / bind 怎么选参数明确 → call参数在数组 → apply不立即执行事件/回调→ bind。Q5箭头函数能替代所有普通函数吗不能。箭头函数没有自己的this不能做构造函数也不适合需要this指向触发元素的事件处理。Q6严格模式改了什么普通函数this为undefined不是 window禁止未声明变量赋值。消除两大类隐性 bug。如果这篇文章对你有帮助欢迎收藏、点赞也欢迎在评论区交流讨论