标签：function log 装饰 api params fun any

装饰器：装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为

通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法：普通装饰器（无法传参）、装饰参数器工厂（可传参）

类装饰器

类装饰器在类声明之前被声明（紧靠着声明类型），类装饰器应用于类构造函数，可以用来监视，修改或替换类定义，

//定义一个装饰器
function loge(params:any){
    console.log(params)   //输出当前类
} 

@loge 
class box{
    constructor(){

    }
    get(){

    }
}

编译后的js文件

 

 

 

 

 

 

 我们可以在这params的原型链上添加方法或者属性，也就是给当前类的原型链上添加一个方法或者属性

//定义一个装饰器
function loge(params:any){
    console.log(params)
    params.prototype.url='***'
} 

@loge   //不能有分号,挨着定义的类
class box{
    constructor(){

    }
    get(){

    }
}
var box1=new box()
console.log(box1)
console.log(box1.url)

 

 装饰器工厂

function login(params:string){
    return function(target:any){
            console.log(target)
            console.log(params)        

    }
}
@login("hello")
class fun{
    constructor(){

    }
    get(){

    }
}

编译后的js文件

 

 

@login("hello")中的hello赋值于params，函数fun赋值于target

 

 此时可以在target的原型链上添加方法

function login(params:string){
    return function(target:any){
            target.prototype.url=params     

    }
}
@login("hello")
class fun{
    constructor(){

    }
    get(){

    }
}
var a=new fun()
console.log(a.url)

 

 类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一的参数

如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明

function login(params:any){
    console.log(params)
}
@login
class fun{
    api:string|undefined;
    constructor(){
        this.api="我是fun中的api"
    }
    get(){
        console.log(this.api)
    }
}
var a=new fun()
a.get()

 

 此时我们重载参数或者构造函数

比如我们现在可以在login中修改constructorapi的值

function login(params:any){
    console.log(params)
    return class extends params{
        api:any="我是修改的"
        get(){
            console.log("我是修改的get")
        }
    }
}
@login
class fun{
    api:string|undefined;
    constructor(){
        this.api="我是fun中的api"
    }
    get(){
        console.log(this.api)
    }
}
var a=new fun()
a.get()

 

 属性装饰器

 属性装饰器会在运行时当做函数调用，传入以下2个参数

 

//类装饰器
function login(params:any){
    return function(target:any){

    }
}
//属性装饰器
function log(params:any){
    return function(target:any,attr:any){

    }
}
@login("hello")
class fun{
    @log("word")
    api:string|undefined;
    constructor(){
        this.api="我是fun中的api"
    }
    get(){
    }
}
var a=new fun()
a.get()

此时可以看到输出

 

 attr就是属性的名称

target就是当前类原型对象

//类装饰器
function login(params:any){
    return function(target:any){

    }
}
//属性装饰器
function log(params:any){
    return function(target:any,attr:any){
            target[attr]=params
    }
}
@login("hello")
class fun{
    @log("word")
    api:string|undefined;
    constructor(){
        this.api="我是fun中的api"
    }
    get(){
        console.log(this.api)
    }
}
var a=new fun()
a.get()

 

标签：function,log,装饰,api,params,fun,any
来源： https://www.cnblogs.com/keyeking/p/15517686.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。