JavaScript装饰器

随笔7个月前发布 孟夕颜
86 0 0

一、装饰器简介

:官方ES6入门叫修饰器,本文以装饰器赘述。
通常在 Java 项⽬中⻅到如下图所示的代码,下图中涉及“@PostMapping”和“@ResponseBody” 在Java中通常解释为”注解“。通过这种编程⽅式,可以很⽅便地将⼀些逻辑封装起来,如:
Controller 的请求⽅法(get、post 等)和路由,参数的序列化等等。
如果不使⽤注解,那么上述这些逻辑就需要开发者⾃⼰去实现了。

JavaScript装饰器

装饰器是一种用于修改类的语法,它可以在不修改原始代码的情况下增强其功能。
装饰器可以实现AOP(面向切面编程)的功能
可见装饰器存在以下优点:

  • 减少冗余代码
  • 提高代码扩展性

二、JavaScript中的装饰器

2.1 装饰器演练

2.1.1 装饰器浏览器环境下如何运行

由于@ 符号后面的标识符被解析为一个装饰器。然而,装饰器目前还是处于实验阶段,不在所有的 JavaScript 环境中都被支持,此时需要babel转换。

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

创建一个.babelrc文件

{
    "presets": ["@babel/preset-env"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }

运行下列指令打包输出转义后的代码,在html文件中引入

npx babel test.js --out-file dist.js

2.1.2 简单演示

@test
class TestClass {
  constructor() {
    console.log('test ok')
  }
}

function test(t) {
  t.isTest = true
}
console.log(TestClass.isTest) // true

此时按照上述引入后,可以直接打印出结果。
上述代码中’@test’ 就是一个装饰器,修改testClass类,在它上添加了静态属性test。
因此装饰器基本行为如下:

@decorator
class A {} 
-------------------
// 等同于
class A {} 
A = decorator(A) || A

装饰器也可以接受参数(在包装一层函数)或者在原型对象上操作

@test(1)
class TestClass {
  constructor() {}
}

@test('加参数ok')
class BooClass {
  constructor() {}
}


function test(t) {
  return function(target) {
     target.isTest = t
  }
}
console.log(TestClass.isTest) // true
console.log(BooClass.isTest) // true

@test(1)
class TestClass {
  constructor() {}
}

function test(t) {
  return function(target) {
     target.prototype.isTest = t
  }
}
let a = new TestClass()
console.log(a.isTest) // 1

2.2 装饰器使用场景

2.2.1 类场景使用

1)类方法装饰器

属性装饰器表达式会在运行时当作函数被调用,传入下列3个参数:

  • 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
  • 成员的名字
  • 成员的描述对象

注:属性描述符不会做为参数传入属性装饰器,这与TypeScript是如何初始化属性装饰器的有关。

function readonly(target, name, descriptor) {
  // descriptor值类似Object.prototype原型
  // {
  //     value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // }
  descriptor.writable = false;
  return descriptor;
}
class Person {
  @readonly
  name() {
      console.log("~~~");
  }
}
const p = new Person();
p.name() // ~~~
p.name = () => {
  console.log('111')
} // dist.js:43 Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Person>'

将当前类设置为只读,等同于Object.defineProperty使用。类似包含可枚举,冻结等

2)类属性装饰器

属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:

  • 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
  • 成员的名字

注:属性描述符不会做为参数传入属性装饰器,这与TypeScript是如何初始化属性装饰器的有关

class MyTestableClass {
  @testable
  name;
  constructor(name) {
      this.name = name;
  }
}

function testable(target, name) {
  console.log(arguments)
}

JavaScript装饰器

3)复合装饰器

注:一个方法有多个修饰器,该方法会先从外到内进入修饰器,接着由内向外执行。【有点类似栈,先进后出】

function dec(id) {
  console.log('进入前:',id)
  // 若不写这段,会报错
  // Uncaught TypeError: decorator is not a function
  return (target, property, descriptor) => {
    console.log('进入后:', id)
  }
}

class Example {
  @dec(1)
  @dec(2)
  method() {}
}

// 进入前: 1
// 进入前: 2
// 进入后: 2
// 进入后: 1

2.2.3 无法用于函数

无法用于函数,是因为函数存在函数提升

let count = 0
const add = () => {
  count++
}

@add
const foo = () => {}
console.log(foo.add())

实际操作时,发现babel转义或者vscode强限制住装饰器只能支持

JavaScript装饰器

2.3 应用场景

关于装饰器可以便于我们封装一些工具场景,比如埋点、日志、发布等自动化场景。

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...