上篇回顾2.1-02 把 CSS 布局从盒模型到 Flex/Grid 一次讲透揭示「所有布局在解决空间分配矛盾」。本篇进入 JavaScript——前端的核心语言。对后端工程师来说JS 最大的挑战不是语法语法很简单而是心智模型——原型链、闭包、this、事件循环每一样都和 Java 截然不同。一、开篇一段让 Java 工程师困惑的 JS 代码for(vari0;i3;i){setTimeout(()console.log(i),0);}// 输出3 3 3不是 0 1 2Java 工程师的第一反应「为什么不是 0 1 2循环不是顺序执行吗」答案是两个 JS 特性的叠加var的变量提升 事件循环把setTimeout推到循环结束后执行。此时i已经是 3。改成let就好了for(leti0;i3;i){setTimeout(()console.log(i),0);}// 输出0 1 2let是块级作用域每次循环创建新的i。这个例子说明不理解 JS 的作用域和事件循环代码行为会完全违背直觉。本篇把 JS 核心特性与 Java 对照讲透。二、原型链JS 的继承 vs Java 的继承2.1 Java 的类继承classAnimal{voideat(){}}classDogextendsAnimal{voidbark(){}}DogdnewDog();d.eat();// 编译时确定Animal 的方法d.bark();// Dog 的方法Java 的继承是编译时确定的基于类class。2.2 JS 的原型继承functionAnimal(){}Animal.prototype.eatfunction(){console.log(eat);};functionDog(){}Dog.prototypeObject.create(Animal.prototype);Dog.prototype.barkfunction(){console.log(bark);};constdnewDog();d.eat();// 沿原型链找到 Animal.prototype.eatd.bark();// Dog.prototype.barkJS 的继承是运行时查找的基于原型链prototype chain。2.3 原型链查找过程d → Dog.prototype → Animal.prototype → Object.prototype → null访问d.eat时JS 引擎沿这条链向上查找找到第一个eat就用。2.4 ES6 class 语法糖classAnimal{eat(){console.log(eat);}}classDogextendsAnimal{bark(){console.log(bark);}}ES6 的class只是语法糖底层仍是原型链。但写法更接近 Java降低了心智负担。关键区别维度JavaJS继承基础类class原型prototype确定时机编译时运行时多继承不支持接口可多实现不支持原型链单链实例与类关系实例属于类实例有原型指向三、闭包函数 作用域的捆绑3.1 什么是闭包闭包 函数 定义该函数时的作用域。functioncounter(){letcount0;returnfunction(){returncount;};}constccounter();c();// 1c();// 2c();// 3count是counter函数的局部变量但被返回的内部函数「记住」了。即使counter执行完毕count也不会被回收——因为内部函数持有对它的引用。3.2 闭包的真实用途用途示例数据私有化上例的 count 外部无法直接访问回调中保持状态事件监听器里记住上次点击时间模块模式IIFE 封装私有变量柯里化add(a)(b)(c)3.3 闭包的陷阱for(vari0;i3;i){setTimeout(()console.log(i),0);}var是函数作用域整个循环共用一个i。闭包记住的是同一个i循环结束后i3。改成let后每次循环创建新的块级作用域闭包记住的是不同的i。四、thisJS 最混乱的概念4.1 this 的四条规则规则this 指向示例默认绑定全局对象严格模式 undefinedfoo()隐式绑定调用对象obj.foo()显式绑定call/apply/bind 指定的对象foo.call(obj)new 绑定新创建的对象new Foo()优先级new 显式 隐式 默认。4.2 箭头函数的 this箭头函数没有自己的 this继承外层作用域的 this。constobj{name:Tom,greet:function(){setTimeout((){console.log(this.name);// Tom继承 greet 的 this},0);setTimeout(function(){console.log(this.name);// undefined默认绑定全局},0);}};4.3 与 Java this 的区别Java 的this永远指向当前实例。JS 的this取决于调用方式同一个函数在不同调用场景下 this 不同。五、事件循环单线程怎么处理并发5.1 JS 的单线程模型JS 是单线程的——同一时间只执行一个任务。为什么选择单线程因为浏览器里 JS 操作 DOM多线程同时操作 DOM 会冲突。但单线程不代表不能处理 IO——用事件循环 异步回调。5.2 事件循环模型调用栈Call Stack ↑ 执行同步代码 ↓ 遇到异步任务 Web APIs / Node APIs浏览器/Node 提供的异步 API ↓ 异步完成 任务队列Task Queue ← 宏任务setTimeout、setInterval、IO ← 微任务Promise.then、MutationObserver ↓ 调用栈空了 事件循环取一个微任务执行清空所有微任务 ↓ 微任务清空后 取一个宏任务执行 ↓ 循环5.3 宏任务 vs 微任务的执行顺序console.log(1);// 同步setTimeout((){console.log(2);// 宏任务},0);Promise.resolve().then((){console.log(3);// 微任务});console.log(4);// 同步// 输出1 4 3 2规则同步代码 → 清空微任务 → 取一个宏任务 → 清空微任务 → 取下一个宏任务……5.4 与 Java 多线程的对比维度JS 事件循环Java 多线程并发模型单线程 异步回调多线程 锁IO 处理非阻塞 IO 回调阻塞 IO 或 NIO适用场景IO 密集网络请求CPU 密集 IO 密集复杂度回调地狱async/await 缓解锁竞争、死锁各自哲学JS 用单线程避免 DOM 冲突用事件循环处理 IOJava 用多线程榨干 CPU用锁保证安全。六、Promise → async/await6.1 回调地狱getUser(id,function(user){getOrders(user.id,function(orders){getOrderDetail(orders[0].id,function(detail){console.log(detail);});});});6.2 Promise 链式调用getUser(id).then(usergetOrders(user.id)).then(ordersgetOrderDetail(orders[0].id)).then(detailconsole.log(detail)).catch(errconsole.error(err));6.3 async/await同步写法异步执行asyncfunctiongetOrderDetail(id){try{constuserawaitgetUser(id);constordersawaitgetOrders(user.id);constdetailawaitgetOrderDetail(orders[0].id);console.log(detail);}catch(err){console.error(err);}}async/await是 Promise 的语法糖让异步代码看起来像同步。但底层仍是事件循环。七、ES6 高频语法7.1 解构const{name,age}user;// 对象解构const[first,second]arr;// 数组解构functionfoo({name,age18}){}// 默认值7.2 展开constnewObj{...oldObj,extra:1};// 对象展开constnewArr[...oldArr,1,2];// 数组展开7.3 模块// math.jsexportfunctionadd(a,b){returnab;}exportdefaultfunctionmultiply(a,b){returna*b;}// main.jsimportmultiply,{add}from./math.js;ESMES Module是 JS 官方模块标准取代 CommonJSrequire。八、动态类型 vs 静态类型JS 是动态类型变量类型运行时确定。灵活但容易出 bug。functionadd(a,b){returnab;}add(1,2);// 3add(1,2);// 12字符串拼接不是加法8.1 TypeScript给 JS 加类型functionadd(a:number,b:number):number{returnab;}add(1,2);// 编译报错TS 是 JS 的超集编译时类型检查运行时仍是 JS。大型项目推荐用 TS。8.2 type hints mypy 能把 Python 救回静态世界吗能部分救——TS 和 Python 的 type hints 都是可选类型标注不强制。但 TS 生态更成熟主流框架都支持Python 的 mypy 用得少。九、小结表概念JSJava 对照继承原型链class extends闭包函数作用域lambda 捕获变量this取决于调用方式永远是当前实例并发单线程事件循环多线程锁模块ESMimport类型动态TS 补静态静态