JavaScript是网页的执行引擎而非装饰品；document.getElementById在DOM加载前返回null因执行时机过早；fetch适合现代项目但需手动处理错误和cookie，XMLHttpRequest适合需进度监听或兼容老环境的场景；箭头函数因无独立this不能直接作Vue/React事件处理器。
JavaScript 不是网页的“装饰品”，它是让页面真正活起来的执行引擎——没有它，表单不能实时验证、按钮点击没反应、数据无法异步加载，连一个下拉菜单都得刷新整页才能展开。
为什么 document.getElementById 在 DOM 加载前会返回 null
这是新手最常踩的坑：脚本在 HTML 元素还没解析完时就执行了，document.getElementById 找不到目标节点。不是函数写错了，是执行时机错了。
- 把
<script>标签移到</body>之前（最简单可靠） - 或用
DOMContentLoaded事件包裹初始化逻辑：document.addEventListener('DOMContentLoaded', () => { /* 初始化代码 */ }); - 避免依赖
window.onload，它等所有资源（含图片）加载完才触发，延迟明显
fetch 和 XMLHttpRequest 的实际选择依据
不是“新一定比旧好”，而是看场景是否需要细粒度控制或兼容老环境。
-
fetch更简洁，原生支持 Promise，适合现代项目；但默认不带 cookie，需显式加credentials: 'include' -
XMLHttpRequest能监听上传进度、可中止请求、兼容 IE10+，适合大文件上传或需要 abort 的交互 - 注意：
fetch成功响应（如 404、500）不会进catch，必须手动检查response.ok
为什么箭头函数 () => {} 不能用作 Vue 或 React 的事件处理器（当需要 this 时）
箭头函数没有自己的 this，它继承外层作用域的绑定。在组件方法中直接写箭头函数，this 指向的是定义时的上下文（通常是全局或模块作用域），而非组件实例。
立即学习“Java免费学习笔记（深入）”；
- Vue 选项 API 中，事件方法应写成普通函数：
methods: { handleClick() { console.log(this.msg); } } - React 类组件同理，避免
onClick={() => this.handleClick()}这种内联写法（每次渲染新建函数，影响子组件shouldComponentUpdate判断） - 若要用箭头函数，应提前在 class 中定义为属性：
handleClick = () => { console.log(this.state.value); };
JavaScript 的复杂性不在语法本身，而在于它运行的环境太“活”：DOM 状态、异步时序、this 绑定、模块加载顺序、跨浏览器差异……任何一个环节松动，都会让看似正确的代码在某个时刻突然失效。
