🧷JavaScript修饰器的使用研究

tags
dev
frontend
javascript
type
Post
summary
status
Published
slug
research-on-the-use-of-javascript-decorators
date
Jan 27, 2021
在学习Salesforce的Lightning Web Components框架时,时常见到修饰器的使用。
 
修饰器用来解决两个问题:
  1. 不同类之间共享方法
  1. 编译期对类和方法的行为进行改变
使用时在类或方法的上面加一个@符,有点像Java里的注解,但含义不太一致。

例子1:修饰类

@setProp class User{} function setProp(target){ target.age = 30; } console.log(User.age);
这个例子的含义就是:使用setProp方法修饰User类,并为User类增加了一个age的属性。此时修饰方法setProp中的参数target代表User类本身。

例子2: 使用额外参数修饰类

@setProp(20) class User{} function setProp(value){ return function(target){ target.age = value; } } console.log(User.age); //20
此时修饰方法setProp提供了一个途径,借助修饰器动态地改变User类静态属性age的值。
function testable(target){ target.prototype.isTestable = true; } @testable class MyTestableClass{ } let obj = new MyTestableClass(); obj.isTestable; //true

例子3:修饰方法

类的方法的修饰器函数的第一个参数target指向类的原型对象。这是因为类中的方法实际上是作用于实例对象上的
//Example1 class Person{ @readonly getName(){ return `${this.first} ${this.last}` } } function readonly(target, name, descriptor){ // descriptor对象原来的值如下: // { // value: specifiedFunction, // enumerable: false, // configurable: true, // writable: true // } descriptor.writable = false; return descriptor; } //Example2 class Math{ @log add(a, b){ return a + b; } function log(target, name, descriptor){ const oldValue = descriptor.value; descriptor.value = function(){ console.log(`调用了函数${name} `, arguments); return oldValue.apply(this, arguments); }; return descriptor; } }
在上述例子2中,@log修饰器的作用就是在执行原始的操作之前,执行一次console.log,从而达到输出日志的目的。
修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升;类是不会提升的。

lucky_bricks © 2018 - 2024