@decorator 裝飾器

@decorator 裝飾器是 es7 更新的提案。需要搭建執行環境 傳送門

裝飾器的主要用途

1. 裝飾類
2. 裝飾屬性

裝飾類的寫法

@FooDecorator
class Foo {

}

function FooDecorator(target){
    // target 就是這個 class 的原型物件
}
複製程式碼

裝飾屬性的寫法

class Bar {
    @attrDecorator
    attr(){

    }
}

function attrDecorator(target,name,discriptor){
    // target 就是這個 class 的原型物件
    // name 就是 要裝飾的屬性名 attr
    // discriptor 是這個被裝飾屬性的描述項 
    /*  
        {
            configurable: true
            zenumerable: false
            value: ƒ attr()
            writable: false
        }   
    */
    return discriptor
複製程式碼

裝飾類

下面的裝飾器給 MyClass 這個類新增了一個靜態方法 isMyClass 用於判斷一個例項是否屬於該類或該類的派生類。

以及給 MyClass 的所有例項新增了一個共享屬性 author

@MyClassDecorator
class MyClass {
	constructor(){
	}
}

function MyClassDecorator(target){
	target.isMyClass = function(val){
        return val instanceof target
    }
	target.prototype.author = 'PsChina'
}
複製程式碼

裝飾屬性

下面的裝飾器給 MyClass 的所有例項的 getType 屬性設定為僅為可讀不可更改的屬性 readonly。

class MyClass {
	constructor(){
		this.type="myClass"
	}
	@readonly
	getType(){
		return this.type
	}
}

function readonly(target, key, discriptor){
	discriptor.writable = false
	return discriptor
}
複製程式碼

多個裝飾器

下面的程式碼給 getType 這個函式使用了兩個裝飾器 readonly 和 logHello

readonly 這個裝飾器使得 getType 不可更改。

logHello 這個裝飾器會使得每次呼叫 getType 這個函式時會先在控制檯輸出 hello 。

class MyClass {
	constructor(){
		this.type="myClass"
	}
	@readonly
	@logHello
	getType(){
		return this.type
	}
}

function readonly(target, key, discriptor){
	discriptor.writable = false
	return discriptor
}

function logHello(target, key, discriptor){
	const oldFn = target[key]
    target[key] = function(...rest){
        console.log('Hello')
        return oldFn.call(this,...rest)
    }
    return target
}
複製程式碼

demo

原文連結

(完)