摘要:更多前端技术和知识点,搜索订阅号菌订阅不会改变原有的对象,而是在其基础上进行拓展。
⭐️ 更多前端技术和知识点,搜索订阅号 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 的技术文章,只谈技术不谈八卦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105996.html
摘要:本文从装饰模式出发,聊聊中的装饰器和注解。该函数的函数名。不提供元数据的支持。中的元数据操作可以通过包来实现对于元数据的操作。 随着Typescript的普及,在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发,聊聊Typescipt中的装饰器和注解。 什么是装饰者模式 Typescript中的装饰器 Typescr...
摘要:下装饰者的实现了解了装饰者模式和的概念之后,我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑,如果以后需要自动上传功能,也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式 当我们拍了一张照片准备发朋友...
摘要:兼容的正则表达式已经实现了很多使用不同解析引擎的正则函数。中主要有两个正则解析器一个称为,另一个称为兼容正则表达式。在中,每个正则表达式模式都是使用符合格式的字符串。 原文链接: Getting Started with PHP Regular Expressions Last-Modified: 2019年5月10日16:23:19译者注: 本文是面向0正则基础的phper, 很多...
摘要:拦截实例作为构造函数调用的操作,比如。方法等同于,这提供了一种不使用,来调用构造函数的方法。方法对应,返回一个布尔值,表示当前对象是否可扩展。这是的一个提案,目前转码器已经支持。别名或修饰器在控制台显示一条警告,表示该方法将废除。 Proxy Proxy 这个词的原意是代理,用在这里表示由它来代理某些操作,可以译为代理器,即用自己的定义覆盖了语言的原始定义。ES6 原生提供 Proxy...
阅读 2831·2023-04-26 02:23
阅读 1570·2021-11-11 16:55
阅读 3149·2021-10-19 11:47
阅读 3352·2021-09-22 15:15
阅读 1975·2019-08-30 15:55
阅读 1033·2019-08-29 15:43
阅读 1288·2019-08-29 13:16
阅读 2188·2019-08-29 12:38