半张老头开头：
“JavaScript 到底值不值得学？”这个问题几乎每隔几天就会出现在我的时间线里。我入行前也纠结过同样的事，后来用 JavaScript 写了浏览器插件、可视化面板、小程序后台、甚至一整年都在维护一个面向几十万用户的管理系统，才真正意识到：它已经不只是网页上的“特效语言”，而是离用户最近的一门通用工具。如果你正在犹豫 python 和 JavaScript 先学哪个，我的答案一直是：先动手做，哪个能最快让看到的成果变成可点击、可交互的东西，就选哪个。在这个维度上，JavaScript 几乎没有对手。
这篇学习笔记更像是我自己几年 JS 踩坑路上的“归档文件”，不按教科书顺序整理，只挑那些容易让新手卡住、让半路转行的人反复纠结的知识点。我会从语言本身、运行环境、报错排查、工程化工具、再到一个能跑起来的游戏案例，按我实际接触这些内容的先后顺序写下来。结构上尽量让每一节都能独立阅读，后面几节的示例代码也可以直接复制到本地跑。看完至少能让你少走几个弯路，特别是那些“明明照着文档写了，为什么还是报错”的鬼问题。
1. 先回答那个经典问题：JavaScript 是不是值得投入
1.1 从一张“必须学”的清单说起
我见过很多刚接触编程的人在论坛里列过类似的学习清单：python 能做数据分析、能搞人工智能，C 语言能打竞赛、啃底层，Java 在企业后端一统天下……然后问 JavaScript 学完能做什么。实际上把浏览器打开，地址栏旁边那个“查看网页源代码”按钮背后几乎全是 JavaScript 的天下。只要你想让自己的页面有交互、让按钮点击后有反应、让表单有校验，JavaScript 就是你绕不开的一道门。
从学习回报率看，JavaScript 有两点优势是其他语言较难替代的：一是执行环境随处可得，你不需要安装一套复杂的编译工具就能开始实验；二是它跟你的屏幕天然走得近，写两行代码立刻能看到视觉反馈。别小看这个反馈速度，它对新手保持耐心至关重要。我当年学 Python 做了几十道计算题，结果觉得枯燥，反而是 JS 写了个“点击更换页面背景色”的小功能后兴奋了一晚上。
既然方向值得投入，那接下来的核心问题是：学到什么程度才不算白学？我个人的标准是三层。第一层是能看懂别人的代码，并且知道变量、函数、对象这些概念大概是干嘛的；第二层是能在实际项目中完成需求，比如通过接口取数据并把内容渲染到页面；第三层是能排查问题，遇到报错、遇到数据回显不一致时能通过自己的思路定位修复。很多教程只会带你到第一层，而这篇笔记想帮你走到第二层和第三层中间的位置。
1.2 学习路径怎么安排
我比较推荐的路径不是一上来就啃《JavaScript 高级程序设计》这种大部头，而是先用大概两三周时间把基础语法、函数、数组方法、对象操作、DOM 事件过一遍，然后直接扎进一个小项目里。项目不需要大，哪怕是一个待办清单、一个随机抽奖器都可以。关键是你会在这个过程中遇到真实的坑，比如异步数据还没回来就渲染了、事件绑定没生效、作用域引用错误等等。这些才是学习价值最大的部分。
等到基础项目能顺畅写出来，再回头去补充原理层面的东西。比如原型链、this 指向、事件循环。这些都是面试高频考点，但更重要的是它们会影响你排查深层次 bug 的能力。我遇到过不少人，用框架写页面很熟练，一遇到“为什么这个值打印出来是 undefined”就不知道怎么下手，原因就是基础概念不够牢固。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 从“半路程序员”到“语言思维”：基础语法的三个关键拐点
2.1 箭头函数不是简单的写法缩写
很多新手学 ES6 时都会觉得箭头函数只是把 function 换成 => 的“偷懒写法”。如果只是这样理解，后面大概率会在 this 上栽个大跟头。普通函数的 this 取决于“调用时”的执行上下文，而箭头函数没有自己的 this，它会捕获定义时所在作用域的 this。
举一个真实例子。假设你给页面上几个按钮绑定点击事件，希望在回调里访问到某个对象的方法：
javascript复制const user = {
name: '张三',
greet: function () {
setTimeout(function () {
console.log(`你好，${this.name}`)
}, 1000)
}
}
user.greet()
这段代码最终输出的是“你好，undefined”，原因就是 setTimeout 里的回调函数在执行时，this 指向了全局对象。但如果你把内部回调改成箭头函数：
javascript复制const user = {
name: '张三',
greet: function () {
setTimeout(() => {
console.log(`你好，${this.name}`)
}, 1000)
}
}
user.greet()
输出就正常了。因为箭头函数没有自己的 this，它继承了 greet 方法里的 this，也就是 user 对象本身。所以遇到 this 不确定的场景，优先使用箭头函数而不是写 function 再 bind，这在日常开发中节省了我很多心智负担。
2.2 javascript:void(0) 和常见占位写法的坑
在搜索引擎热词里，javascript:void(0) 一直被搜，说明很多初学者在网页代码里见过这个写法，却不清楚它到底干了什么。简单说，javascript: 是一种伪协议，可以让浏览器把后续表达式当作 JavaScript 执行，void(0) 则表示执行一个返回 undefined 的表达式。组合在一起的效果就是：让 a 标签的点击行为不产生页面跳转、也不改变当前地址。
你可能会在旧的网页模板里看到 <a href="javascript:void(0)" onclick="...">，用来实现“点击执行某段交互但不刷新页面”的效果。现在其实有更干净的做法：用 button 元素承担交互功能，或直接用 JavaScript 阻止事件的默认行为：
javascript复制document.querySelector('a').addEventListener('click', function (event) {
event.preventDefault()
// 这里写你自己的逻辑
})
如果我接手的是老项目，看到大量 javascript:void(0)，我不会马上把它们全部替换成 preventDefault 方案，因为改动面太大会引入回归风险。通常的做法是保留 href 占位，但保证点击逻辑都绑定在 onclick 或 addEventListener 中。对于新手来说，理解它的原理就够了，不必在自己的新代码里刻意使用。
2.3 环境配置和“第一个能跑的项目”
之所以把环境配置单独拿出来说，是因为我见过太多人卡在这一步，还没开始写代码就被各种工具链吓跑了。其实做纯 JavaScript 练习只需要两个东西：一个现代浏览器，一个文本编辑器。新建一个 html 文件，在 script 标签里面写代码，双击打开就能运行。
code复制项目结构：
learn-js/
├── index.html
└── app.js
html复制<!-- index.html 的基础结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 入门练习</title>
</head>
<body>
<h1 id="title">Hello</h1>
<button id="btn">点我</button>
<script src="./app.js"></script>
</body>
</html>
javascript复制// app.js
const button = document.getElementById('btn')
const title = document.getElementById('title')
button.addEventListener('click', function () {
title.textContent = '你点击了按钮'
})
真正需要配置 node、npm、vue、vite 这些工具，是你做到比较复杂的项目、需要模块化开发和构建部署之后才要考虑的。如果你用的是 macOS，通常系统会自带 node 但版本可能比较老，建议去官网下载 LTS 版本并保证 node -v 能输出版本号。Windows 上则要留意环境变量是否配置好，安装包一般会自动处理。不管哪个平台，只要能运行 node -v 和 npm -v，环境就算通了一半。
3. 浏览器、事件、运行时错误：把这些“报错”变成老师
3.1 浏览器怎么看待你的 JavaScript
JavaScript 和浏览器之间的关系可以类比成电影导演和片场。浏览器负责搭建舞台，提供文档对象模型 DOM、事件机制、定时器、网络请求等基础设施，JavaScript 则是那个在舞台上指挥灯光和音效的导演。你写的每一行代码都是在告诉浏览器“某时某刻、在某个元素身上、执行某件事”。
新手容易忽略的一点是，HTML、CSS 和 JavaScript 都有各自独立的解析流程。浏览器从上往下读取 HTML，遇到 script 标签会暂停渲染，先下载并执行 JavaScript，执行完再继续解析后续 HTML。这也是为什么以前很多人建议把 script 标签放到 body 末尾，目的就是避免脚本在 DOM 结构还没解析完时运行，导致 getElementById 找不到元素。现在可以用 defer 属性来缓解这个顺序问题，因为带 defer 的脚本会在文档解析完之后、DOMContentLoaded 事件之前执行。
3.2 我印象最深的几次运行时错误
报错并不可怕，可怕的是看不懂报错。JavaScript 的运行时错误里，我遇到频率最高的几种是这个样子。
最常见的是 ReferenceError: xxx is not defined。这个错误通常说明你使用了一个没有声明的变量。出现的原因往往不是名字写错，而是作用域问题：变量定义在函数内部，你在外部访问了；或者代码执行顺序不对，变量还没初始化就被读取了。
还有一项是 TypeError: Cannot read property 'xxx' of null。这个经常出现在你尝试读取 null 或 undefined 的属性时。比如从接口拿到一个对象，而对象某个字段并不存在，你直接 obj.data.list 就会爆出这个错。稳妥的做法是层层判空，或者用可选链：
javascript复制const list = response?.data?.list ?? []
另外两个高频问题是 undefined is not a function 和 Uncaught (in promise) Error。前者说明你调用了一个并不是函数的值，比如从对象里取方法时拼错了字段名；后者往往是异步请求失败但没有捕获，会在控制台显示一个红色报错。
我把日常报错的排查顺序固定成这样的套路：先看报错信息的第一行，定位到具体文件和行号；再回头看代码，确认是不是变量名写错、作用域不对、数据没回来；最后再考虑是不是 API 本身变了或环境不支持。按这个顺序排查，大部分问题都能在几分钟内解决。
3.3 Chrome 允许 apple 事件中的 JavaScript：浏览器限制问题的反思
热词里“chrome 允许 apple 事件中的 javascript”让我想到一个容易混淆的概念。苹果生态里，很多应用可以通过 AppleScript 或者 URL Scheme 与浏览器交互，浏览器本身也可能作为一种自动化入口暴露给外部调用。但在 JavaScript 开发里，你遇到“浏览器没有执行某些 JS”的问题，更常见的原因是浏览器安全策略，而不是外部调用被禁止。
举例来说，你直接双击打开本地 HTML 文件，然后在里面用 fetch 请求另一个本地文件的数据，浏览器通常会因为 CORS 策略拦下请求。控制台报错里会出现 blocked by CORS policy，这就是浏览器不给本地文件互相读取权限。开发小工具时我经常被这个坑烦到。解决方案是起一个本地静态服务器，而不是直接用 file:// 协议打开。python 环境里一行 python3 -m http.server 8080 就能搞定；安装了 node 的话也可以使用 npx serve 之类的工具。在这个场景下，写代码的“脚本语言”到底是什么其实不重要，重要的是你需要一个符合浏览器策略的环境。
4. fetch API：从回调到异步的思维升级
4.1 为什么回调函数不够用了
早些年写网络请求，主流方式是 XMLHttpRequest，配合回调函数处理返回值。逻辑简单时问题不大，但如果要连续请求多个接口，每个接口依赖前一个的结果，就会出现“回调地狱”：代码一层层嵌套，读起来困难，排错更痛苦。
javascript复制// 想象中的“回调地狱”结构
request('/api/user', function (user) {
request(`/api/order?uid=${user.id}`, function (order) {
request(`/api/detail?oid=${order.id}`, function (detail) {
console.log(detail)
})
})
})
fetch API 的引入从语法上缓解了这个问题。它返回一个 Promise 对象，让你可以用 then 链来编写连续请求，也可以用 async/await 把异步代码写得像同步代码一样直白。这套能力是现代 JavaScript 开发中非常重要的一个分水岭，很多人说“学完基础语法后应该学 fetch”，就是这个原因。
4.2 fetch 的“各种语法”我到底该用哪一种
fetch 的基本用法很简单：
javascript复制fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
但实际项目中会遇到很多细节问题。第一个坑是 fetch 只有在网络错误时才会 reject，如果接口返回了 404 或 500，fetch 并不会自动抛出异常，而是正常 resolve 一个响应对象，需要通过 response.ok 来判断。很多人第一次踩这个坑都会疑惑：明明状态码不对，为什么没走 catch？
第二个坑是响应内容格式。很多新手以为所有接口都返回 JSON，但实际上服务端有时会返回文本、二进制、甚至空的响应体。直接调用 response.json() 会报错。稳妥做法是先看 response 的 Content-Type 或使用 response.text() 做兼容，再按需解析。
第三个容易搞混的语法问题是 query 参数拼接。GET 请求需要携带列表接口的分页条件时，可以用 URLSearchParams 来组装：
javascript复制const params = new URLSearchParams({
page: 1,
pageSize: 20,
keyword: 'javascript'
})
fetch(`/api/list?${params.toString()}`)
.then(response => response.json())
.then(data => console.log(data))
4.3 async/await 之后，能不能别再套 try/catch
async/await 语法确实让异步代码更接近同步写法，不少人上手之后就不太想回到 then 链。但随之而来的问题是：await 语句出错时如果没有 try/catch，Promise 的 rejection 会变成未处理的错误，控制台会显示很糟糕的报错。
一个真实项目里，我维护过一个函数，需要登录、拉用户信息、再拉用户权限列表，三个接口环环相扣。用 async/await 时我喜欢把这几个请求拆成独立的小函数，每个小函数内部自己处理错误并向上抛出规范错误码，主流程再统一用 try/catch 兜底。
javascript复制async function fetchUserProfile() {
try {
const loginRes = await login()
const userInfo = await getUserInfo(loginRes.token)
const permissionList = await getPermissionList(userInfo.uid)
return { userInfo, permissionList }
} catch (error) {
console.error('获取用户信息失败', error)
// 根据 error.message 做提示或跳转登录
}
}
如果你实在不想每一次都写 try/catch，可以做一个简单的包装函数，把错误统一交给上层处理。但要记住，异常处理从来不是为了代码好看，而是为了出问题时你能快速定位是哪个环节失败了。
5. Vue + Element Plus：组件库自动导入和 el-message 未定义实战
5.1 从原生到框架，其实都是 DOM 游戏
学完原生的 JavaScript 之后，你会接触到当前前端工程里最重要的框架生态。Vue 和 React 是两条大头，如果以中文资料和上手门槛来说，Vue 对初学者比较友好。我自己的第一个工程化项目就是 Vue 2 + Element UI，后来升级到 Vue 3 + Element Plus，迁移过程踩了不少自动导入相关的坑。
框架并没有让 JavaScript 消失，只是把很多重复的 DOM 操作封装起来。你在模板里写 v-for、v-if，本质上就是在声明式地告诉 Vue：根据数据状态渲染哪些节点。写事件处理、写生命周期函数、写 watch 监听数据变化，这些所有能力都来自 JavaScript 语法和浏览器 API 的组合。
5.2 Element Plus 自动导入的完整配置
Element Plus 是一套基于 Vue 3 的组件库，最常见的使用方式有三种。一种是全量导入，简单粗暴，但打包体积大；另一种是手动按需导入，需要用到什么组件就自己 import；还有一种是自动按需导入，借助 unplugin-vue-components 和 unplugin-auto-import 两个插件，让 Vite 在编译时帮你完成导入。
很多初学者喜欢自动导入方案，因为它省去了手动 import 的繁琐。但在配置过程中常常会出现问题，比如代码写完组件库样式不对、或者一使用 ElMessage 就报 is not defined。这些坑不能怪组件库，大多数时候是插件配置没有配对。
以 Vite 项目为例，一份完整的配置是这样的：
javascript复制// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
配置完后，在 template 里直接使用 <el-button> 这类组件一般没问题，因为它们能被 unplugin-vue-components 识别并自动导入。但如果你想在 JavaScript 代码里调用 ElMessage、ElMessageBox、ElNotification 这类函数式组件，就需要注意它们是由 AutoImport 插件解析的。你依然需要显式地 import 才能确保正常使用。
5.3 为什么 el-message 还是提示未定义
热词里“为什么 elmessage 还是提示未定义”绝对是我见过最经典的新手问题。其实我也在第一个 Vue 项目里被这个问题困扰过一阵子。归根结底，原因只有几种：第一种是没有配置 AutoImport 插件，只配置了 Components 插件；第二种是配置了，但只在某个组件里手动写了 import { ElMessage } from 'element-plus'，而项目没有导入 Element Plus 的样式；第三种是函数的调用时机在组件库完全挂载之前，不过这不太常见。
最常见的还是第一种。你需要明白 Components 插件和 AutoImport 插件负责的导入目标不一样。AutoImport 中配置 ElementPlusResolver，不是为了导入 UI 组件，而是为了能自动导入像 ElMessage 这样的 API。有人会问：那为什么我用 el-button 不报错，用 ElMessage 报错？因为 el-button 在 template 里出现时，能被 unplugin-vue-components 扫描到并自动注册，而 ElMessage 是在 js 代码里直接调用的隐式 API，没有经过编译器的“看见”对象，只能靠 AutoImport 在模块顶层自动注入 import。
如果你的确需要在某个文件里手动调用 ElMessage，最保险的做法是在文件顶部显式引入：
javascript复制import { ElMessage } from 'element-plus'
同时要确认样式文件有没有被一起处理。全量引入样式可以在 main.js 里 import 'element-plus/dist/index.css'，按需引入时则建议用 unplugin-element-plus 插件或者在 resolver 里配置导入样式。这个环节很琐碎，但属于那种配置一次就一劳永逸的事情，值得仔细折腾。
6. HTML5 + JavaScript 小游戏：用最简单的实战把知识点串起来
6.1 为什么建议做一个游戏案例
有人学 JavaScript 很久，语法背得滚瓜烂熟，可是真要独立实现一个小功能时脑子一片空白。我的处方是建议去做一个简单的网页游戏。游戏天然包含输入、状态更新、渲染反馈、结束条件这几大要素，非常像一个微型前端应用。
热词里提到的“用 html5 + javascript 编写简易网页游戏”背后反映的正是这种需求。我不建议大家一上来就做复杂的三维游戏或者物理引擎类项目，那需要大量数学和图形学知识。做一个纯 DOM 或者 Canvas 2D 的小游戏，例如记忆翻牌、躲避障碍、点击计分这类，投入只要一个周末，收获却会覆盖 DOM 操作、事件处理、定时器或动画帧、数组操作、随机数、逻辑判断等整套常用技能。
6.2 一个简易游戏的基本骨架
我拿一个“抓老鼠”的简化版来做例子。游戏区域是一块画布，每隔一段时间会随机位置出现一只“老鼠”，玩家需要在它消失之前点击到它，分数加一。
HTML 部分很简单：
html复制<div id="game-container">
<canvas id="gameCanvas" width="600" height="400"></canvas>
<div id="score">0</div>
</div>
JavaScript 部分我建议分几个模块写，不要塞在一个大函数里。一个函数负责初始化状态，一个负责生成老鼠的数据结构，一个负责绘制，一个负责监听点击，还有一个负责更新分数。
javascript复制const canvas = document.getElementById('gameCanvas')
const ctx = canvas.getContext('2d')
const scoreEl = document.getElementById('score')
let score = 0
let mouse = null
function randomPosition() {
const x = Math.random() * (canvas.width - 40)
const y = Math.random() * (canvas.height - 40)
return { x, y }
}
function spawnMouse() {
const pos = randomPosition()
mouse = { x: pos.x, y: pos.y, size: 30, alive: true }
ctx.fillStyle = '#8B4513'
ctx.beginPath()
ctx.arc(mouse.x, mouse.y, mouse.size, 0, Math.PI * 2)
ctx.fill()
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
function tick() {
clearCanvas()
if (Math.random() < 0.01) {
// 低概率在新位置生成老鼠
}
window.requestAnimationFrame(tick)
}
function handleCanvasClick(event) {
const rect = canvas.getBoundingClientRect()
const clickX = event.clientX - rect.left
const clickY = event.clientY - rect.top
if (mouse) {
const dx = clickX - mouse.x
const dy = clickY - mouse.y
const dist = Math.sqrt(dx * dx + dy * dy)
if (dist < mouse.size) {
score += 1
scoreEl.textContent = score
mouse = null
clearCanvas()
}
}
}
canvas.addEventListener('click', handleCanvasClick)
这里我没有把所有细节做完，但骨架已经出来了。你可以不断地扩展它：加上倒计时，加上不同难度级别的速度，加上音效。每一次扩展都是在练习真实项目中“基于需求拆解并实现”的能力。
6.3 用 requestAnimationFrame 优化主循环
很多人玩网页游戏时会想用 setInterval 来做定时刷新，但其实更推荐 requestAnimationFrame。它的执行频率与浏览器屏幕刷新率对齐，通常是 60 次每秒，而且当页面切到后台时会自动暂停，节省 CPU 资源。
我之前写过一个简易的“接苹果”小游戏，第一版用 setInterval(更新, 1000/60) 控制游戏循环，笔记本风扇转得厉害。后面换成了 requestAnimationFrame，明显感觉耗电变低了。核心代码其实非常简单：
javascript复制function gameLoop() {
// 更新游戏逻辑
// 绘制画布
requestAnimationFrame(gameLoop)
}
requestAnimationFrame(gameLoop)
要注意的是 requestAnimationFrame 的回调会在每帧执行一次，函数内部不要做太过复杂的计算，否则会出现掉帧卡顿。你需要控制元素本身的位置变化量乘以一个速度系数，而不是每帧都去解析大量文本或访问性能较差的 DOM 属性。
7. 常见问题与排查技巧实录
7.1 js 文件加载但没效果的排查顺序
刚接触 JavaScript 的人最常问的一句话是：“我明明写了 js，为什么页面没反应？”我建议按照固定顺序排查，不要乱猜。第一步打开浏览器控制台，看有没有红色报错信息。如果控制台没有任何输出，大概率是 JS 文件没有被加载，检查 script 标签的 src 路径是否正确。如果控制台报错且指向某一行的语法错误或变量未定义，对照错误所在文件和行数去审查代码。第二步是在代码关键位置插入 console.log，验证逻辑有没有被触发。比如点击事件没有反应，先打印绑定事件后是否注册成功。
调试时我最爱用的一个技巧是在关键函数开头打印入参：
javascript复制function handleData(data) {
console.log('handleData 收到数据', data)
// ...
}
如果函数确实被调用，但你发现数据结构与预期不符，就能快速定位问题在数据源而不是逻辑上。排查完这些问题后，再检查是否为浏览器缓存导致旧文件没有更新。按 F12 打开开发者工具后，在 Network 面板勾选 Disable cache，再配合强制刷新，往往能解决“改代码没生效”的迷糊问题。
7.2 给 JavaScript 初学者的几个使用场景建议
很多初学者学会语法后不知道能做什么。我根据自己的实际经验，列出几个上手最快而且成就感很强的应用场景，每个都适合用来消化知识点。
- 做浏览器插件：浏览器扩展本质上就是一段由 HTML、CSS、JavaScript 组成的网页，能读取当前页面 DOM、修改页面样式、向指定接口发送请求。因为生态成熟、文档完整，很多程序员用三到五天就能写完第一个小插件。
- 做爬虫脚本和数据处理：用 Node.js 环境跑 JavaScript，配合 axios、cheerio 等第三方库，可以抓取网页内容并解析出结构化数据。虽然这只是开发技能的一部分，却能非常直观地锻炼异步请求和数组处理能力。
- 做个人网站和管理后台：这种场景场景足够长，能覆盖你从“写静态页面”到“调用后端 API”再到“部署上线”的完整链路。
- 做自动化测试脚本：Puppeteer 或 Playwright 都可以通过 JavaScript 控制浏览器行为，例如自动填写表单、模拟点击、截图对比。这类项目对真实工作中做回归验证非常有帮助。
7.3 我最近才想明白的一些 JavaScript 理念
写了几年 JavaScript 之后，我觉得真正让一个人成长的不是记 API，而是理念上的更新。比如后来我才彻底理解为什么很多前端代码规范强调“不要直接修改 props”“不要在渲染函数里写复杂逻辑”“变量要尽早 const 化”。这些规范听起来像框架要求，其实都是 JavaScript 语言特性在真实项目里的自然映射。
另一个改变是更愿意把代码拆成小函数。刚开始写代码时总喜欢把一个需求的所有逻辑塞在一个大函数里，方便是方便，但一个月后回头维护时往往要想半天才理清思路。现在我会刻意让每个函数只做一件事，函数名写清楚它做什么，参数越少越好，内部实现尽量短。这样做之后，单元测试也更容易写了，后续加需求也不是那么战战兢兢。
最后一个想分享的观点是：JavaScript 的“坑”很少是设计问题，更多时候是因为你还没理解它在特定场景下的行为规则。我碰到过的很多诡异 bug，查到最后发现都是对异步、作用域和引用类型理解得不够透。建议新手遇到问题不要只急着复制补丁解法，多花十分钟查一下为什么会出现这种表现，这个“多花的时间”往往会在下次调试时成倍补偿回来。
我个人在实际学习中的体会是，把 JavaScript 当作工具还是当作思考方式，决定了你最后能达到的高度。工具关注的是“怎么让它跑起来”，时间久了容易停留在复制粘贴的层面；思考方式关注的是“为什么这么写、有没有更好的表达”，时间久了你会发现自己拿到需求后，脑子里的第一反应不再是某段现成代码，而是一套结构化的拆解逻辑。这篇文章里记录的内容只是我入行到现在的一小部分存档，还有很多细节需要在具体项目里慢慢体会。如果你正在新学的路上，不妨把文中的示例代码都动手敲一遍，尤其是那个游戏骨架，扩展出你自己版本的玩法。折腾几次之后，你一定会明显感觉到自己离“能用 JavaScript 做事情”更近了一步。