JavaScript 关键字与保留字学习笔记详细讲解，一篇get ✅【JavaScript查缺补漏】

JavaScript 关键字与保留字学习笔记

参考：MDN《JavaScript 词法语法》中的「关键字 / 保留字」部分。

本文在 MDN 内容基础上重新整理，并加入学习角度的解释与实际开发建议。

MDN 原文，一键跳转

---

目录

• [JavaScript 关键字与保留字学习笔记](#JavaScript 关键字与保留字学习笔记)
• 一、先搞清楚：什么是关键字？
• [二、关键字 ≠ 全部都是保留字](#二、关键字 ≠ 全部都是保留字)
• 三、标准保留字
• 四、流程控制相关关键字
• • [1. break](#1. break)
• [五、switch 相关关键字](#五、switch 相关关键字)
• • [2. case](#2. case)
  • [3. default](#3. default)
• 六、异常处理相关关键字
• • [4. try](#4. try)
  • [5. catch](#5. catch)
  • [6. finally](#6. finally)
• 七、循环相关关键字
• • [7. for](#7. for)
  • [8. while](#8. while)
  • [9. do](#9. do)
  • [10. continue](#10. continue)
  • • [break 和 continue](#break 和 continue)
• 八、条件判断相关关键字
• • [11. if](#11. if)
  • [12. else](#12. else)
• 九、函数相关关键字
• • [13. function](#13. function)
  • [14. return](#14. return)
  • • 一个重要理解
• 十、变量声明相关关键字
• • [15. var](#15. var)
  • [16. let](#16. let)
  • [17. const](#17. const)
• 十一、类相关关键字
• • [18. class](#18. class)
  • [19. extends](#19. extends)
  • [20. super](#20. super)
• 十二、模块相关关键字
• • [21. import](#21. import)
  • [22. export](#22. export)
  • • 前端非常重要
• [十三、对象 / 类型相关关键字](#十三、对象 / 类型相关关键字)
• • [23. this](#23. this)
  • • 注意
  • [24. new](#24. new)
  • [25. instanceof](#25. instanceof)
  • [26. typeof](#26. typeof)
  • • 注意经典问题
  • [27. in](#27. in)
  • [28. delete](#28. delete)
  • [29. void](#29. void)
  • [30. with](#30. with)
  • • 我的建议
• 十四、值相关的保留关键字
• • [31. true](#31. true)
  • [32. false](#32. false)
  • [33. null](#33. null)
• 十五、异常相关
• • [34. throw](#34. throw)
• 十六、调试相关
• • [35. debugger](#35. debugger)
• [十七、switch / try 等结构中的其他关键字](#十七、switch / try 等结构中的其他关键字)
• 十八、未来保留关键字
• • • 扩展
• 十九、严格模式下保留的关键字
• • • 注意
• [二十、模块中的 await](#二十、模块中的 await)
• 二十一、历史上的保留关键字
• 二十二、一个非常容易踩坑的地方：保留字可以当对象属性名
• • • 为什么？
• [二十三、关键字 vs 标识符](#二十三、关键字 vs 标识符)
• • 标识符是什么？
  • 一个完整例子
• 二十四、最值得你记住的分类
• • [① 声明](#① 声明)
  • [② 条件](#② 条件)
  • [③ 循环](#③ 循环)
  • [④ 函数](#④ 函数)
  • [⑤ 异步](#⑤ 异步)
  • [⑥ 异常](#⑥ 异常)
  • [⑦ 类](#⑦ 类)
  • [⑧ 模块](#⑧ 模块)
  • [⑨ 类型 / 对象](#⑨ 类型 / 对象)
  • [⑩ 值](#⑩ 值)
• 二十五、前端开发最常见的关键字
• 二十六、不要"背关键字"，要"理解语法"

一、先搞清楚：什么是关键字？

关键字（Keyword） 是 JavaScript 中具有特殊语法意义的单词。

例如：

async function getData() {
  // ...
}

这里的 async 就是一个具有特殊语法含义的关键字，它告诉 JavaScript：这个函数是异步函数。

很多关键字看起来和普通变量名非常像：

const
function
return
class
if
else
for

但它们不是普通的变量名，而是 JavaScript 语法的一部分。

可以把 JavaScript 想象成一门语言：

普通单词 → 变量名、函数名、对象属性名
关键字   → JavaScript 自己的"语法单词"

例如：

const name = '张三'

这里：

const → JavaScript 的语法
name  → 你自己定义的名字

所以你不能随便写：

const const = 123 // ❌

因为 const 已经被 JavaScript 占用了。

---

二、关键字 ≠ 全部都是保留字

这是 MDN 这一部分最容易让初学者混淆的地方。

并不是所有关键字在所有情况下都不能作为标识符。

例如：

const async = 123

async 在某些上下文中仍然可以作为标识符。

而：

const class = 123

则不允许。

因此可以粗略理解成：

关键字
│
├── 保留字
│     └── 不能作为普通标识符
│
├── 上下文关键字
│     └── 在特定语法环境中才有特殊意义
│
└── 某些关键字
      └── 在特定位置仍可能作为普通名字

---

三、标准保留字

下面这些单词属于 JavaScript 中的保留关键字，不能作为普通变量、函数、类等的标识符。

break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with

下面逐个理解。

---

四、流程控制相关关键字

1. break

用于终止循环或 switch。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break
  }

  console.log(i)
}

输出：

0
1
2
3
4

break 可以理解为：

"我不继续了，直接退出当前循环 / switch。"

常见于：

for
while
switch

---

五、switch 相关关键字

2. case

用于 switch 中匹配不同情况。

switch (status) {
  case 'success':
    console.log('成功')
    break

  case 'error':
    console.log('失败')
    break
}

可以理解成：

如果 status === 'success'
    → 执行这里

如果 status === 'error'
    → 执行那里

---

3. default

用于 switch 中处理没有匹配到的情况。

switch (status) {
  case 'success':
    console.log('成功')
    break

  default:
    console.log('未知状态')
}

default 就是：

"上面都没匹配到，那就走这里。"

---

六、异常处理相关关键字

4. try

用于尝试执行可能发生异常的代码。

try {
  const data = JSON.parse(text)
}

---

5. catch

捕获 try 中发生的异常。

try {
  const data = JSON.parse(text)
} catch (error) {
  console.error(error)
}

---

6. finally

无论前面的代码成功还是发生异常，通常都会执行。

try {
  // ...
} catch (error) {
  // ...
} finally {
  // 清理工作
}

这一组可以记成：

try
 ↓
"试试看"

catch
 ↓
"出错了我处理"

finally
 ↓
"不管怎样，最后做点收尾"

前端非常常见：

loading.value = true

try {
  await getData()
} catch (error) {
  console.error(error)
} finally {
  loading.value = false
}

---

七、循环相关关键字

7. for

创建循环。

for (let i = 0; i < 10; i++) {
  console.log(i)
}

---

8. while

当条件成立时不断执行。

while (count < 10) {
  count++
}

---

9. do

和 while 配合使用：

do {
  count++
} while (count < 10)

和 while 的一个重要区别：

while
→ 先判断
→ 再执行

do...while
→ 先执行一次
→ 再判断

---

10. continue

跳过当前这一轮循环，继续下一轮。

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue
  }

  console.log(i)
}

结果：

0
1
3
4

break 和 continue

一定要区分：

break
→ 整个循环结束

continue
→ 当前这一轮结束，下一轮继续

---

八、条件判断相关关键字

11. if

条件成立时执行代码。

if (age >= 18) {
  console.log('成年人')
}

---

12. else

if 条件不成立时执行。

if (age >= 18) {
  console.log('成年人')
} else {
  console.log('未成年人')
}

---

九、函数相关关键字

13. function

声明函数。

function add(a, b) {
  return a + b
}

现代前端你会同时看到：

function add() {}

以及：

const add = () => {}

两者并不是简单的"新旧之分"。

function 是 JavaScript 的函数语法，而箭头函数是另一种函数表达式语法。

---

14. return

从函数中返回结果，并结束当前函数执行。

function add(a, b) {
  return a + b
}

const result = add(1, 2)

console.log(result)
// 3

一个重要理解

return

不是"打印结果"。

而是：

把值交给调用这个函数的地方。

---

十、变量声明相关关键字

15. var

声明变量。

var name = '张三'

现代前端业务代码一般优先使用：

const
let

而不是 var。

原因主要涉及：

• 块级作用域
• 变量提升
• 重复声明
• 可读性
• 现代 JavaScript 编码习惯

---

16. let

声明一个可以重新赋值的块级变量。

let count = 1

count = 2

---

17. const

声明一个不能重新赋值的绑定。

const name = '张三'

// name = '李四' // ❌

注意：

const obj = {
  name: '张三'
}

obj.name = '李四'

这是允许的。

因为 const 限制的是：

变量绑定不能重新指向其他值

而不是：

对象内部所有属性都不能修改

---

十一、类相关关键字

18. class

声明类。

class Person {
  constructor(name) {
    this.name = name
  }

  sayHello() {
    console.log(`你好，我是 ${this.name}`)
  }
}

---

19. extends

让一个类继承另一个类。

class Animal {
  eat() {
    console.log('吃东西')
  }
}

class Dog extends Animal {
  bark() {
    console.log('汪汪')
  }
}

---

20. super

访问父类的构造函数或方法。

class Dog extends Animal {
  constructor(name) {
    super()
    this.name = name
  }
}

这三个可以一起记：

class
→ 我创建一个类

extends
→ 我继承另一个类

super
→ 我要使用父类的东西

---

十二、模块相关关键字

21. import

导入模块。

import { ref } from 'vue'

---

22. export

导出模块。

export function getData() {
  // ...
}

也可以：

export const name = '张三'

前端非常重要

现代 Vue / React 项目大量依赖：

import
export

整个项目其实就是由大量模块连接起来的。

例如：

Vue 页面
 ↓
API
 ↓
工具函数
 ↓
组件
 ↓
第三方库

这些模块之间就是通过 import / export 连接的。

---

十三、对象 / 类型相关关键字

23. this

表示当前执行上下文中的 this 值。

const user = {
  name: '张三',

  sayHello() {
    console.log(this.name)
  }
}

user.sayHello()

输出：

张三

注意

this 是 JavaScript 最容易让初学者困惑的知识点之一。

尤其要区分：

function () {}

和：

() => {}

普通函数拥有自己的 this 绑定规则，而箭头函数不会创建自己的 this。

---

24. new

创建对象实例。

const date = new Date()

也可以用于构造函数：

const person = new Person('张三')

可以暂时理解成：

new
→ 根据一个构造函数 / 类创建一个新的实例

---

25. instanceof

判断一个对象是否属于某个构造函数或类的实例关系。

const arr = []

console.log(arr instanceof Array)
// true

---

26. typeof

获取一个值的类型字符串。

typeof 123
// "number"

typeof 'hello'
// "string"

typeof true
// "boolean"

注意经典问题

typeof null
// "object"

这是 JavaScript 历史遗留行为。

---

27. in

判断某个属性名是否存在于对象或其原型链中。

const user = {
  name: '张三'
}

console.log('name' in user)
// true

---

28. delete

删除对象属性。

const user = {
  name: '张三',
  age: 20
}

delete user.age

console.log(user)
// { name: '张三' }

当一个属性被标记为不可配置时，delete 不会有任何效果，并将返回 false。在严格模式下，会抛出 TypeError。

configurable: false 就是不可配置

const obj = {};

Object.defineProperty(obj, "name", {
  value: "张三",
  configurable: false
});

Object.defineProperty() 默认就是 false

---

29. void

计算一个表达式，但返回 undefined。

void 0
// undefined

现代业务开发中比较少直接使用。

---

30. with

with 可以改变代码查找标识符的作用域。

但是现代 JavaScript 中已经不推荐使用，并且严格模式下不允许使用。

我的建议

看到它知道：

with
→ 历史语法
→ 不要在现代业务代码中使用

就够了。

---

十四、值相关的保留关键字

31. true

布尔真值：

const visible = true

---

32. false

布尔假值：

const visible = false

---

33. null

表示一个有意设置的"空值"。

const user = null

---

十五、异常相关

34. throw

主动抛出异常。

throw new Error('请求失败')

通常配合：

try {
  // ...
} catch (error) {
  // ...
}

使用。

---

十六、调试相关

35. debugger

在代码中设置调试断点。

function test() {
  debugger

  console.log('hello')
}

当浏览器开发者工具打开并执行到这里时，可以暂停代码。

它相当于：

"浏览器，请在这里停下来让我看看。"

现代开发中比手动点断点少一些，但理解它很有用。

---

十七、switch / try 等结构中的其他关键字

这些前面已经涉及，但统一整理：

case
default
try
catch
finally
throw

可以形成一个知识链：

try
 ↓
可能出错
 ↓
catch
 ↓
捕获异常
 ↓
throw
 ↓
主动抛出异常
 ↓
finally
 ↓
最终清理

---

十八、未来保留关键字

MDN 当前页面列出的未来保留关键字包括：

enum

它目前没有普通 JavaScript 语法功能，但被保留，以避免未来语言扩展时产生冲突。

"这个名字现在可能没什么特殊作用，但 JavaScript 给未来的自己留了位置。"

因此不要拿它当变量名。

扩展

TypeScript 有 enum

enum Color {
  Red,
  Green,
  Blue
}

const color = Color.Red;

console.log(color);
// 0

---

十九、严格模式下保留的关键字

以下关键字在严格模式下属于保留字：

implements // 实现接口
interface // 定义对象/类
let // 声明可以重新赋值的块级变量
package // js保留字
private // 私有成员
protected // 受保护成员
public // 公开成员
static // 静态成员

例如：

'use strict'

const public = 123
// ❌ SyntaxError

注意

其中一些单词在现代 JavaScript / class 语法中已经有实际用途。

例如：

class User {
  static create() {}
}

所以不要简单理解成"这些单词永远都不能出现"。

关键是：

它们在什么语法位置、什么模式下出现。

关键字	快速理解
implements	实现接口 ，TypeScript 中让 class 按照某个 interface 的要求实现。
interface	定义对象/类应该具有什么结构，TypeScript 的类型声明语法。
let	声明可以重新赋值的块级变量。
package	JavaScript 的保留字，目前一般不能作为普通标识符使用，没有常规业务语法功能。
private	私有成员，通常表示只能在类内部访问；TypeScript 支持。
protected	受保护成员，类自己和子类可以访问；TypeScript 支持。
public	公开成员，可以从外部访问；TypeScript/class 中常见。
static	静态成员，属于类本身，而不是某个实例。

---

二十、模块中的 await

await 在模块代码中属于保留关键字。

例如：

const data = await getData()

现代 JavaScript 支持模块顶层 await。

而在普通异步函数中：

async function getData() {
  const data = await request()
}

await 用来等待 Promise 结果。

---

二十一、历史上的保留关键字

早期 ECMAScript 标准中还保留过一些未来可能使用的单词，例如：

abstract // 抽象类/抽象方法相关关键字
boolean // 布尔类型
byte  // 字节类型
char // 字符类型
double // 双精度浮点数类型
final // 表示不能继续修改/继承的成员或类
float // 单精度浮点数类型
goto // 无条件跳转语句
int // 整数类型
long // 长整数类型
native // 表示由底层/本地代码实现的方法
short // 短整数类型
synchronized // 用于线程同步
transient // 表示某些数据不参与序列化
volatile // 表示变量可能被多个线程修改

现代 JavaScript 开发基本不需要使用这些词。

知道它们属于历史遗留知识即可。

注意：下面很多关键字并不是 JavaScript 当前支持的语法，而是其他编程语言中常见的关键字，被 JavaScript 预留。

关键字	快速理解
abstract	抽象类/抽象方法相关关键字，JavaScript 原生没有这个语法。
boolean	布尔类型，表示 true / false；JavaScript 中使用 boolean 类型概念，但没有 boolean 关键字声明变量。
byte	字节类型，通常表示 8 位整数；JavaScript 原生没有 byte 类型。
char	字符类型，JavaScript 没有独立的 char 类型，单个字符也是 string。
double	双精度浮点数类型；JavaScript 的 number 本身就是双精度浮点数。
final	表示不能继续修改/继承的成员或类，常见于 Java；JavaScript 没有 final 关键字。
float	单精度浮点数类型；JavaScript 没有独立的 float 类型。
goto	无条件跳转语句，常见于一些编程语言；JavaScript 没有 goto。
int	整数类型，常见于 Java/C/C++；JavaScript 没有独立的 int 类型。
long	长整数类型，常见于 Java/C/C++；JavaScript 没有 long 类型。
native	表示由底层/本地代码实现的方法，常见于 Java；JavaScript 没有这个关键字。
short	短整数类型，常见于 Java/C/C++；JavaScript 没有独立的 short 类型。
synchronized	用于线程同步，常见于 Java；JavaScript 没有这个关键字。
transient	表示某些数据不参与序列化，常见于 Java；JavaScript 没有这个关键字。
volatile	表示变量可能被多个线程修改，常见于 Java/C/C++；JavaScript 没有这个关键字。

---

二十二、一个非常容易踩坑的地方：保留字可以当对象属性名

例如：

const obj = {
  import: 'hello',
  class: 'world'
}

这是合法的。

也可以：

console.log(obj.import)

或者：

console.log(obj['import'])

但是不能这样：

function import() {}
// ❌

为什么？

因为：

对象属性名
→ 不一定要求是普通 Identifier

变量名 / 函数名
→ 必须符合 Identifier 的规则

所以：

const obj = {
  class: 123
}

没问题。

但是：

const class = 123

不行。

---

二十三、关键字 vs 标识符

这是学习 JavaScript 词法时最重要的概念之一。

标识符是什么？

标识符就是：

你给变量、函数、类等取的名字。

例如：

const userName = '张三'

function getUser() {}

class User {}

这里：

userName
getUser
User

都是标识符。

---

一个完整例子

const user = {
  name: '张三'
}

function getName() {
  return user.name
}

可以拆成：

const
↓
关键字

user
↓
标识符

function
↓
关键字

getName
↓
标识符

return
↓
关键字

这样理解就非常清楚了。

---

二十四、最值得你记住的分类

① 声明

var
let
const
function
class

---

② 条件

if
else
switch
case
default

---

③ 循环

for
while
do
break
continue

---

④ 函数

function
return

---

⑤ 异步

async
await

注意：async、await 的保留和语法意义具有上下文差异。

---

⑥ 异常

try
catch
finally
throw

---

⑦ 类

class
extends
super
static

---

⑧ 模块

import
export

---

⑨ 类型 / 对象

typeof
instanceof
in
new
this
delete
void

---

⑩ 值

true
false
null

---

二十五、前端开发最常见的关键字

如果你是前端开发，不需要把所有关键字都当成同等重要。

你应该优先熟悉：

const
let
function
return
if
else
for
while
break
continue
class
extends
new
this
typeof
instanceof
in
try
catch
finally
throw
async
await
import
export
null
true
false

这些在 Vue / React / TypeScript / Node.js 项目中都会频繁出现。

---

二十六、不要"背关键字"，要"理解语法"

例如不要这样背：

return = 返回
throw = 抛出
break = 跳出
continue = 继续

而应该通过代码理解：

function getUser() {
  if (!user) {
    throw new Error('用户不存在')
  }

  return user
}

这里就同时理解了：

if
throw
return

再例如：

try {
  const res = await getData()
  return res
} catch (error) {
  console.error(error)
} finally {
  loading.value = false
}

一次性就理解了：

try
await
return
catch
finally

这比单纯背单词有效得多。

---

声明： 本篇内容在 MDN 内容基础上重新整理！！