這里給大家分享我在網(wǎng)上總結出來的一些知識，希望對大家有所幫助
一、介紹
Decorator，即裝飾器，從名字上很容易讓我們聯(lián)想到裝飾者模式
簡單來講，裝飾者模式就是一種在不改變原類和使用繼承的情況下，動態(tài)地擴展對象功能的設計理論。
ES6中Decorator功能亦如此，其本質也不是什么高大上的結構，就是一個普通的函數(shù)，用于擴展類屬性和類方法
這里定義一個士兵，這時候他什么裝備都沒有
class soldier{
}
定義一個得到 AK 裝備的函數(shù)，即裝飾器
function strong(target){
target.AK = true
}
使用該裝飾器對士兵進行增強
@strong
class soldier{
}
這時候士兵就有武器了
soldier.AK // true
上述代碼雖然簡單，但也能夠清晰看到了使用Decorator兩大優(yōu)點：
- 代碼可讀性變強了，裝飾器命名相當于一個注釋
- 在不改變原有代碼情況下，對原來功能進行擴展
二、用法
Docorator修飾對象為下面兩種：
- 類的裝飾
- 類屬性的裝飾
類的裝飾
當對類本身進行裝飾的時候，能夠接受一個參數(shù)，即類本身
將裝飾器行為進行分解，大家能夠有個更深入的了解
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
下面@testable就是一個裝飾器，target就是傳入的類，即MyTestableClass，實現(xiàn)了為類添加靜態(tài)屬性
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
如果想要傳遞參數(shù)，可以在裝飾器外層再封裝一層函數(shù)
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
類屬性的裝飾
當對類屬性進行裝飾的時候，能夠接受三個參數(shù)：
- 類的原型對象
- 需要裝飾的屬性名
- 裝飾屬性名的描述對象
首先定義一個readonly裝飾器
function readonly(target, name, descriptor){
descriptor.writable = false; // 將可寫屬性設為false
return descriptor;
}
使用readonly裝飾類的name方法
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
相當于以下調用
readonly(Person.prototype, 'name', descriptor);
如果一個方法有多個裝飾器，就像洋蔥一樣，先從外到內(nèi)進入，再由內(nèi)到外執(zhí)行
function dec(id){
console.log('evaluated', id);
return (target, property, descriptor) =>console.log('executed', id);
}
class Example {
@dec(1)
@dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1
外層裝飾器@dec(1)先進入，但是內(nèi)層裝飾器@dec(2)先執(zhí)行
注意
裝飾器不能用于修飾函數(shù)，因為函數(shù)存在變量聲明情況
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
編譯階段，變成下面
var counter;
var add;
@add
function foo() {
}
counter = 0;
add = function () {
counter++;
};
意圖是執(zhí)行后counter等于 1，但是實際上結果是counter等于 0
三、使用場景
基于Decorator強大的作用，我們能夠完成各種場景的需求，下面簡單列舉幾種：
使用react-redux的時候，如果寫成下面這種形式，既不雅觀也很麻煩
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
通過裝飾器就變得簡潔多了
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
將mixins，也可以寫成裝飾器，讓使用更為簡潔了
function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list);
};
}
// 使用
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // "foo"
下面再講講core-decorators.js幾個常見的裝飾器
@antobind
autobind裝飾器使得方法中的this對象，綁定原始對象
import { autobind } from 'core-decorators';
class Person {
@autobind
getPerson() {
return this;
}
}
let person = new Person();
let getPerson = person.getPerson;
getPerson() === person;
// true
@readonly
readonly裝飾器使得屬性或方法不可寫文章來源：http://www.zghlxwxcb.cn/news/detail-838652.html
import { readonly } from 'core-decorators';
class Meal {
@readonly
entree = 'steak';
}
var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]
@deprecate
deprecate或deprecated裝飾器在控制臺顯示一條警告，表示該方法將廢除文章來源地址http://www.zghlxwxcb.cn/news/detail-838652.html
import { deprecate } from 'core-decorators';
class Person {
@deprecate
facepalm() {}
@deprecate('功能廢除了')
facepalmHard() {}
}
let person = new Person();
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
person.facepalmHard();
// DEPRECATION Person#facepalmHard: 功能廢除了
參考文獻
- https://es6.ruanyifeng.com/#docs/decorator
到了這里，關于你是怎么理解ES6中 Decorator 的？使用場景？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
