JS中裝飾器到底是什麼?

2021-09-24 09:37:38 字數 2101 閱讀 5243

因主要的技術棧是angular,對於angular採用的裝飾器特別認可,是一種優雅的攔截js的方式。

目前decorator仍處於stage 2的階段,不知道能否在es2019(es10)中推出,但乙個提案只要能進入stage 2,就基本會包括在以後的正式標準裡面。

有n多文章寫道decorator是es2016(es7)推出的,不知道這是從**流傳出來的,es2016最終特性根本就沒有decorator,可能的原因:decorator只是有望在es2016推出的,實際上並沒有。

以angular中的乙個元件為例,來說明裝飾器的主要用法和裝飾器到底是什麼:

@component()

@autounsubscribe()

export

class

transfercommoncomponent

implements

oninit

ngoninit()

// 跳轉到新增

@getproperty

gotoadd()

/* ngondestroy() */

}複製**

一.類裝飾器

autounsubscribe是乙個自動取消訂閱的裝飾器,可傳入引數指定某個可訂閱物件不自動取消訂閱。如不需要指定,可取消外層高階函式

export

function

autounsubscribe(params: string) }};

};}複製**

1.類裝飾器僅僅是乙個接受乙個引數的、被裝飾的類的建構函式,常用於修改、新增類的原型方法

2.類裝飾器傳入的constructor就是類的constructor(特指constructor(){}),如下圖紅色部分.類裝飾器作用於類的 constructor,並且觀察、修改或者替換乙個類的定義。

3.this是整個class,如圖天藍色外框 4.特殊的是:類的屬性方法在類的__proto__中,其他的是類的直接子集,如圖靑藍色部分

4.引數constructor === this.constructor

5.執行訂閱的時候,訂閱的是乙個subscribe物件,property.unsubscribe是從原型鏈上獲取的unsubscribe,如下圖綠色部分

二.類屬性(方法)裝飾器

// 下乙個事件佇列中執行的裝飾器

export

const timeoutdecorator = function (milliseconds: number = 0

) , milliseconds);

};console.log(descriptor);

return descriptor;

};};export

const getproperty = function (target, name, descriptor) ;

console.log(descriptor);

return descriptor;

};複製**

1.類方法裝飾器是乙個函式,函式引數就是object.defineproperty中的三個引數即:target(目標物件)、key(呼叫的屬性名)、descriptor(呼叫的屬性的描述,包括configurable、enumerable、writable、value)

2.類方法裝飾器的作用是把類中的方法放入裝飾器中執行,個人理解類似於管道或者***

3.類的普通屬性(不是方法的)也可以新增裝飾器,比如angular中的@viewchild,@viewcontent

三.修飾器本質就是編譯時執行的函式

注意,不管哪種修飾器,對類的行為的改變,是**編譯時(初始化時)發生的,而不是在執行時。這意味著,修飾器能在編譯階段執行**。也就是說,修飾器本質就是編譯時執行的函式。

四.特別注意:this

箭頭函式中的this和普通函式的this是不同的,注意函式體內是否有this,有的話就不要用箭頭函式了,詳情請搜尋箭頭函式的this

1.類裝飾器和類方法裝飾器是不同的,但本質都是乙個函式

2.類裝飾器常用於修改、新增類的原型方法,類方法裝飾器用於攔截類方法,需要掌握具體寫法

3.注意箭頭函式和this的搭配使用問題

Python中的 函式裝飾器到底是什麼?

在解釋 函式裝飾器之前,先說一下,類中的類方法和靜態方法。在python中完全支援定義類方法 靜態方法。這兩種方法很相似,python它們都使用類來呼叫 ps 用物件呼叫也可以 區別在於 python會自動繫結類方法的第乙個引數,類方法的第乙個引數會自動繫結到類本身 但對於靜態方法則不會自動繫結。類...

js中arguments到底是什麼?

總所周知,js是一門相當靈活的語言。當我們在js中在呼叫乙個函式的時候,我們經常會給這個函式傳遞一些引數,js把傳入到這個函式的全部引數儲存在乙個叫做arguments的東西裡面,那麼這到底是什麼東西?在js中萬物皆物件,甚至陣列字串函式都是物件。所以這個叫做arguments的東西也是個物件,而且...

js的arguments到底是什麼

類陣列物件 arguments 總所周知,js是一門相當靈活的語言。當我們在js中在呼叫乙個函式的時候,我們經常會給這個函式傳遞一些引數,js把傳入到這個函式的全部引數儲存在乙個叫做arguments的東西裡面,那麼這到底是什麼東西?在js中萬物皆物件,甚至陣列字串函式都是物件。所以這個叫做argu...