企业官网建设流程全解析

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

参考：MDN《JavaScript 词法语法》中的「关键字 / 保留字」部分。
本文在 MDN 内容基础上重新整理，并加入学习角度的解释与实际开发建议。
MDN 原文，一键跳转

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

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

例如：

asyncfunctiongetData(){// ...}

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

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

constfunctionreturnclassifelsefor

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

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

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

例如：

constname='张三'

这里：

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

所以你不能随便写：

constconst=123// ❌

因为const已经被 JavaScript 占用了。

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

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

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

例如：

constasync=123

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

而：

constclass=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(leti=0;i<10;i++){if(i===5){break}console.log(i)}

输出：

0 1 2 3 4

break可以理解为：

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

常见于：

forwhileswitch

五、switch 相关关键字

2. case

用于switch中匹配不同情况。

switch(status){case'success':console.log('成功')breakcase'error':console.log('失败')break}

可以理解成：

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

3. default

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

switch(status){case'success':console.log('成功')breakdefault:console.log('未知状态')}

default就是：

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

六、异常处理相关关键字

4. try

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

try{constdata=JSON.parse(text)}

5. catch

捕获try中发生的异常。

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

6. finally

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

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

这一组可以记成：

try ↓ “试试看” catch ↓ “出错了我处理” finally ↓ “不管怎样，最后做点收尾”

前端非常常见：

loading.value=truetry{awaitgetData()}catch(error){console.error(error)}finally{loading.value=false}

七、循环相关关键字

7. for

创建循环。

for(leti=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(leti=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

声明函数。

functionadd(a,b){returna+b}

现代前端你会同时看到：

functionadd(){}

以及：

constadd=()=>{}

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

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

14. return

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

functionadd(a,b){returna+b}

constresult=add(1,2)console.log(result)// 3

一个重要理解

return

不是“打印结果”。

而是：

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

十、变量声明相关关键字

15. var

声明变量。

varname='张三'

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

constlet

而不是var。

原因主要涉及：

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

16. let

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

letcount=1count=2

17. const

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

constname='张三'// name = '李四' // ❌

注意：

constobj={name:'张三'}obj.name='李四'

这是允许的。

因为const限制的是：

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

而不是：

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

十一、类相关关键字

18. class

声明类。

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

19. extends

让一个类继承另一个类。

classAnimal{eat(){console.log('吃东西')}}classDogextendsAnimal{bark(){console.log('汪汪')}}

20. super

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

classDogextendsAnimal{constructor(name){super()this.name=name}}

这三个可以一起记：

class → 我创建一个类 extends → 我继承另一个类 super → 我要使用父类的东西

十二、模块相关关键字

21. import

导入模块。

import{ref}from'vue'

22. export

导出模块。

exportfunctiongetData(){// ...}

也可以：

exportconstname='张三'

前端非常重要

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

importexport

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

例如：

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

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

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

23. this

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

constuser={name:'张三',sayHello(){console.log(this.name)}}user.sayHello()

输出：

张三

注意

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

尤其要区分：

function(){}

和：

()=>{}

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

24. new

创建对象实例。

constdate=newDate()

也可以用于构造函数：

constperson=newPerson('张三')

可以暂时理解成：

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

25. instanceof

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

constarr=[]console.log(arrinstanceofArray)// true

26. typeof

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

typeof123// "number"typeof'hello'// "string"typeoftrue// "boolean"

注意经典问题

typeofnull// "object"

这是 JavaScript 历史遗留行为。

27. in

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

constuser={name:'张三'}console.log('name'inuser)// true

28. delete

删除对象属性。

constuser={name:'张三',age:20}deleteuser.age console.log(user)// { name: '张三' }

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

configurable: false 就是不可配置

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

Object.defineProperty() 默认就是 false

29. void

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

void0// undefined

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

30. with

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

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

我的建议

看到它知道：

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

就够了。

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

31. true

布尔真值：

constvisible=true

32. false

布尔假值：

constvisible=false

33. null

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

constuser=null

十五、异常相关

34. throw

主动抛出异常。

thrownewError('请求失败')

通常配合：

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

使用。

十六、调试相关

35. debugger

在代码中设置调试断点。

functiontest(){debuggerconsole.log('hello')}

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

它相当于：

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

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

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

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

case default try catch finally throw

可以形成一个知识链：

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

十八、未来保留关键字

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

enum

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

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

因此不要拿它当变量名。

扩展

TypeScript 有 enum

enumColor{Red,Green,Blue}

constcolor=Color.Red;console.log(color);// 0

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

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

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

例如：

'use strict'constpublic=123// ❌ SyntaxError

注意

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

例如：

classUser{staticcreate(){}}

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

关键是：

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

二十、模块中的 await

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

例如：

constdata=awaitgetData()

现代 JavaScript 支持模块顶层await。

而在普通异步函数中：

asyncfunctiongetData(){constdata=awaitrequest()}

await用来等待 Promise 结果。

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

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

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

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

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

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

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

例如：

constobj={import:'hello',class:'world'}

这是合法的。

也可以：

console.log(obj.import)

或者：

console.log(obj['import'])

但是不能这样：

functionimport(){}// ❌

为什么？

因为：

对象属性名 → 不一定要求是普通 Identifier 变量名 / 函数名 → 必须符合 Identifier 的规则

所以：

constobj={class:123}

没问题。

但是：

constclass=123

不行。

二十三、关键字 vs 标识符

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

标识符是什么？

标识符就是：

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

例如：

constuserName='张三'functiongetUser(){}classUser{}

这里：

userName getUser User

都是标识符。

一个完整例子

constuser={name:'张三'}functiongetName(){returnuser.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 = 继续

而应该通过代码理解：

functiongetUser(){if(!user){thrownewError('用户不存在')}returnuser}

这里就同时理解了：

if throw return

再例如：

try{constres=awaitgetData()returnres}catch(error){console.error(error)}finally{loading.value=false}

一次性就理解了：

try await return catch finally

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

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