JavaScript 易错知识点解析与避坑指南

核心目标与准备

在 JavaScript 开发中，许多看似简单的语法结构背后隐藏着复杂的运行时行为。为了准确理解并规避这些错误，需要明确以下几点准备条件：

• 熟悉基本数据类型（原始类型）与引用类型（对象、数组）的区别。
• 理解执行上下文与作用域链的基本概念。
• 掌握 ES5 与 ES6+ 关键字（var, let, const）的行为差异。

1. 变量作用域与提升机制

变量声明的位置和关键字决定了其在作用域内的可见性与赋值时机。这是初学者最容易混淆的基础概念。

第1步：区分 var 的变量提升行为

目的：理解 var 声明会被提升到作用域顶部，但未初始化部分为 undefined。

操作与现象：

// 示例 A：正常就近取值
var a = 1;
function test() {
 var a = 2;
 console.log(a); // 输出 2
}
test();

// 示例 B：变量提升导致未定义
var a = 1;
function test2() {
 console.log(a); // 输出 undefined
 var a = 2;
}
test2();

// 示例 C：访问外层作用域
var a = 1;
function test3() {
 console.log(a); // 输出 1
 a = 2;
}
test3();

原理解析：在 test2 中，var a 的提升使得函数内存在已声明未赋值的局部变量 a，遮挡了全局的 a，因此 console 时值为 undefined。而在 test3 中，console 时尚未发生局部重新声明，故读取的是全局 a。

第2步：使用 let/const 避免提升漏洞

目的：利用块级作用域和暂时性死区防止意外覆盖或未定义值。

操作与现象：

// 示例 D：let 无变量提升
var b = 1;
function test4() {
 console.log(b); // 报错 Uncaught ReferenceError: b is not defined
 let b = 2;
}

// 示例 E：块级作用域隔离
function test5() {
 let a = 1;
 {
  let a = 2; // 仅在块内有效
 }
 console.log(a); // 输出 1
}

注意：let 不存在变量提升，且在声明前访问会进入“暂时性死区”抛出错误，这比 var 更安全可靠。

2. 类型比较与身份识别

JavaScript 中对象的相等性比较基于引用而非值，这是导致逻辑判断错误的重灾区。

第1步：掌握引用类型的比较规则

目的：确认两个不同的对象实例即使内容相同也不相等。

操作与现象：

var arr = [], arr2 = [1];
console.log(arr === arr2); // false (不同引用)

var arr3 = [], arr4 = []; 
console.log(arr3 === arr4); // false (即使是空数组也是不同引用)

第2步：正确判断对象类型

目的