ES6 Decorator 怎么理解?使用场景

介绍

在ES6(ECMAScript 2015)中,Decorator是一种设计模式,它提供了一种优雅的方式来扩展或修改类和属性的行为。Decorator本质上是一个函数,它接收一个对象(通常是类或者类的属性)作为参数,然后返回一个增强后的对象。这种模式允许你在不修改原有代码的情况下,添加新的功能或者修改现有功能。

Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式

简单来讲,装饰者模式就是一种在不改变原类使用继承的情况下,动态地扩展对象功能的设计理论。

用法

这里定义一个士兵,这时候他什么装备都没有

kotlin 复制代码
class soldier{
    // 类定义
}

定义一个得到 AK 装备的函数,即装饰器

javascript 复制代码
function strong(target){
    // 执行一些操作,比如修改或增强类的行为
    target.AK = true
    // 返回修改后的类
    return target;
}

使用该装饰器对士兵进行增强

kotlin 复制代码
@strong
class soldier{
}

这时候士兵就有武器了

arduino 复制代码
soldier.AK // true

Docorator 修饰对象为下面两种:

  • 类的装饰
  • 类属性的装饰
类的装饰

当对类本身进行装饰的时候,能够接受一个参数,即类本身 如上述代码

类属性的装饰

当对类属性进行装饰的时候,能够接受三个参数:

  • 类的原型对象
  • 需要装饰的属性名
  • 装饰属性名的描述对象

首先定义一个 readonly 装饰器

bash 复制代码
function readonly(target, name, descriptor){
  descriptor.writable = false; // 将可写属性设为false
  return descriptor;
}

使用 readonly 装饰类的 name 方法

typescript 复制代码
class Person {
     @readonly
     name() { return `${this.first} ${this.last}` }
 }

相当于以下调用

bash 复制代码
readonly(Person.prototype, 'name', descriptor);

如果一个方法有多个装饰器,就像洋葱一样,先从外到内进入,再由内到外执行

less 复制代码
function dec(id){
    console.log('evaluated', id);
    return (target, property, descriptor) =>console.log('executed', id);
}
 
class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

外层装饰器 @dec(1) 先进入,但是内层装饰器 @dec(2) 先执行

注意

装饰器不能用于修饰函数,因为函数存在变量声明情况

ini 复制代码
var counter = 0; 
var add = function () {
  counter++;
};
 
@add
function foo() {
}

编译阶段,变成下面

ini 复制代码
var counter;
var add;
 
@add
function foo() {
}
 
counter = 0;
 
add = function () {
  counter++;
};

意图是执行后 counter 等于 1,但是实际上结果是 counter 等于 0

使用场景

基于 Decorator 强大的作用,我们能够完成各种场景的需求,下面简单列举几种:

使用 react-redux 的时候,如果写成下面这种形式,既不雅观也很麻烦

scala 复制代码
class MyReactComponent extends React.Component {}
 
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

通过装饰器就变得简洁多了

scala 复制代码
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

mixins,也可以写成装饰器,让使用更为简洁了

javascript 复制代码
function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}
 
// 使用
const Foo = {
  foo() { console.log('foo') }
};
 
@mixins(Foo)
class MyClass {}
 
let obj = new MyClass();
obj.foo() // "foo"

下面再讲讲 core-decorators.js 几个常见的装饰器

@antobind

autobind 装饰器使得方法中的 this 对象,绑定原始对象

typescript 复制代码
import { autobind } from 'core-decorators';
 
class Person {
  @autobind
  getPerson() {
    return this;
  }
}
 
let person = new Person();
let getPerson = person.getPerson;
 
getPerson() === person;
// true

@readonly

readonly 装饰器使得属性或方法不可写

ini 复制代码
import { readonly } from 'core-decorators';
 
class Meal {
  @readonly
  entree = 'steak';
}
 
var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

@deprecate

deprecatedeprecated 装饰器在控制台显示一条警告,表示该方法将废除

less 复制代码
 
import { deprecate } from 'core-decorators';
 
class Person {
  @deprecate
  facepalm() {}
 
  @deprecate('功能废除了')
  facepalmHard() {}
}
 
let person = new Person();
 
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
 
person.facepalmHard();
// DEPRECATION Person#facepalmHard: 功能废除了
相关推荐
小小小小宇1 分钟前
React 中 useMemo 和 useCallback 源码原理
前端
Trae首席推荐官4 分钟前
Trae 版本更新|支持自定义智能体、MCP等,打造个人专属“AI 工程师”
前端·trae
木三_copy4 分钟前
前端截图工具--html2canvas和html-to-image的一些踩坑
前端
小桥风满袖6 分钟前
Three.js-硬要自学系列7 (查看几何体顶点位置和索引、旋转,缩放,平移几何体)
前端·css·three.js
kim__jin9 分钟前
Vue3 使用项目内嵌iFrame
前端
独立开阀者_FwtCoder21 分钟前
# 一天 Star 破万的开源项目「GitHub 热点速览」
前端·javascript·面试
天天扭码32 分钟前
前端进阶 | 面试必考—— JavaScript手写定时器
前端·javascript·面试
梦雨生生1 小时前
拖拉拽效果加点击事件
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:全网最全的代码时钟效果
javascript·css·html
前端Hardy1 小时前
HTML&CSS:看这里,动态背景卡片效果
javascript·css·html