JavaScript 中 undefined 和 not defined 的区别

在 JavaScript 的调试过程中，你是否经常看到 undefined 却不知其来源？是否曾被 ReferenceError: xxx is not defined 的错误提示困扰？这两个看似相似的概念，实际上是 JavaScript 类型系统中最重要的分水岭。本文将带你拨开迷雾，彻底理解它们的本质区别。

一、基础概念：两顶不同的"帽子"

1. undefined：已声明但未赋值的状态

• 存在性：变量存在于当前作用域

• 默认值：变量声明后的初始状态

• 类型：typeof undefined 返回 "undefined"

• 合法操作：可以安全访问

javascript

复制

下载

let student;
console.log(student); // undefined
console.log(typeof student); // "undefined"

2. not defined（未定义）：根本不存在的标识符

• 存在性：标识符未在任何作用域声明

• 错误类型：触发 ReferenceError

• 类型检测：typeof 的特殊处理

• 危险操作：直接访问会中断代码

javascript

复制

下载

console.log(nonExistentVar); // ReferenceError: nonExistentVar is not defined
console.log(typeof nonExistentVar); // "undefined" （特殊行为）

二、核心差异对比表

三、深度解析特殊场景

1. typeof 的"谎言"

javascript

复制

下载

// 已声明但未赋值
let declaredVar;
console.log(typeof declaredVar); // "undefined"

// 从未声明
console.log(typeof ghostVar); // "undefined" （不会报错！）

⚠️ 这是 JavaScript 的安全机制：typeof 对未声明变量返回 "undefined" 以防止报错，但这可能掩盖真正的引用错误。

2. 函数参数中的 undefined

javascript

复制

下载

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet(); // "Hello, undefined!"

此处 name 参数处于已声明但未赋值的状态，与未定义变量完全不同。

3. 对象属性的微妙区别

javascript

复制

下载

const obj = { existing: null };

console.log(obj.existing); // null
console.log(obj.nonExisting); // undefined
console.log(nonExistingObj.prop); // ReferenceError

• obj.nonExisting：属性不存在 → 返回 undefined

• nonExistingObj：变量未声明 → 抛出错误

四、现代 JavaScript 的演进

1. 暂时性死区（TDZ）

javascript

复制

下载

console.log(tmp); // ReferenceError (not defined)
let tmp = 10;

ES6 的 let/const 声明存在暂时性死区，在声明前访问会触发真正的引用错误。

2. 默认参数值

javascript

复制

下载

function log(message = "No message") {
  console.log(message);
}

log(undefined); // "No message"
log(); // "No message"

明确区分 undefined 和未传参的不同处理。

3. 可选链操作符（?.）

javascript

复制

下载

const data = { user: null };

console.log(data.user?.name); // undefined
console.log(data.nonExistingUser?.name); // undefined
console.log(nonExistingData?.user); // ReferenceError

新型语法仍要区分变量存在性与属性访问的区别。

五、调试技巧与最佳实践

1. 错误处理策略

javascript

复制

下载

// 安全检测未声明变量
if (typeof possiblyUndefined !== 'undefined') {
  // 变量已声明
}

// 现代方式（推荐）
try {
  possiblyUndefined;
} catch (e) {
  console.log('变量未声明');
}

2. ESLint 规则配置

javascript

复制

下载

// .eslintrc
{
  "rules": {
    "no-undef": "error",        // 禁止使用未声明变量
    "no-undefined": "warn"      // 避免与 undefined 直接比较
  }
}

3. TypeScript 的类型安全

typescript

复制

下载

let score: number;
console.log(score); // Error: Variable 'score' is used before being assigned

console.log(notDeclared); // Error: Cannot find name 'notDeclared'

六、终极对比：内存视角

（undefined 变量在内存中有存储位置但无值，not defined 变量没有内存分配）

• undefined：在作用域中注册标识符 → 分配内存空间 → 存入 undefined 值

• not defined：未在作用域中注册 → 无内存分配 → 引擎抛出异常

总结：掌握区别，写出健壮代码

最佳实践清单：

1. 始终使用 let/const 声明变量

2. 开启严格模式（'use strict'）

3. 使用 ESLint 等静态检查工具

4. 对可选参数显式设置默认值

5. 使用 === undefined 进行精确判断

6. 避免直接与 undefined 比较（可使用 void 0 替代）

理解这两个概念的本质区别，将帮助你：

• 更准确地调试代码

• 编写更安全的类型检查

• 避免隐式的全局变量污染

• 深入理解 JavaScript 的作用域机制

记住：undefined 是语言设计的产物，而 not defined 总是意味着代码存在需要修复的问题。