1. 从零到一为什么你写的 JavaScript 总是“一学就会一用就废”很多人学 JavaScript 的路径都惊人地相似打开某个教程从var变量声明开始看一路看到闭包、原型链、异步回调笔记记了满满一本可一旦要自己动手写个轮播图、做个表单验证或者处理一段接口返回的数据脑子就一片空白。这不是你不够聪明而是绝大多数教程把 JavaScript 当成了“语法清单”来教而不是当成“解决问题的工具”来练。我见过太多这样的情况有人能背出typeof null返回object却不知道在真实项目里怎么安全地判断一个变量是不是数组有人能默写Promise的三种状态却在面对一个需要串行请求三个接口、再合并数据的场景时无从下手。问题的根源在于JavaScript 的知识点从来不是孤立的它们像一张网变量、作用域、函数、对象、异步、DOM 操作彼此咬合。你只抓单个节点当然拎不起整张网。这篇内容就是冲着这个痛点来的。我不会给你一份“从入门到精通”的目录式罗列而是按照一个前端开发者从写第一行代码到能独立负责模块的成长路径把 JavaScript 的核心机制、常见陷阱、实战套路拆开揉碎。无论你是刚接触编程的新手还是写了几年业务代码但总觉得基础不牢的“熟练工”都能在这里找到让自己“原来如此”的那个瞬间。接下来的内容会覆盖变量与类型系统的真实使用逻辑、函数与作用域的底层规则、对象与原型链的运作方式、异步编程的演进脉络以及 DOM 操作和现代模块化的实战要点。每一块我都会告诉你“为什么这么设计”“什么时候会踩坑”“实际项目里怎么写才稳”。2. 变量、类型与类型转换那些让你半夜改 Bug 的隐形规则2.1 var、let、const 的选择不是风格问题而是作用域问题刚学 JavaScript 的时候很多人会纠结“到底用 var 还是 let”。网上有些文章会说“用 let 就对了var 是旧时代的产物”这话对了一半。真正要理解的是它们背后的作用域机制因为这直接决定了你的变量在哪些地方能被访问到以及会不会出现意料之外的覆盖。var声明的变量只有函数作用域或全局作用域没有块级作用域。这意味着你在一个if块或者for循环里用var声明变量它实际上会“泄漏”到外层函数。我早期写代码时踩过一个典型的坑在一个循环里用var声明索引变量然后在循环内部创建了一个异步回调结果所有回调执行时拿到的都是循环结束后的最终值。当时排查了很久后来才明白是var的作用域导致的。let和const引入了块级作用域变量只在声明它的那对花括号内有效。这就解决了循环变量泄漏的问题。const则更进一步它声明的变量必须在声明时初始化且不能重新赋值。但要注意const保证的是“绑定不可变”而不是“值不可变”。如果你用const声明一个对象你仍然可以修改对象的属性只是不能把这个变量指向另一个对象。实际项目里我的选择策略很简单默认用const只有确实需要重新赋值时才用letvar基本不再使用。这样做的好处是代码的意图更清晰读代码的人一眼就能看出哪些变量会变、哪些不会变。另外let和const还有“暂时性死区”的特性即在声明之前访问会直接报错而不是像var那样返回undefined。这个特性其实是在帮你提前发现错误避免变量提升带来的隐蔽 Bug。2.2 原始类型与引用类型的本质区别JavaScript 的数据类型分为两大类原始类型和引用类型。原始类型包括number、string、boolean、null、undefined、symbol和bigint它们的特点是“按值传递”。引用类型主要是对象包括普通对象、数组、函数等它们的特点是“按引用传递”。这个区别听起来简单但在实际编码中引发的 Bug 非常多。举个最常见的例子你有一个对象想复制一份出来修改于是写了const newObj oldObj然后修改newObj.name结果发现oldObj.name也跟着变了。原因就是newObj和oldObj指向的是同一个内存地址你修改的其实是同一个对象。要真正复制一个对象需要做“浅拷贝”或“深拷贝”。浅拷贝只复制第一层属性如果属性值是对象那拷贝的还是引用。常用的浅拷贝方法有Object.assign({}, oldObj)和扩展运算符{...oldObj}。深拷贝则需要递归复制所有层级可以用JSON.parse(JSON.stringify(oldObj))这种取巧的方式但它有局限性会丢失undefined、函数、symbol也无法处理循环引用。更稳妥的做法是使用structuredClone这个现代 API或者自己写一个递归函数。数组也是引用类型很多人会混淆slice和splice。slice返回一个新数组不改变原数组splice直接修改原数组。我在代码审查中经常看到有人想截取数组的一部分结果用了splice把原数组给改坏了。这种错误在单元测试里不一定能发现因为测试可能只检查了返回值没检查原数组是否被意外修改。2.3 类型转换的隐式规则与防御性编程JavaScript 是弱类型语言类型转换无处不在。最典型的就是和的区别。会进行隐式类型转换不会。比如1 1返回true而1 1返回false。很多教程会简单地说“永远用”但更重要的是理解为什么会带来问题。的转换规则相当复杂如果两个操作数类型不同它会尝试把它们转换成相同类型再比较。null undefined返回true但null 0返回false。NaN NaN返回false这导致判断一个值是不是NaN不能用而要用Number.isNaN()或Object.is()。这些规则在实际开发中很容易让人掉坑里。除了比较运算算术运算也会触发类型转换。5 3得到53因为遇到字符串会做拼接而5 - 3得到2因为-会强制转换成数字。这种不一致性让代码的行为变得难以预测。我的经验是在涉及用户输入或接口返回数据时一定要显式转换类型。比如从表单拿到的值永远是字符串参与计算前先用Number()或parseInt()转一下并且要处理转换失败的情况。防御性编程在这里特别重要。我通常会写一些小的工具函数来封装类型判断比如isArray、isObject、isFunction避免在业务代码里到处写typeof和instanceof。typeof有个著名的坑typeof null返回object这是历史遗留问题。判断null要用value null。判断数组要用Array.isArray()而不是instanceof Array因为后者在跨窗口环境下会失效。3. 函数、作用域与闭包JavaScript 的灵魂三问3.1 函数声明、函数表达式与箭头函数的实战差异JavaScript 里定义函数有好几种方式最常见的是函数声明和函数表达式。函数声明会被提升也就是说你可以在声明之前调用它函数表达式不会被提升必须先赋值再调用。这个差异在组织代码时很关键。我习惯把工具函数写成函数声明放在文件顶部这样无论在哪里调用都不会出错而把需要按条件动态创建的函数写成表达式。箭头函数是 ES6 引入的它最大的特点是没有自己的this而是继承外层作用域的this。这个特性在回调函数里特别有用。比如在setTimeout或数组的map、filter里如果用普通函数this会指向window或undefined需要额外用bind或者const self this来保存上下文。箭头函数直接解决了这个问题。但箭头函数也不是万能的。它不能用作构造函数没有arguments对象也不能用yield。在需要动态this的场景比如给 DOM 元素绑定事件处理器并且需要访问元素本身时普通函数反而更合适。我见过有人在 Vue 的methods里用箭头函数结果this指向出错拿不到组件实例。所以选择哪种函数形式要看具体场景对this和提升行为的需求。3.2 作用域链与变量查找的底层逻辑作用域决定了变量的可见范围。JavaScript 采用词法作用域也就是说变量的作用域在代码书写阶段就确定了而不是在运行时确定。当你在一个函数内部访问一个变量时引擎会先在当前函数的作用域里找找不到就去外层函数的作用域找一直找到全局作用域。这条查找路径就是作用域链。理解作用域链对于调试非常重要。比如你发现某个变量在函数里拿不到或者拿到了意料之外的值通常就是作用域链在作怪。一个常见的场景是循环里创建函数。如果用var声明循环变量所有函数共享同一个变量最终都拿到循环结束后的值。用let声明每次迭代都会创建一个新的绑定每个函数拿到的是各自迭代时的值。还有一个容易忽略的点是全局作用域的污染。在浏览器环境里全局作用域就是window对象。如果你在全局范围内用var声明变量或者不用声明直接赋值都会在window上创建属性。这不仅会污染全局环境还可能与内置属性冲突。现代开发中我们通常用模块化来隔离作用域每个模块有自己的作用域不会互相干扰。3.3 闭包不是玄学而是“函数记住了它出生时的环境”闭包是 JavaScript 里最常被提及但也最容易被神化的概念。简单来说闭包就是一个函数能够访问它定义时所在的作用域中的变量即使这个函数在定义它的作用域之外被调用。换句话说函数“记住”了它出生时的环境。闭包在实际项目中的用途非常广泛。比如封装私有变量你可以用一个立即执行函数创建一个独立作用域在里面定义变量和操作这些变量的函数然后只把函数返回出去。外部代码无法直接访问变量只能通过返回的函数来操作。这就是模块模式的基础。另一个常见用途是函数柯里化和偏函数应用。比如你有一个add(a, b)函数可以通过闭包把它变成add5 add(5)之后调用add5(3)就得到8。这种技巧在函数式编程里很常见能让代码更灵活、更可复用。但闭包也有需要注意的地方。由于闭包会保留对外层变量的引用这些变量不会被垃圾回收机制回收如果闭包长期存在可能会导致内存占用过高。在单页应用里如果给 DOM 元素绑定了闭包形式的事件处理器而元素被移除后没有解绑就可能造成内存泄漏。我的习惯是在组件销毁或元素移除时手动清理不再需要的闭包引用和事件监听。4. 对象、原型与 this绕不开的面向对象机制4.1 创建对象的几种方式与适用场景JavaScript 里创建对象的方式很多最直接的是对象字面量{}。这种方式简单直观适合创建单个对象或配置项。但如果需要创建多个具有相同结构的对象字面量就显得重复了。这时候可以用工厂函数写一个函数每次调用返回一个新对象。工厂函数的优点是逻辑清晰不需要用new也不涉及this的困扰。构造函数是另一种方式配合new关键字使用。new做了四件事创建一个新对象、把新对象的原型指向构造函数的prototype、把this绑定到新对象、执行构造函数体并返回新对象。构造函数的好处是可以利用原型链共享方法节省内存。但如果不小心忘了写newthis就会指向全局对象导致意外的全局变量。这个问题在严格模式下会直接报错所以现代代码建议开启严格模式。ES6 引入了class语法本质上还是基于原型的继承但写法更接近传统面向对象语言可读性更好。class内部的方法定义在prototype上constructor方法在new时执行。class还支持extends实现继承super调用父类构造函数。不过要记住class只是语法糖底层机制没变理解原型链仍然是绕不开的。4.2 原型链属性查找的“家族谱系”每个对象都有一个内部属性[[Prototype]]指向它的原型对象。当你访问一个对象的属性时如果对象本身没有这个属性引擎就会去它的原型上找如果原型上也没有就继续往原型的原型上找直到找到null为止。这条链就是原型链。理解原型链对于读懂 JavaScript 的继承机制至关重要。比如你创建一个数组[1, 2, 3]它本身没有push方法但它的原型Array.prototype上有所以你可以调用push。Array.prototype的原型是Object.prototype所以数组也能调用toString、hasOwnProperty等方法。在实际开发中我们经常需要判断一个属性是对象自身的还是继承来的。hasOwnProperty方法可以判断属性是否在对象自身上。遍历对象时for...in会遍历所有可枚举属性包括继承来的所以通常要配合hasOwnProperty过滤。Object.keys只返回自身可枚举属性更常用。Object.getOwnPropertyNames返回自身所有属性包括不可枚举的。修改原型要特别小心。给Object.prototype添加方法会导致所有对象都能访问到这被称为“原型污染”是非常危险的操作。在团队协作中绝对不要修改内置对象的原型。如果确实需要扩展功能应该创建工具函数或者使用继承来创建自己的类型。4.3 this 的四种绑定规则与箭头函数的例外this是 JavaScript 里最容易让人困惑的关键字之一。它的值取决于函数被调用的方式而不是定义的位置。总共有四种绑定规则默认绑定、隐式绑定、显式绑定和new绑定。默认绑定就是直接调用函数非严格模式下this指向全局对象严格模式下是undefined。隐式绑定是作为对象的方法调用this指向那个对象。显式绑定是用call、apply或bind指定this。new绑定是在构造函数里this指向新创建的对象。优先级上new绑定高于显式绑定显式绑定高于隐式绑定隐式绑定高于默认绑定。箭头函数是例外它没有自己的this而是继承外层作用域的this并且一旦确定就不会改变call、apply、bind都无法影响它。实际项目里this的问题通常出现在回调函数和事件处理器中。比如在setTimeout的回调里用普通函数this会变成全局对象或undefined。解决办法是用箭头函数或者提前用bind绑定或者用const self this保存引用。我个人的习惯是在需要动态this的地方用普通函数在回调里用箭头函数这样代码意图最清晰。5. 异步编程从回调地狱到 async/await 的进化之路5.1 回调函数为什么会导致“地狱”JavaScript 是单线程语言所有代码都在一个线程上执行。为了避免耗时操作阻塞主线程JavaScript 采用了异步回调的模式。比如setTimeout、事件监听、网络请求都是通过回调函数来处理结果。回调本身没问题问题出在多个异步操作需要按顺序执行的时候。比如你先请求用户信息拿到用户 ID 后再请求订单列表拿到订单后再请求物流信息。如果用回调嵌套代码会变成一层套一层的“金字塔”可读性极差错误处理也很麻烦。这就是所谓的“回调地狱”。回调地狱的另一个问题是错误处理。每个回调里都要单独判断错误而且错误无法跨层级传播。如果某一层出错了后面的回调可能还会继续执行导致状态混乱。我在早期项目里维护过一段五层嵌套的回调代码每次改需求都要花大量时间理清执行顺序非常痛苦。5.2 Promise 如何解决信任问题Promise 的出现就是为了解决回调地狱和信任问题。一个 Promise 代表一个异步操作的最终完成或失败它有三种状态pending、fulfilled、rejected。状态一旦改变就不会再变这保证了异步操作的结果是确定的。Promise 的then方法返回一个新的 Promise所以可以链式调用。这样就把嵌套的回调变成了扁平的链式结构可读性大大提升。catch方法可以统一捕获链路上任何一环的错误finally方法则无论成功失败都会执行适合做清理工作。Promise 还提供了all、race、allSettled、any等静态方法用于处理多个异步操作的组合。Promise.all等待所有 Promise 成功返回结果数组如果有一个失败整体就失败。Promise.allSettled则不管成功失败都等待所有 Promise 结束返回每个的结果状态。Promise.race返回第一个结束的 Promise 的结果。这些方法在并发请求场景里非常实用。但 Promise 也不是银弹。链式调用虽然比回调好但写多了仍然会觉得繁琐尤其是需要根据前一个结果决定下一步操作的时候。而且then里的错误处理需要小心如果忘了返回 Promise链就会断掉错误也不会被捕获。5.3 async/await 的语法糖与实战注意事项async/await是基于 Promise 的语法糖它让异步代码看起来像同步代码可读性达到了新的高度。async函数总是返回一个 Promiseawait会暂停函数的执行等待 Promise 完成后再继续。用async/await写串行请求非常直观先await第一个请求拿到结果后再await第二个请求。错误处理用try/catch就可以了和同步代码一样。这让异步代码的编写体验有了质的飞跃。但有几个坑要注意。首先await只能在async函数里使用在普通函数或全局作用域里用会报错。其次多个独立的异步操作如果不需要按顺序执行不要写成串行的await那样会浪费时间。应该用Promise.all并发执行然后一起await。我见过有人把三个互不依赖的请求写成三个连续的await结果总耗时是三个请求之和改成Promise.all后耗时变成了最慢那个请求的时间。还有一个常见问题是await后面的 Promise 如果 reject 了没有try/catch的话会导致整个函数抛出异常。在循环里用await也要小心如果循环次数很多每次都要等上一个完成整体耗时会很长。这种场景可以考虑用for...of配合Promise.all来并发处理。6. DOM 操作与事件机制让页面真正“活”起来6.1 选择元素与修改内容的正确姿势DOM 操作是 JavaScript 在浏览器里最核心的用途之一。选择元素的方法有getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll等。其中querySelector和querySelectorAll接受 CSS 选择器灵活性最高现代开发中基本都用这两个。querySelector返回第一个匹配的元素querySelectorAll返回一个 NodeList。要注意 NodeList 不是数组虽然它有forEach方法但没有map、filter等方法。如果需要用数组方法可以用Array.from或者扩展运算符转换。修改元素内容有innerHTML、textContent、innerText等属性。innerHTML会解析 HTML 标签性能较好但存在 XSS 风险如果内容来自用户输入一定要做转义。textContent只处理文本不解析标签更安全。innerText会考虑样式比如隐藏元素不会返回内容性能比textContent差一些。我的习惯是纯文本用textContent需要插入 HTML 结构时用innerHTML但确保内容可信。修改样式可以通过style属性直接设置比如element.style.color red。但这种方式会把样式写在行内优先级很高不利于维护。更好的做法是通过切换 class 来改变样式用classList.add、classList.remove、classList.toggle来操作类名。这样样式定义在 CSS 文件里JavaScript 只负责逻辑职责分离更清晰。6.2 事件流、事件委托与常见事件类型DOM 事件流分为捕获阶段、目标阶段和冒泡阶段。默认情况下事件在冒泡阶段被处理。你可以用addEventListener的第三个参数设置为true来在捕获阶段处理。大多数时候我们用冒泡就够了。事件委托是利用冒泡机制的一个经典技巧。如果你有一个列表每个列表项都需要点击事件与其给每个项都绑定监听器不如给父元素绑定一个监听器然后通过event.target判断点击的是哪个子元素。这样做的好处是减少监听器数量提升性能而且动态添加的子元素也能自动获得事件处理。常见的事件类型包括鼠标事件click、mouseover、mouseout、键盘事件keydown、keyup、表单事件submit、change、input、触摸事件touchstart、touchmove、touchend等。移动端要注意触摸事件和鼠标事件的差异以及 300 毫秒点击延迟的问题。现代浏览器可以通过设置viewport的widthdevice-width来消除延迟或者使用touch-actionCSS 属性。事件对象event包含了很多有用信息。event.target是触发事件的元素event.currentTarget是绑定监听器的元素。event.preventDefault()阻止默认行为比如阻止链接跳转或表单提交。event.stopPropagation()阻止事件继续传播但慎用因为它可能影响其他依赖冒泡的逻辑。6.3 动态创建与移除元素的性能考量动态创建元素可以用document.createElement设置好属性后用appendChild或insertBefore插入到文档中。频繁操作 DOM 会导致页面重排和重绘影响性能。一个优化技巧是使用文档片段DocumentFragment先在片段上添加所有新元素最后一次性插入文档这样只触发一次重排。移除元素用removeChild或现代的element.remove()。移除元素时要注意解绑事件监听器否则可能造成内存泄漏。虽然现代浏览器在元素被移除后会自动回收相关的事件监听器但如果监听器里引用了外部变量形成闭包垃圾回收可能不会立即生效。手动移除监听器是更稳妥的做法。批量修改样式时避免在循环里逐个修改style属性。可以先隐藏元素display: none做完所有修改后再显示出来这样只触发两次重排。或者使用cssText一次性设置多个样式。读取布局属性如offsetWidth、offsetHeight会强制浏览器立即计算布局如果在循环里反复读取和写入会导致“布局抖动”性能急剧下降。应该先批量读取再批量写入。7. 模块化与工程化从脚本拼接到可维护的代码组织7.1 为什么需要模块化早期的 JavaScript 没有模块系统所有代码都写在全局作用域里靠script标签按顺序加载。这种方式在小型项目里还能应付但项目一大问题就来了变量命名冲突、依赖关系不清晰、加载顺序难以维护、代码复用困难。模块化的核心思想是把代码拆分成独立的单元每个单元有自己的作用域只暴露必要的接口给外部使用。这样不同模块之间不会互相干扰依赖关系也一目了然。模块化还便于单元测试因为你可以单独测试每个模块的功能。7.2 CommonJS、AMD、ES Module 的演进与选择CommonJS 是 Node.js 采用的模块规范用require导入module.exports导出。它的特点是同步加载适合服务端环境。在浏览器端同步加载会导致阻塞所以出现了 AMD 规范用define和require异步加载模块。AMD 在早期前端项目里流行过一阵但写法比较繁琐。ES Module 是 ECMAScript 官方模块规范用import导入export导出。它是静态分析的编译时就能确定依赖关系支持 tree-shaking可以剔除未使用的代码。现代前端项目基本都采用 ES Module构建工具如 Webpack、Rollup、Vite 都原生支持。ES Module 的导入导出有多种形式。默认导出export default每个模块只能有一个导入时名字可以自定义。命名导出export const可以有多个导入时需要用花括号且名字必须匹配。也可以混合使用。要注意的是ES Module 的导入是只读的不能修改导入的变量。如果导入的是一个对象可以修改对象的属性但不能重新赋值整个变量。7.3 模块打包工具解决了什么问题虽然现代浏览器已经支持 ES Module但在生产环境里我们通常还是需要用打包工具。原因有几个浏览器对模块的请求是多次的每个import都会发起一个网络请求模块多了性能会很差打包工具可以把多个模块合并成一个文件减少请求次数。打包工具还能处理非 JavaScript 资源比如 CSS、图片、字体等把它们也纳入依赖图。此外打包工具支持代码分割、懒加载、压缩混淆、环境变量替换等高级功能。选择打包工具时Webpack 功能最全生态最丰富但配置复杂。Vite 利用浏览器原生 ES Module 和 esbuild 预构建开发时启动极快生产环境用 Rollup 打包近年来非常流行。Rollup 更适合打包库生成的代码更干净。Parcel 主打零配置适合快速原型开发。我的建议是新项目优先考虑 Vite库开发用 Rollup老项目维护继续用 Webpack。不管用哪个工具理解模块化的本质比掌握工具配置更重要。工具会更新换代但“高内聚、低耦合”的模块设计原则是不变的。把相关的功能放在同一个模块里模块之间通过清晰的接口通信避免循环依赖这些才是写出可维护代码的关键。8. 调试与性能优化让代码不仅跑得通还要跑得快8.1 浏览器开发者工具的高效使用技巧Chrome DevTools 是前端开发最重要的调试工具。Sources 面板可以设置断点、单步执行、查看调用栈和作用域变量。我常用的一个技巧是条件断点右键点击行号选择“Add conditional breakpoint”输入条件表达式只有条件为真时才会暂停。这在循环里调试特定迭代非常有用。Console 面板不只是console.log。console.table可以把数组或对象以表格形式展示console.time和console.timeEnd可以测量代码执行时间console.trace可以打印调用栈。console.group和console.groupEnd可以把日志分组让输出更清晰。Performance 面板可以录制页面运行时的性能数据分析哪些函数耗时最长、哪些操作触发了重排重绘。Network 面板可以查看所有网络请求的详细信息包括请求头、响应头、耗时分解。Application 面板可以查看和操作 localStorage、sessionStorage、Cookie、IndexedDB 等存储。8.2 常见性能瓶颈与优化手段JavaScript 性能问题通常来自几个方面频繁的 DOM 操作、过大的循环、递归没有终止条件、内存泄漏、不必要的计算。优化手段包括减少 DOM 访问次数把需要多次访问的元素缓存到变量里使用事件委托减少监听器数量用requestAnimationFrame替代setTimeout做动画用防抖和节流控制高频事件的触发频率。防抖是等事件停止触发一段时间后才执行适合搜索框输入联想。节流是每隔一段时间执行一次适合滚动加载。实现防抖可以用setTimeout加clearTimeout实现节流可以用时间戳或定时器。Lodash 库提供了现成的debounce和throttle函数但理解原理自己实现也不难。内存泄漏是单页应用里比较隐蔽的问题。常见原因包括全局变量意外创建、未清理的定时器、未解绑的事件监听器、闭包引用未释放、DOM 元素移除后仍被 JavaScript 引用。用 DevTools 的 Memory 面板可以拍摄堆快照对比不同时间点的对象数量找出泄漏的对象。8.3 代码分割与懒加载的实战策略现代前端应用体积越来越大一次性加载所有代码会导致首屏时间过长。代码分割是把代码拆分成多个小块按需加载。Webpack 和 Vite 都支持动态import()语法返回一个 Promise加载完成后执行回调。路由级别的代码分割是最常见的做法每个路由对应一个 chunk用户访问哪个路由就加载哪个 chunk。组件级别的分割适合体积较大的组件比如富文本编辑器、图表库只在需要时才加载。第三方库也可以分割把不常变的库单独打包利用浏览器缓存。懒加载图片可以用loadinglazy属性浏览器原生支持。对于背景图片或更复杂的场景可以用 Intersection Observer API 监听元素是否进入视口进入时再加载。这个 API 也可以用来实现无限滚动比监听scroll事件性能更好。9. 写在最后我这些年攒下的一些实在经验学 JavaScript 最怕的就是“只看不练”。我见过太多人收藏了几十个教程每个都看了开头几章但从来没有完整地做过一个项目。真正让你进步的是你亲手写过一个待办清单、一个天气查询页面、一个简单的博客系统哪怕它们很粗糙。在写的过程中你会遇到各种问题为什么这个变量拿不到为什么这个请求返回的顺序不对为什么点击事件绑不上每一个问题的解决都会让你对语言的理解更深一层。另一个经验是不要害怕读别人的代码。GitHub 上有很多优秀的开源项目挑一个你感兴趣的小型项目把源码 clone 下来从入口文件开始读遇到不懂的 API 就去查文档。读代码能让你看到真实项目里是怎么组织模块、怎么处理错误、怎么做性能优化的这些是教程里很难学到的。最后保持好奇心但也要有耐心。JavaScript 生态变化很快新框架、新工具层出不穷但语言核心的东西变化并不大。把变量、函数、对象、异步、DOM 这些基础打牢学任何新框架都会很快上手。反过来如果基础不扎实学再多框架也只是停留在“会用”的层面遇到复杂问题还是束手无策。我在实际项目里最深的体会就是那些看似“过时”的基础知识往往才是解决棘手问题的关键。
