JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为。本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用。
装饰器
什么是装饰器
装饰器是一个函数，它接收函数或类作为参数，并返回修改后的函数或类。装饰器可以通过 @ 符号应用于函数或类。
下面是一个简单的装饰器示例：
function myDecorator(target) {
// 对类或函数进行修改
return target;
}
@myDecorator
class MyClass {
// 类的定义
}
@myDecorator
function myFunction() {
// 函数的定义
}
装饰器的作用
装饰器可以用于许多场景，例如：
- 类属性保护
- 函数参数类型检查
- 函数返回值类型检查
- 函数调用计时
本文将介绍装饰器如何用于装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用。
装饰函数参数
参数类型检查
装饰器可以用于检查函数参数的类型。下面是一个使用装饰器对函数参数进行类型检查的示例：
function myParameterDecorator(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
args.forEach((arg, index) => {
const argType = typeof arg;
if (argType !== 'number' && argType !== 'string') {
throw new Error(`Argument ${index} is of type ${argType}, but should be a string or a number`);
}
});
return originalMethod.apply(this, args);
}
return descriptor;
}
class MyClass {
@myParameterDecorator
myMethod(name, age) {
console.log(`Hello, my name is ${name} and I am ${age} years old`);
}
}
const myObject = new MyClass();
myObject.myMethod("Alice", 30); // 输出：Hello, my name is Alice and I am 30 years old
myObject.myMethod("Bob", "thirty"); // 抛出错误：Argument 1 is of type string, but should be a string or a number
在上面的示例中，@myParameterDecorator 装饰器用于在调用 myMethod 函数之前检查传递给函数的每个参数是否为字符串或数字类型。如果参数不是这两种类型之一，则抛出错误。
参数默认值
装饰器还可以用于设置函数参数的默认值。下面是一个使用装饰器对函数参数设置默认值的示例：
function myParameterDecorator(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(name = "World") {
return originalMethod.call(this, name);
}
return descriptor;
}
class MyClass {
@myParameterDecorator
myMethod(name) {
console.log(`Hello, ${name}`);
}
}
const myObject = new MyClass();
myObject.myMethod(); // 输出：Hello, World
myObject.myMethod("Alice"); // 输出：Hello, Alice
在上面的示例中，@myParameterDecorator 装饰器用于在调用 myMethod 函数时检查参数 name 是否存在。如果参数 name 不存在，则使用默认值 “World”。
装饰类属性
类属性保护
装饰器可以用于保护类属性，防止它们被修改或直接访问。下面是一个使用装饰器保护类属性的示例：
function myPropertyDecorator(target, name) {
let value = target[name];
const getter = function() {
return value;
};
const setter = function(newValue) {
if (typeof newValue === 'string') {
value = newValue;
} else {
throw new Error(`Property ${name} must be a string`);
}
};
delete target[name];
Object.defineProperty(target, name, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
}
class MyClass {
@myPropertyDecorator
myProperty = "initial value";
}
const myObject = new MyClass();
console.log(myObject.myProperty); // 输出：initial value
myObject.myProperty = "new value";
console.log(myObject.myProperty); // 输出：new value
myObject.myProperty = 123;
// 抛出错误：Property myProperty must be a string
在上面的示例中，@myPropertyDecorator 装饰器用于保护 MyClass 类的一个属性 myProperty。如果尝试将属性设置为非字符串值，则会抛出错误。
类属性初始值
装饰器还可以用于设置类属性的初始值。下面是一个使用装饰器设置类属性初始值的示例：
function myDefaultDecorator(defaultValue) {
return function(target, name) {
target[name] = defaultValue;
}
}
class MyClass {
@myDefaultDecorator('initial value')
myProperty;
}
const myObject = new MyClass();
console.log(myObject.myProperty); // 输出：initial value
在上面的示例中，@myDefaultDecorator 装饰器用于设置 MyClass 类的一个属性 myProperty 的初始值为 “initial value”。
装饰函数返回值
返回类型检查
装饰器可以用于检查函数返回值的类型。下面是一个使用装饰器对函数返回值进行类型检查的示例：
function myReturnDecorator(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
const result = originalMethod.apply(this, args);
if (typeof result !== 'number') {
throw new Error(`Method ${name} must return a number`);
}
return result;
}
return descriptor;
}
class MyClass {
@myReturnDecorator
myMethod() {
return 42;
}
}
const myObject = new MyClass();
console.log(myObject.myMethod()); // 输出：42
myObject.myMethod = function() {
return "not a number";
};
// 抛出错误：Method myMethod must return a number
在上面的示例中，@myReturnDecorator 装饰器用于在调用 myMethod 函数之后检查函数返回值是否为数字类型。如果返回值不是数字类型，则抛出错误。
返回值格式化
装饰器还可以用于格式化函数返回值。下面是一个使用装饰器格式化函数返回值的示例：
function myFormatDecorator(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
const result = originalMethod.apply(this, args);
if (typeof result === 'string') {
return result.toUpperCase();
} else {
return result;
}
}
return descriptor;
}
class MyClass {
@myFormatDecorator
myMethod() {
return "hello, world";
}
}
const myObject = new MyClass();
console.log(myObject.myMethod()); // 输出：HELLO, WORLD
在上面的示例中，@myFormatDecorator 装饰器用于将 myMethod 函数返回值转换为大写字母。
装饰函数调用
前置操作
装饰器可以用于在函数调用之前执行某些操作。下面是一个使用装饰器在函数调用之前执行某些操作的示例：
function myBeforeDecorator(before) {
return function(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
before();
return originalMethod.apply(this, args);
}
return descriptor;
}
}
class MyClass {
@myBeforeDecorator(() => console.log("before"))
myMethod() {
console.log("myMethod");
}
}
const myObject = new MyClass();
myObject.myMethod();
// 输出：
// before
// myMethod
在上面的示例中，@myBeforeDecorator 装饰器用于在调用 myMethod 函数之前执行一个回调函数。
后置操作
装饰器还可以用于在函数调用之后执行某些操作。下面是一个使用装饰器在函数调用之后执行某些操作的示例：
function myAfterDecorator(after) {
return function(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
const result = originalMethod.apply(this, args);
after(result);
return result;
}
return descriptor;
}
}
class MyClass {
@myAfterDecorator(result => console.log("after: " + result))
myMethod() {
console.log("myMethod");
return "result";
}
}
const myObject = new MyClass();
console.log(myObject.myMethod());
// 输出：
// myMethod
// after: result
// result
在上面的示例中，@myAfterDecorator 装饰器用于在调用 myMethod 函数之后执行一个回调函数，将函数返回值作为参数传递给回调函数。
总结
本文介绍了五个使用 JavaScript 装饰器的技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用，这5个不同的JavaScript装饰器技巧，这些技巧可以让你的代码更加美观、优雅和易于阅读，还可以帮助我们更好地组织代码和增强扩展函数和类的功能。
原文链接：https://juejin.cn/post/7244783947821105213 作者：纯爱掌门人
