JavaScript中的注解相关概念可以分为几个不同的类别，不同类型的注解承担着不同的功能，适用场景也有明显区别。很多开发者容易把注释、类型标注和装饰器混淆，下面会逐一梳理这些常见类型。
JS中注解的主要类型
1. 代码注释类注解
这是JS中最基础的注解形式，不会参与代码执行，仅用于提升代码可读性，帮助开发者理解代码逻辑。主要分为单行注释和多行注释两种：
- 单行注释：以
//开头，后面跟随注释内容，仅对当前行生效 - 多行注释：以
/*开头，*/结尾，中间的内容都属于注释范围，可以跨多行
这类注解还可以配合JSDoc规范使用，生成标准化的文档说明，比如标注函数参数、返回值、功能描述等信息：
// 单行注释示例：计算两个数的和
function add(a, b) {
/* 多行注释示例：
这里可以写更详细的逻辑说明
比如这个函数的使用注意事项
*/
return a + b;
}
/**
* JSDoc格式注解示例
* @param {number} x 第一个加数
* @param {number} y 第二个加数
* @returns {number} 两个加数的和
*/
function sum(x, y) {
return x + y;
}
2. 类型注解
JS本身是动态类型语言，没有原生的类型注解语法，但是可以通过TypeScript或者JSDoc的类型标注实现类型注解的效果，用来约束变量、函数参数、返回值的类型，在开发阶段提前发现类型错误。
TypeScript中的类型注解是原生支持的，语法是在变量或者参数后面加: 类型的标识：
// TypeScript类型注解示例
let name: string = "张三";
let age: number = 20;
function multiply(a: number, b: number): number {
return a * b;
}
// 对象类型注解
interface User {
id: number;
username: string;
isAdmin: boolean;
}
const user: User = {
id: 1,
username: "admin",
isAdmin: true
};
如果不用TypeScript，也可以在JS文件中使用JSDoc的类型注解，配合IDE的类型检查功能实现类似效果：
/**
* @type {string}
*/
let city = "北京";
/**
* @param {number} width
* @param {number} height
* @returns {number}
*/
function getArea(width, height) {
return width * height;
}
3. 装饰器注解
装饰器是JS中的元编程语法，属于ECMAScript的提案特性，目前处于Stage 3阶段，需要配合相应的编译工具（如Babel、TypeScript）使用。装饰器本质是一个函数，可以附加到类、类的方法、属性、参数上，用来修改或者扩展这些目标的行为，属于功能性的注解。
常见的装饰器类型包括类装饰器、方法装饰器、属性装饰器：
// 类装饰器示例：给类添加额外属性
function addTimestamp(targetClass) {
return class extends targetClass {
createTime = new Date().toISOString();
};
}
@addTimestamp
class User {
constructor(name) {
this.name = name;
}
}
const user1 = new User("李四");
console.log(user1.createTime); // 输出当前时间的ISO字符串
// 方法装饰器示例：统计方法执行时间
function measureTime(target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
const start = Date.now();
const result = originalMethod.apply(this, args);
const end = Date.now();
console.log(`${propertyKey} 执行耗时：${end - start}ms`);
return result;
};
return descriptor;
}
class Calculator {
@measureTime
complexCalculate(a, b) {
// 模拟耗时操作
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
}
return a + b + sum;
}
}
const calc = new Calculator();
calc.complexCalculate(1, 2);
不同类型注解的功能对比
为了更清晰区分几种注解的差异，以下是功能对比表格：
| 注解类型 | 是否参与代码执行 | 核心功能 | 适用场景 |
|---|---|---|---|
| 代码注释类注解 | 否 | 说明代码逻辑、生成文档 | 所有需要解释代码逻辑的场景 |
| 类型注解 | 编译阶段检查，运行时无影响 | 约束类型、提前发现类型错误 | 中大型项目、需要类型约束的场景 |
| 装饰器注解 | 是 | 修改/扩展类、方法、属性的行为 | 需要元编程、统一处理类相关逻辑的场景 |
使用注解的注意事项
- 代码注释类注解不要写冗余内容，尽量简洁说明核心逻辑，避免注释和代码逻辑不一致的情况
- 类型注解如果使用TypeScript，需要配置好tsconfig.json，确保类型检查规则符合项目需求
- 装饰器目前还不是JS正式标准，如果要在生产环境使用，需要确认编译工具的兼容性配置，避免运行时报错
需要注意的是，JS中并没有类似Java那样原生的注解语法，通常我们说的JS注解是上述几类相关概念的统称，使用时需要根据具体场景选择合适的类型。
JS注解JavaScript装饰器类型注解元编程代码注释修改时间：2026-07-19 22:21:31