修饰器模式

Salamander 发布于2019-08-26 10:20 / 2354人阅读

摘要：更多前端技术和知识点，搜索订阅号菌订阅不会改变原有的对象，而是在其基础上进行拓展。

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

不会改变原有的对象，而是在其基础上进行拓展。

实现原理

创建一个 A 类

A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能

实现代码 ts 修饰器语法

如下是 ts 官方文档的例子：

https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

函数式

let obj = {
  lname: "young",
  fname: "oliver",
  gender: "male",
  getInfo() {
    return "get user infomation";
  }
};

// 这时需要添加一些方法，可以使用修饰器模式
// 这是需要添加的方法
function getGender() {
  console.log(this.gender);
}
function getFullName() {
  console.log(`${this.fname} ${this.lname}`);
}

obj.getInfo = function() {
  let getInfo = obj.getInfo;
  return function() {
    getInfo();
    getGender.call(obj); // 需要手动绑定 this
    getFullName.call(obj); // 需要手动绑定 this
  };
};

obj.getInfo()();

AOP 装饰函数

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(new(self), arguments)
    return self.apply(new(self), arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(new(self), arguments)
    return fn.apply(new(self), arguments)
  }
}

const wear1 = function() {
  console.log("穿上第一件衣服")
}

const wear2 = function() {
  console.log("穿上第二件衣服")
}

const wear3 = function() {
  console.log("穿上第三件衣服")
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

缺点是在 Function 的原型链上增加了 before、after 导致原生函数被污染

改成以下：

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦

GPU云服务器云服务器修饰器 Python修饰器 python类修饰器装饰器模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105996.html

聊聊Typescript中的设计模式——装饰器篇(decorators)

摘要：本文从装饰模式出发，聊聊中的装饰器和注解。该函数的函数名。不提供元数据的支持。中的元数据操作可以通过包来实现对于元数据的操作。随着Typescript的普及，在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发，聊聊Typescipt中的装饰器和注解。什么是装饰者模式 Typescript中的装饰器 Typescr...

yiliang 2019-08-23 14:06 评论0 收藏0
Python装饰器

摘要：一引用书流畅的书二基本概念问题装饰器是什么解答严格来说，装饰器只是语法糖，装饰器是可调用的对象，可以像常规的可调用对象那样调用，特殊的地方是装饰器的参数是一个函数问题装饰器有什么特性解答装饰器有个特性，一是可以把被装饰的函数替换成其他函数，一, 引用 [书] 流畅的Python [书] Effective Python 二, 基本概念 showImg(https://segme...

aisuhua 2019-07-30 14:33 评论0 收藏0
5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

摘要：下装饰者的实现了解了装饰者模式和的概念之后，我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑，如果以后需要自动上传功能，也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式当我们拍了一张照片准备发朋友...

chunquedong 2019-08-23 18:16 评论0 收藏0
PHP 正则表达式入门 Getting Started with PHP Regular Expre

摘要：兼容的正则表达式已经实现了很多使用不同解析引擎的正则函数。中主要有两个正则解析器一个称为，另一个称为兼容正则表达式。在中，每个正则表达式模式都是使用符合格式的字符串。原文链接: Getting Started with PHP Regular Expressions Last-Modified: 2019年5月10日16:23:19译者注: 本文是面向0正则基础的phper, 很多...

zhangke3016 2019-07-01 12:46 评论0 收藏0
ES6学习笔记4-Proxy、Reflect、Decorator、Module

摘要：拦截实例作为构造函数调用的操作，比如。方法等同于，这提供了一种不使用，来调用构造函数的方法。方法对应，返回一个布尔值，表示当前对象是否可扩展。这是的一个提案，目前转码器已经支持。别名或修饰器在控制台显示一条警告，表示该方法将废除。 Proxy Proxy 这个词的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器，即用自己的定义覆盖了语言的原始定义。ES6 原生提供 Proxy...

lushan 2019-08-20 17:02 评论0 收藏0