[TOC] >[success] # 裝飾器裝飾在 --- 類 ~~~ 1.參數 當前被修飾的類 ~~~ >[danger] ##### @+'函數名' 使用方式 -- 給類加自定義的靜態屬性或者靜態方法 ~~~ 1.可以給裝飾的類添加'靜態方法' ~~~ ~~~ function setAge(target){ target.age = '17' } @setAge class MyPerson{} console.log(MyPerson.age) // 17 ~~~ >[danger] ##### 推論類裝飾器，函數中參數target指向 ~~~ 1.根據上面的案例，可以發現裝飾器函數有一個參數，這個'參數target' 指向是誰?如果根據現有的現象，跟參數'traget'增加了一個age屬性，這個 屬性最后成為了類'MyPerson' 的靜態屬性，推論出'target'很有可能指向 當前類 2.下面將通過代碼進行驗證是否符合我們的想法，驗證代碼的思路用一個 變量來接受'target',利用這個變量在和'MyPerson' 去比較 ~~~ * 驗證代碼 ~~~ let targetType = null function setAge(target){ targetType = target target.age = '17' } @setAge class MyPerson{} console.log(targetType === MyPerson) // true console.log(targetType === MyPerson.prototype.constructor) // true ~~~ >[danger] ##### @+'函數' 使用工廠方式 -- 給類加自定義的靜態屬性或者靜態方法 ~~~ 1.這個使用返回的內容頁必須是一個函數 2.這樣就可以給裝飾器進行傳參 ~~~ ~~~ function setAge(number){ return (target)=>{ target.age = 17+number } } @setAge(3) class MyPerson{} console.log(MyPerson.age) // 20 ~~~ >[danger] ##### 通過裝飾器給實例添加--屬性和方法 ~~~ 1.首先我們要給實例添加屬性或者一些方法，肯定是要通過原型鏈'prototype'的形式 ，有因此修飾類的裝飾器中的參數執行的正好是類本身，因此只要給這個參數的原型 鏈上添加屬性和方法就可以實現給實例添加 ~~~ ~~~ function setAge(number){ return (target)=>{ target.prototype.age = 17 } } @setAge(3) class MyPerson{} const myPerson = new MyPerson() console.log(myPerson.age) // 17 ~~~ >[danger] ##### 阮一峰老師文章中的利用裝飾混入多個屬性案例 ~~~javascript // mixins.js export function mixins(...list) { return function (target) { Object.assign(target.prototype, ...list) } } // main.js import { mixins } from './mixins' const Foo = { foo() { console.log('foo') } }; @mixins(Foo) class MyClass {} let obj = new MyClass(); obj.foo() // 'foo' ~~~ 上面代碼通過修飾器`mixins`，把`Foo`對象的方法添加到了`MyClass`的實例上面。可以用`Object.assign()`模擬這個功能。 ~~~javascript const Foo = { foo() { console.log('foo') } }; class MyClass {} Object.assign(MyClass.prototype, Foo); let obj = new MyClass(); obj.foo() // 'foo' ~~~ >[danger] ##### 用class 裝飾class ~~~ 1.目前發現的已知問題，方法會執行兩次并且裝飾器中的為準 2.最后'MyPerson' 被替換成了裝飾器返回的class，即變相繼承， 也就是裝飾器返回的類替換了被裝飾的類 ~~~ ~~~ function setAge(target){ return class extends target { constructor(){ super() this.name = '1' this.age = 2 } speak(){ console.log('好酷') } toDo(){ console.log('唱跳rap') } } } @setAge class MyPerson{ constructor(){ this.sex= '男' } speak1(){ console.log('我好酷') } } const myPerson = new MyPerson() console.log(myPerson.age) console.log(myPerson.name) console.log(myPerson.sex) console.log(myPerson.speak()) console.log(myPerson.toDo()) console.log(myPerson.speak1()) ~~~ * 打印結果  >[danger] ##### 根據上面的案例反推，如果裝飾器中的返回類沒有繼承被裝飾類 ~~~ 1.只能使用裝飾器中返回類的屬性和方法，不能使用被裝飾器的屬性和方法 2.但和上面有一樣的問題方法會被執行兩次不知道是不是因為'babelrc'的bug ~~~ ~~~ function setAge(target){ return class { constructor(){ this.name = '1' this.age = 2 } speak(){ console.log('好酷') } toDo(){ console.log('唱跳rap') } } } @setAge class MyPerson{ constructor(){ this.sex= '男' } speak1(){ console.log('我好酷') } } const myPerson = new MyPerson() console.log(myPerson.age) console.log(myPerson.name) console.log(myPerson.speak()) console.log(myPerson.toDo()) ~~~ * 打印結果