摘要:描述符必須是這兩種形式之一不能同時是兩者。可以是任何有效的值數值,對象,函數等。當且僅當該屬性的為時,才能被賦值運算符改變。特點就是不影響之前對象的特性,而新增額外的職責功能。
前言
原文鏈接:[Nealyang/personalBlog]()
ES6 已經不必在過多介紹,在 ES6 之前,裝飾器可能并沒有那么重要,因為你只需要加一層 wrapper 就好了,但是現在,由于語法糖 class 的出現,當我們想要去在多個類之間共享或者擴展一些方法的時候,代碼會變得錯綜復雜,難以維護,而這,也正式我們 Decorator 的用武之地。
Object.defineProperty關于 Object.defineProperty 簡單的說,就是該方法可以精準的添加和修改對象的屬性
語法Object.defineProperty(obj,prop,descriptor)
ojb:要在其上定義屬性的對象
prop:要定義或修改的屬性的名稱
descriptor:將被定義或修改的屬性描述符
該方法返回被傳遞給函數的對象
在ES6中,由于 Symbol類型的特殊性,用Symbol類型的值來做對象的key與常規的定義或修改不同,而Object.defineProperty 是定義key為Symbol的屬性的方法之一。
通過賦值操作添加的普通屬性是可枚舉的,能夠在屬性枚舉期間呈現出來(for...in 或 Object.keys 方法), 這些屬性的值可以被改變,也可以被刪除。這個方法允許修改默認的額外選項(或配置)。默認情況下,使用 Object.defineProperty() 添加的屬性值是不可修改的
屬相描述符對象里目前存在的屬性描述符有兩種主要形式:數據描述符和存取描述符。數據描述符是一個具有值的屬性,該值可能是可寫的,也可能不是可寫的。存取描述符是由getter-setter函數對描述的屬性。描述符必須是這兩種形式之一;不能同時是兩者。
數據描述符和存取描述符均具有以下可選鍵值:
configurable
當且僅當該屬性的 configurable 為 true 時,該屬性描述符才能夠被改變,同時該屬性也能從對應的對象上被刪除。默認為 false
enumerable
當且僅當該屬性的enumerable為true時,該屬性才能夠出現在對象的枚舉屬性中。默認為 false。
數據描述符同時具有以下可選鍵值:
value
該屬性對應的值。可以是任何有效的 JavaScript 值(數值,對象,函數等)。默認為 undefined。
writable
當且僅當該屬性的writable為true時,value才能被賦值運算符改變。默認為 false
存取描述符同時具有以下可選鍵值:
get
一個給屬性提供 getter 的方法,如果沒有 getter 則為 undefined。當訪問該屬性時,該方法會被執行,方法執行時沒有參數傳入,但是會傳入this對象(由于繼承關系,這里的this并不一定是定義該屬性的對象)。默認為 undefined。
set
一個給屬性提供 setter 的方法,如果沒有 setter 則為 undefined。當屬性值修改時,觸發執行該方法。該方法將接受唯一參數,即該屬性新的參數值。默認為 undefined。
如果一個描述符不具有value,writable,get 和 set 任意一個關鍵字,那么它將被認為是一個數據描述符。如果一個描述符同時有(value或writable)和(get或set)關鍵字,將會產生一個異常
更多使用實例和介紹,參看:MDN
裝飾者模式在看Decorator之前,我們先看下裝飾者模式的使用,我們都知道,裝飾者模式能夠在不改變對象自身基礎上,在程序運行期間給對象添加指責。特點就是不影響之前對象的特性,而新增額外的職責功能。
like...this:
這段比較簡單,直接看代碼吧:
let Monkey = function () {} Monkey.prototype.say = function () { console.log("目前我只是個野猴子"); } let TensionMonkey = function (monkey) { this.monkey = monkey; } TensionMonkey.prototype.say = function () { this.monkey.say(); console.log("帶上緊箍咒,我就要忘記世間煩惱!"); } let monkey = new TensionMonkey(new Monkey()); monkey.say();
執行結果:
Decorator其實就是一個語法糖,背后其實就是利用es5的Object.defineProperty(target,name,descriptor),了解Object.defineProperty請移步這個鏈接:MDN文檔
其背后原理大致如下:
class Monkey{ say(){ console.log("目前,我只是個野猴子"); } }
執行上面的代碼,大致代碼如下:
Object.defineProperty(Monkey.prototype,"say",{ value:function(){console.log("目前,我只是個野猴子")}, enumerable:false, configurable:true, writable:true })
如果我們利用裝飾器來修飾他
class Monkey{ @readonly say(){console.log("現在我是只讀的了")} }
在這種裝飾器的屬性,會在Object.defineProperty為Monkey.prototype注冊say屬性之前,執行以下代碼:
let descriptor = { value:specifiedFunction, enumerable:false, configurable:true, writeable:true }; descriptor = readonly(Monkey.prototype,"say",descriptor)||descriptor; Object.defineProperty(Monkey.prototype,"say",descriptor);
從上面的偽代碼我們可以看出,Decorator只是在Object.defineProperty為Monkey.prototype注冊屬性之前,執行了一個裝飾函數,其屬于一個類對Object.defineProperty的攔截。所以它和Object.defineProperty具有一致的形參:
obj:作用的目標對象
prop:作用的屬性名
descriptor:針對該屬性的描述符
下面看下簡單的使用
在class中的使用創建一個新的class繼承自原有的class,并添加屬性
@name class Person{ sayHello(){ console.log(`hello ,my name is ${this.name}`) } } function name(constructor) { return class extends constructor{ name="Nealyang" } } new Person().sayHello() //hello ,my name is Nealyang
針對當前class修改(類似mixin)
@name @seal class Person { sayHello() { console.log(`hello ,my name is ${this.name}`) } } function name(constructor) { Object.defineProperty(constructor.prototype,"name",{ value:"一凨" }) } new Person().sayHello() //若修改一個屬性 function seal(constructor) { let descriptor = Object.getOwnPropertyDescriptor(constructor.prototype, "sayHello") Object.defineProperty(constructor.prototype, "sayHello", { ...descriptor, writable: false }) } new Person().sayHello = 1;// Cannot assign to read only property "sayHello" of object "#"
上面說到mixin,那么我就來模擬一個mixin吧
class A { run() { console.log("我會跑步!") } } class B { jump() { console.log("我會跳!") } } @mixin(A, B) class C {} function mixin(...args) { return function (constructor) { for (const arg of args) { for (let key of Object.getOwnPropertyNames(arg.prototype)) { if (key === "constructor") continue; Object.defineProperty(constructor.prototype, key, Object.getOwnPropertyDescriptor(arg.prototype, key)); } } } } let c = new C(); c.jump(); c.run(); // 我會跳! // 我會跑步!
截止目前我們貌似寫了非常多的代碼了,對。。。這篇,為了徹底搞投Decorator,這。。。只是開始。。。
在class成員中的使用這類的裝飾器的寫法應該就是我們最為熟知了,會接受三個參數:
如果裝飾器掛載在靜態成員上,則會返回構造函數,如果掛載在實例成員上,則返回類的原型
裝飾器掛載的成員名稱
Object.getOwnPropertyDescriptor的返回值
首先,我們明確下靜態成員和實例成員的區別
class Model{ //實例成員 method1(){} method2 = ()=>{} // 靜態成員 static method3(){} static method4 = ()=>{} }
method1 和method2 是實例成員,但是method1存在于prototype上,method2只有實例化對象以后才有。
method3和method4是靜態成員,兩者的區別在于是否可枚舉描述符的設置,我們通過babel轉碼可以看到:
上述代碼比較亂,簡單的可以理解為:
function Model () { // 成員僅在實例化時賦值 this.method2 = function () {} } // 成員被定義在原型鏈上 Object.defineProperty(Model.prototype, "method1", { value: function () {}, writable: true, enumerable: false, // 設置不可被枚舉 configurable: true }) // 成員被定義在構造函數上,且是默認的可被枚舉 Model.method4 = function () {} // 成員被定義在構造函數上 Object.defineProperty(Model, "method3", { value: function () {}, writable: true, enumerable: false, // 設置不可被枚舉 configurable: true })
可以看出,只有method2是在實例化時才賦值的,一個不存在的屬性是不會有descriptor的,所以這就是為什么在針對Property Decorator不傳遞第三個參數的原因,至于為什么靜態成員也沒有傳遞descriptor,目前沒有找到合理的解釋,但是如果明確的要使用,是可以手動獲取的。
就像上述的示例,我們針對四個成員都添加了裝飾器以后,method1和method2第一個參數就是Model.prototype,而method3和method4的第一個參數就是Model。
class Model { // 實例成員 @instance method1 () {} @instance method2 = () => {} // 靜態成員 @static static method3 () {} @static static method4 = () => {} } function instance(target) { console.log(target.constructor === Model) } function static(target) { console.log(target === Model) }函數、訪問器、屬性 三者裝飾器的使用
函數裝飾器的返回值會默認作為屬性的value描述符的存在,如果返回為undefined則忽略
class Model { @log1 getData1() {} @log2 getData2() {} } // 方案一,返回新的value描述符 function log1(tag, name, descriptor) { return { ...descriptor, value(...args) { let start = new Date().valueOf() try { return descriptor.value.apply(this, args) } finally { let end = new Date().valueOf() console.log(`start: ${start} end: ${end} consume: ${end - start}`) } } } } // 方案二、修改現有描述符 function log2(tag, name, descriptor) { let func = descriptor.value // 先獲取之前的函數 // 修改對應的value descriptor.value = function (...args) { let start = new Date().valueOf() try { return func.apply(this, args) } finally { let end = new Date().valueOf() console.log(`start: ${start} end: ${end} consume: ${end - start}`) } } }
訪問器的Decorator就是get set前綴函數了,用于控制屬性的賦值、取值操作,在使用上和函數裝飾器沒有任何區別
class Modal { _name = "Niko" @prefix get name() { return this._name } } function prefix(target, name, descriptor) { return { ...descriptor, get () { return `wrap_${this._name}` } } } console.log(new Modal().name) // wrap_Niko
對于屬性裝飾器是沒有descriptor返回的,并且裝飾器函數的返回值也會被忽略,如果我們需要修改某一個靜態屬性,則需要自己獲取descriptor
class Modal { @prefix static name1 = "Niko" } function prefix(target, name) { let descriptor = Object.getOwnPropertyDescriptor(target, name) Object.defineProperty(target, name, { ...descriptor, value: `wrap_${descriptor.value}` }) } console.log(Modal.name1) // wrap_Niko
對于一個實例的屬性,則沒有直接修改的方案,不過我們可以結合著一些其他裝飾器來曲線救國。
比如,我們有一個類,會傳入姓名和年齡作為初始化的參數,然后我們要針對這兩個參數設置對應的格式校驗
const validateConf = {} // 存儲校驗信息 @validator class Person { @validate("string") name @validate("number") age constructor(name, age) { this.name = name this.age = age } } function validator(constructor) { return class extends constructor { constructor(...args) { super(...args) // 遍歷所有的校驗信息進行驗證 for (let [key, type] of Object.entries(validateConf)) { if (typeof this[key] !== type) throw new Error(`${key} must be ${type}`) } } } } function validate(type) { return function (target, name, descriptor) { // 向全局對象中傳入要校驗的屬性名及類型 validateConf[name] = type } } new Person("Niko", "18") // throw new error: [age must be number]函數參數裝飾器
const parseConf = {} class Modal { @parseFunc addOne(@parse("number") num) { return num + 1 } } // 在函數調用前執行格式化操作 function parseFunc (target, name, descriptor) { return { ...descriptor, value (...arg) { // 獲取格式化配置 for (let [index, type] of parseConf) { switch (type) { case "number": arg[index] = Number(arg[index]) break case "string": arg[index] = String(arg[index]) break case "boolean": arg[index] = String(arg[index]) === "true" break } return descriptor.value.apply(this, arg) } } } } // 向全局對象中添加對應的格式化信息 function parse(type) { return function (target, name, index) { parseConf[index] = type } } console.log(new Modal().addOne("10")) // 11Decorator 用例 log
為一個方法添加 log 函數,檢查輸入的參數
let log = type => { return (target,name,decorator) => { const method = decorator.value; console.log(method); decorator.value = (...args) => { console.info(`${type} 正在進行:${name}(${args}) = ?`); let result; try{ result = method.apply(target,args); console.info(`(${type}) 成功 : ${name}(${args}) => ${result}`); }catch(err){ console.error(`(${type}) 失敗: ${name}(${args}) => ${err}`); } return result; } } } class Math { @log("add") add(a, b) { return a + b; } } const math = new Math(); // (add) 成功 : add(2,4) => 6 math.add(2, 4);time
用于統計方法執行的時間:
function time(prefix) { let count = 0; return function handleDescriptor(target, key, descriptor) { const fn = descriptor.value; if (prefix == null) { prefix = `${target.constructor.name}.${key}`; } if (typeof fn !== "function") { throw new SyntaxError(`@time can only be used on functions, not: ${fn}`); } return { ...descriptor, value() { const label = `${prefix}-${count}`; count++; console.time(label); try { return fn.apply(this, arguments); } finally { console.timeEnd(label); } } } } }debounce
對執行的方法進行防抖處理
class Toggle extends React.Component { @debounce(500, true) handleClick() { console.log("toggle") } render() { return ( ); } } function _debounce(func, wait, immediate) { var timeout; return function () { var context = this; var args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(function(){ timeout = null; }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } } } function debounce(wait, immediate) { return function handleDescriptor(target, key, descriptor) { const callback = descriptor.value; if (typeof callback !== "function") { throw new SyntaxError("Only functions can be debounced"); } var fn = _debounce(callback, wait, immediate) return { ...descriptor, value() { fn() } }; } }
更多關于 core-decorators 的例子后面再 Nealyang/PersonalBlog中補充,再加注釋說明。參考
Javascript裝飾器的妙用
ES7 Decorator 裝飾者模式
ES7之Decorators實現AOP示例
細說ES7 JavaScript Decorators
Using ES.later Decorators as Mixins
core-decorators
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103776.html
摘要:如下圖,我打開虛擬化之后,還是不能直觀的看到我是否打開了虛擬化。注群里有朋友說上的一個玩意兒報錯,可以直接根據那個地址下載,我看其它帖子都說放到這個下頭去,如果碰到那個錯誤了可以試試 作為偉大的21世紀接班人,怎么呢不會docker技術呢?好吧,由于種種原因,我的幾塊錢云服務器docker不能動它的配置,于是就想在win7上裝一個練練手~ 1、下載windows下的docker工具do...
摘要:如下圖,我打開虛擬化之后,還是不能直觀的看到我是否打開了虛擬化。注群里有朋友說上的一個玩意兒報錯,可以直接根據那個地址下載,我看其它帖子都說放到這個下頭去,如果碰到那個錯誤了可以試試 作為偉大的21世紀接班人,怎么呢不會docker技術呢?好吧,由于種種原因,我的幾塊錢云服務器docker不能動它的配置,于是就想在win7上裝一個練練手~ 1、下載windows下的docker工具do...
摘要:前戲補上參會的完整記錄,這個問題從一開始我就是準備自問自答的,希望可以通過這種形式把大會的干貨分享給更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戲 2016/3/21 補上參會的完整記錄,這個問題從一開始我就是準備自問自答的,希望可以通過這種形式把大會的干貨分享給更多人。 ...
閱讀 1793·2021-11-18 10:02
閱讀 3524·2021-11-16 11:45
閱讀 1786·2021-09-10 10:51
閱讀 2106·2019-08-30 15:43
閱讀 1372·2019-08-30 11:23
閱讀 1484·2019-08-29 11:07
閱讀 1892·2019-08-23 17:05
閱讀 1394·2019-08-23 16:14