深入理解JavaScript装饰器函数

"JS装饰器函数用法总结" 在JavaScript中，装饰器是一种特殊类型的声明，可以被附加到类声明，方法，访问器，属性或参数上。它们的主要目的是用来修改或增强这些结构的行为，而无需改变其源代码。装饰器在ES7提案中引入，但目前需要借助Babel等转译工具在现代浏览器中使用。 ### 1. 装饰器的基本概念 装饰器是一种函数，它接收一个目标（类、方法、属性或参数）作为参数，并返回一个新的定义，这使得我们可以在不修改原有代码的情况下，增加新的功能或改变已有功能的行为。装饰器在定义时不会立即执行，而是等到运行时，当编译器或解释器遇到装饰器时，才会执行相应的装饰逻辑。 ### 2. 类装饰器 类装饰器用于修改类的行为。它们被放在类声明之前，通过`@decorator`语法来使用。类装饰器可以用来监视、替换或增强类的行为，但不能直接修改类的实例。例如： ```javascript function logClass(target) { console.log(`Class ${target.name} decorated`); } @logClass class MyClass {} // 输出：Class MyClass decorated ``` ### 3. 方法、访问器和属性装饰器 方法、访问器和属性装饰器用于修改类的成员行为。它们分别应用于类的方法、getter/setter和静态或实例属性。例如，我们可以使用装饰器来记录属性的访问情况： ```javascript function logProperty(target, key, descriptor) { var originalMethod = descriptor.value; descriptor.value = function(...args) { console.log(`Accessing property ${key}`); return originalMethod.apply(this, args); }; return descriptor; } class MyClass { @logProperty myProperty = 'Hello, world!'; } let instance = new MyClass(); instance.myProperty; // 输出：Accessing property myProperty ``` ### 4. 参数装饰器 参数装饰器允许我们在函数参数级别进行操作，例如验证参数类型、注入依赖等。参数装饰器应用于函数的参数定义之上： ```javascript function required(target, key, index) { let paramIndex = index; return function(...args) { if (args[paramIndex] === undefined) { throw new Error(`Parameter at position ${paramIndex} is required.`); } return target.apply(this, args); }; } class MyClass { constructor(@required name) { this.name = name; } } new MyClass(); // 抛出错误：Parameter at position 0 is required. ``` ### 5. `Object.defineProperty`与装饰器 装饰器的实现通常依赖于`Object.defineProperty`。这个方法允许我们精确地定义对象的属性，包括其可枚举性、可配置性和可写性，以及getter和setter。装饰器可以利用这个方法来添加额外的属性或修改原有的属性定义。 ### 6. 装饰器的组合 装饰器可以互相堆叠，以实现更复杂的逻辑。每个装饰器都会接收到上一个装饰器返回的描述符，然后返回新的描述符，最终结果会被应用到目标上。 ```javascript function log(target, key, descriptor) { descriptor.value = function(...args) { console.log(`Calling ${key} with`, args); return descriptor.value.apply(this, args); }; return descriptor; } function cache(target, key, descriptor) { let cache = {}; descriptor.value = function(...args) { let hash = JSON.stringify(args); if (hash in cache) { console.log('Using cached result'); return cache[hash]; } let result = descriptor.value.apply(this, args); cache[hash] = result; return result; }; return descriptor; } class MyClass { @log @cache compute(a, b) { console.time('compute'); let result = a + b; console.timeEnd('compute'); return result; } } ``` JavaScript的装饰器提供了一种优雅的方式来扩展和修改类及其成员，而无需直接修改源代码，这对于维护和组织大型代码库尤其有用。装饰器的使用使得代码更具可读性和可维护性，同时降低了模块之间的耦合度。