es6 装饰器怎么理解

PHP中文网 • 2025年3月11日 18:39:29 • 编程技术 • 阅读 2

在es6中，装饰者模式是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论；装饰者其本质就是一个普通的函数，用于扩展类属性和类方法。使用装饰器的优点：1、代码可读性变强了，装饰器命名相当于一个注释；2、在不改变原有代码情况下，对原来功能进行扩展。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

怎么理解ES6中 Decorator 的？

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

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

ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法

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

class soldier{ }

登录后复制

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

function strong(target){    target.AK = true}

登录后复制

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

@strongclass soldier{}

登录后复制

这时候士兵就有武器了

soldier.AK // true

登录后复制

上述代码虽然简单，但也能够清晰看到了使用Decorator（装饰器）两大优点：

代码可读性变强了，装饰器命名相当于一个注释

在不改变原有代码情况下，对原来功能进行扩展

装饰器的用法

Docorator修饰对象为下面两种：

类的装饰

类属性的装饰

类的装饰

当对类本身进行装饰的时候，能够接受一个参数，即类本身

将装饰器行为进行分解，大家能够有个更深入的了解

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

登录后复制

下面@testable就是一个装饰器，target就是传入的类，即MyTestableClass，实现了为类添加静态属性

@testableclass MyTestableClass {  // ...}function testable(target) {  target.isTestable = true;}MyTestableClass.isTestable // true

登录后复制

如果想要传递参数，可以在装饰器外层再封装一层函数

function testable(isTestable) {  return function(target) {    target.isTestable = isTestable;  }}@testable(true)class MyTestableClass {}MyTestableClass.isTestable // true@testable(false)class MyClass {}MyClass.isTestable // false

登录后复制

类属性的装饰

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

类的原型对象

需要装饰的属性名

装饰属性名的描述对象

首先定义一个readonly装饰器

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

登录后复制

使用readonly装饰类的name方法

class Person {  @readonly  name() { return `${this.first} ${this.last}` }}

登录后复制

相当于以下调用

readonly(Person.prototype, 'name', descriptor);

登录后复制

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

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)先执行

注意

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

var counter = 0;var add = function () {  counter++;};@addfunction foo() {}

登录后复制

编译阶段，变成下面

var counter;var add;@addfunction foo() {}counter = 0;add = function () {  counter++;};

登录后复制

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

装饰器的使用场景

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

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

class MyReactComponent extends React.Component {}export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

登录后复制

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

@connect(mapStateToProps, mapDispatchToProps)export default class MyReactComponent extends React.Component {}

登录后复制

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

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对象，绑定原始对象

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

登录后复制

@readonly

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

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

deprecate或deprecated装饰器在控制台显示一条警告，表示该方法将废除

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: 功能废除了

登录后复制

【相关推荐：javascript视频教程、web前端】

以上就是es6 装饰器怎么理解的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2922511.html