揭开JavaScript装饰器的神秘面纱：Stage1(旧)中的运用
2024-01-22 19:33:17
在JavaScript的浩瀚世界中，装饰器是一颗耀眼的明星，它可以赋予函数和类非凡的能力，而这颗明星最初诞生于Stage1提案中。虽然如今它已更新至Stage3，但旧版Stage1装饰器的魅力依旧值得探究。
装饰器本质上是高阶函数，它接受一个函数或类作为参数，并返回一个经过修饰的新函数或类。它类似于糖衣，包裹在原函数或类之外，为其增添了新的特性和行为。
函数装饰器
函数装饰器的强大之处在于，它可以在函数执行前或后注入任意代码。举个例子，我们可以使用函数装饰器来记录函数的执行时间：
function time(fn) {
return function (...args) {
console.time('time');
const result = fn(...args);
console.timeEnd('time');
return result;
};
}
@time
function heavyComputation() {
// 耗时的计算
}
装饰器"@time"被应用于"heavyComputation"函数上，它在函数执行前开启了一个"time"计时，并在函数执行后结束计时。这样，每次调用"heavyComputation"时，我们都能知道它的执行时间。
类装饰器
类装饰器的出现，扩展了装饰器的应用范围。它允许我们在类声明之前或之后对其进行修改和增强。例如，我们可以使用类装饰器来为所有类的实例添加一个特定的方法：
function addMethod(fn) {
return function (target) {
target.prototype.newMethod = fn;
};
}
@addMethod((a, b) => a + b)
class MyClass {
constructor() {}
}
const instance = new MyClass();
console.log(instance.newMethod(1, 2)); // 3
装饰器"@addMethod"接受一个函数作为参数，该函数将作为类实例的新方法。因此，在"MyClass"的每个实例中，都可以调用"newMethod"方法。
类方法装饰器
类方法装饰器更进一步，它可以对类中的特定方法进行修饰。它允许我们在方法执行前后执行额外的操作，例如权限检查或日志记录：
function checkPermission(requiredPermission) {
return function (target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
if (!hasPermission(requiredPermission)) {
throw new Error('Permission denied!');
}
return originalMethod.apply(this, args);
};
};
}
class User {
@checkPermission('admin')
save() {}
}
装饰器"@checkPermission"接受一个所需的权限作为参数，它会检查当前用户是否拥有该权限。如果用户没有权限，则抛出一个错误，否则调用原始的"save"方法。
类属性装饰器
最后，类属性装饰器允许我们在类属性声明之前或之后对其进行修改。它可以用来验证属性值，或者根据其他属性值计算属性值：
function validateNumber(min, max) {
return function (target, key, descriptor) {
const originalGetter = descriptor.get;
descriptor.get = function () {
const value = originalGetter.call(this);
if (value < min || value > max) {
throw new Error('Invalid number!');
}
return value;
};
};
}
class Point {
@validateNumber(0, 10)
x;
constructor(x, y) {
this.x = x;
this.y = y;
}
}
装饰器"@validateNumber"接受最小值和最大值作为参数，它会验证"x"属性的值是否在指定范围内。如果值不在范围内，则抛出一个错误。
总而言之，JavaScript装饰器在Stage1中就展现出了惊人的力量，它为函数和类提供了无限的扩展可能性。从函数装饰器到类属性装饰器，它让我们能够以一种优雅和非侵入式的方式增强代码的功能和可维护性。虽然Stage1装饰器已不再被广泛使用，但它为我们理解JavaScript装饰器的本质奠定了基础，并为其未来的发展铺平了道路。
