代码编织梦想

TypeScript注解风格的装饰器

@decorate装饰器函数的作用是在调用eat方法之前执行执行自定义的功能

function decorate(target, property, descriptor) {  
  var oldValue = descriptor.value
  descriptor.value = msg => {
    console.log('先洗手')
    msg = `后 ${msg}`
    return oldValue.apply(null, [msg])
  }
  return descriptor
}

class Log {
  @decorate
  eat(msg) {
      console.log(msg)
  }
}

const log = new Log()
log.eat('吃饭')

运行结果如下:
在这里插入图片描述

用js实现以上@decorate装饰器

class Log {
  eat(msg) {
      console.log(msg)
  }
}

const decorate = (target, property) => {
  var old = target.prototype.eat
  target.prototype[property] = msg => {
      console.log('先洗手 2')
      msg = `后 ${msg} 2`
      old(msg)
  }
}

decorate(Log, 'eat')  //相当于 eat 上面的 @decorate

const log = new Log()
log.eat('吃饭')

运行结果如下:
在这里插入图片描述

TypeScript装饰器的底层实现原理如下

class Log {
  eat(msg) {
      console.log(msg)
  }
}

function decorate(target, property, descriptor) {  
  var oldValue = descriptor.value
  descriptor.value = msg => {
    console.log('先洗手 3')
    msg = `后 ${msg} 3`
    return oldValue.apply(null, [msg])
  }
  return descriptor
}

const anotation = (target, proterty, decorate) => {
  const descriptor = decorate(
    Log.prototype,
    proterty,
    Object.getOwnPropertyDescriptor(Log.prototype, proterty)
  )
  Object.defineProperty(Log.prototype, proterty, descriptor)
}
anotation(Log, 'eat', decorate)  //相当于 eat 上面的 @decorate


const log = new Log()
log.eat('吃饭')

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_41614928/article/details/111085571

装饰器详解-爱代码爱编程

装饰器Decorator Pattern 向已有的对象添加新的功能,同时又不改变其结构 目的:动态给一个对象添加新的功能,装饰器相比于生成子类更加灵活 解决:我们为了扩展一个类使用继承方式,导致子类很冗余。 优点:装饰类和被装饰类可以独立发展,不会相互耦合、 缺点:多层装饰比较复杂 使用场景:扩展一个类的功能,动态增加一个类的功能,和动态撤销

python装饰器快速入门-爱代码爱编程

全栈工程师开发手册 (作者:陈玓玏) python教程全解 学python过程中,常会看到一类用法,就是在函数前面加个@***,类似以下: @log def convert(a): return str(a) 很多的python库也有这个用法,比如Ray,比如pysnooper,都只需要引入这个python库,然后在需要

Zhong__Python装饰器使用-爱代码爱编程

时间:2020.12.09 环境:Python3 目的:装饰器使用 说明: 作者:Zhong QQ交流群:121160124 欢迎加入!   Python装饰器常用来对已有函数或对象提供一种无侵入、不改变原数据及结构的方式来达到增加额外功能的目的。例如,用户浏览页面前先进行检验是否用户已登录,通过登录验证后才能继续浏览网页;又例如对一个函数执行

Angular学习之核心文件分析-爱代码爱编程

开始学习Angular啦 首先分析一下Angualr项目里的一些核心文件,了解他们是做什么的 1.根模块 app.module.ts 这个文件是 Angular 的根模块,告诉 Angular 如何组装应用 // BrowserModule 浏览器解析的模块 import { BrowserModule } from '@angular/platfor

手写Promise系列之Promise.allSettled-爱代码爱编程

手写Promise系列之Promise.allSettled es2020引入只有等到所有这些参数实例都返回结果(不管是fulfilled还是rejected),才会结束 举个例子: let p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resol

手写Promise系列之Promise.race-爱代码爱编程

手写Promise系列之Promise.race Promise.race(iterable) 方法返回一个 promise迭代器中的promise谁先执行完毕就用谁的结果,那个率先改变的 Promise 实例的返回值,就传递那个给p的回调函数。 看下面一个示例 let p1 = new Promise((resolve,reject)=>

TS 永远达不到的类型never-爱代码爱编程

避免出现新增了联合类型没有对应的实现,目的就是写出类型绝对安全的代码。 TypeScript 2.0引入了一个新原始类型never。never类型表示值的类型从不出现。具体而言,never是永不返回函数的返回类型,也是变量在类型保护中永不为true的类型。 never类型具有以下特征: never是所有类型的子类型并且可以赋值给所有类型。没有类

TS相比JS-爱代码爱编程

语雀文章链接:TS相比JS Typescript = JavaScript + Type,是JavaScript的超集 JS是动态类型语言。C++,Java 是静态类型语言。Typescript 是静态类型语言,但是比较灵活。 TS的编程体验既能享受静态类型带来的优点,如 IDE全方位的开发辅助和严格的代码检查;又能让代码像 Javascri

typescript第三天—接口和类-爱代码爱编程

接口 作一个简历的自动筛选程序,很简单。年龄小于 25 岁,胸围大于 90 公分的,可以进入面试环节。我们最开始的写法是这样的。(新建一个文件 Demo8.ts,然后编写如下代码) const screenResume = (name: string, age: number, bust: number) => { age < 24 &