JavaScript 开发中常见的 4 个陷阱与避坑指南

基本语法与语言特性误区

在使用 JavaScript 时，首先需要理解其基础语法约束，这往往是最容易被忽视的基础问题。

第1步：确认标识符的大小写敏感性

目的：避免因命名错误导致 ReferenceError 或逻辑失效。
动作：JavaScript 是严格区分大小写的语言。变量名、函数名、关键字（如 function, var）均需严格匹配大小写。
注意：HTML/XHTML 标签通常不区分大小写，但 JS 引擎处理时始终区分。例如 getElementById 必须全小写，写成 GetElementById 会报错。

第2步：处理字符串引号规范

目的：保持代码风格一致并符合 Web 标准。
动作：单引号 (') 和双引号 (") 在 JS 中功能完全等价。但在混合 HTML 输出时，建议优先使用单引号包裹 JS 字符串，双引号包裹 HTML 属性值，以符合 XHTML 规范并减少转义复杂度。
参数：无明显参数，主要是编码习惯问题。

第3步：理解无函数重载机制

目的：防止因参数数量不同而意外覆盖函数定义。
动作：JavaScript 不支持传统意义上的方法重载。如果定义了多个同名函数，后定义的函数将覆盖先前的定义。执行时，JS 不会根据参数类型或数量选择函数，而是直接使用作用域链中最后定义的那个版本。
完成状态：意识到应使用参数默认值、arguments 对象或 if-else 类型判断来处理不同参数组合，而非依赖重载。

闭包与作用域链陷阱

闭包是 JavaScript 的核心特性，但也最容易引发难以调试的 Bug，特别是在事件处理和循环中。

第4步：规避闭包中的变量捕获滞后问题

目的：解决在循环中为元素绑定事件时，回调函数获取到错误索引值的问题。
入口：使用 for 循环批量注册 DOM 事件监听器。
动作：以下代码展示了典型的错误场景及修正方法。

// 错误示范：单击每个按钮都显示相同的 i 值（通常为循环结束后的值）
function initAnchors() {
    for (var i = 1; i <= 3; i++) {
        var anchor = document.getElementById('anchor' + i);
        // attachEvent 仅兼容旧版 IE，现代开发推荐使用 addEventListener
        // 此处为了还原原文逻辑保留，实际请确保浏览器兼容性
        anchor.attachEvent('onclick', function() {
            alert('my id is anchor' + i); // i 此时为 4
        });
    }
}

// 正确示范：通过立即执行函数或额外作用域隔离变量
function registerAnchorListener(anchor, i) {
    anchor.attachEvent('onclick', function() {
        alert('my id is anchor' + i); // i 被正确捕获
    });
}

function initAnchorsFixed() {
    for (var i = 1; i <= 3; i++) {
        var anchor = document.getElementById('anchor' + i);
        registerAnchorListener(anchor, i);
    }
}

// 获取所有 DOM 元素，返回的是 NodeList (类数组)
var all = document.getElementsByTagName('*');

// 错误的遍历方式可能导致意外行为
for (var i in all) {
    console.log(i); // 可能输出 "0", "1"... 以及 "length", "item" 等
}

// 正确的遍历方式：过滤继承属性
for (var i in all) {
    if (!all.hasOwnProperty(i)) continue;
    // 只有 here 才会执行针对元素的操作
    console.log(all[i]);
}