本篇內(nèi)容介紹了“es6裝飾器是什么及怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為張家川回族自治企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作，張家川回族自治網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

在es6中，裝飾者模式是一種在不改變原類和使用繼承的情況下，動(dòng)態(tài)地?cái)U(kuò)展對象功能的設(shè)計(jì)理論；裝飾者其本質(zhì)就是一個(gè)普通的函數(shù)，用于擴(kuò)展類屬性和類方法。使用裝飾器的優(yōu)點(diǎn)：1、代碼可讀性變強(qiáng)了，裝飾器命名相當(dāng)于一個(gè)注釋；2、在不改變原有代碼情況下，對原來功能進(jìn)行擴(kuò)展。

Decorator，即裝飾器，從名字上很容易讓我們聯(lián)想到裝飾者模式

簡單來講，裝飾者模式就是一種在不改變原類和使用繼承的情況下，動(dòng)態(tài)地?cái)U(kuò)展對象功能的設(shè)計(jì)理論。

ES6中Decorator功能亦如此，其本質(zhì)也不是什么高大上的結(jié)構(gòu)，就是一個(gè)普通的函數(shù)，用于擴(kuò)展類屬性和類方法

這里定義一個(gè)士兵，這時(shí)候他什么裝備都沒有

class soldier{ 
}

定義一個(gè)得到 AK 裝備的函數(shù)，即裝飾器

function strong(target){
    target.AK = true
}

使用該裝飾器對士兵進(jìn)行增強(qiáng)

@strong
class soldier{
}

這時(shí)候士兵就有武器了

soldier.AK // true

上述代碼雖然簡單，但也能夠清晰看到了使用Decorator（裝飾器）兩大優(yōu)點(diǎn)：

• 代碼可讀性變強(qiáng)了，裝飾器命名相當(dāng)于一個(gè)注釋

• 在不改變原有代碼情況下，對原來功能進(jìn)行擴(kuò)展

裝飾器的用法

Docorator修飾對象為下面兩種：

• 類的裝飾

• 類屬性的裝飾

類的裝飾

當(dāng)對類本身進(jìn)行裝飾的時(shí)候，能夠接受一個(gè)參數(shù)，即類本身

將裝飾器行為進(jìn)行分解，大家能夠有個(gè)更深入的了解

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

下面@testable就是一個(gè)裝飾器，target就是傳入的類，即MyTestableClass，實(shí)現(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

類屬性的裝飾

當(dāng)對類屬性進(jìn)行裝飾的時(shí)候，能夠接受三個(gè)參數(shù)：

• 類的原型對象

• 需要裝飾的屬性名

• 裝飾屬性名的描述對象

首先定義一個(gè)readonly裝飾器

function readonly(target, name, descriptor){
  descriptor.writable = false; // 將可寫屬性設(shè)為false
  return descriptor;
}

使用readonly裝飾類的name方法

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

相當(dāng)于以下調(diào)用

readonly(Person.prototype, 'name', descriptor);

如果一個(gè)方法有多個(gè)裝飾器，就像洋蔥一樣，先從外到內(nèi)進(jìn)入，再由內(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)先進(jìn)入，但是內(nèi)層裝飾器@dec(2)先執(zhí)行

注意

裝飾器不能用于修飾函數(shù)，因?yàn)楹瘮?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，但是實(shí)際上結(jié)果是counter等于 0

裝飾器的使用場景

基于Decorator強(qiáng)大的作用，我們能夠完成各種場景的需求，下面簡單列舉幾種：

使用react-redux的時(shí)候，如果寫成下面這種形式，既不雅觀也很麻煩

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幾個(gè)常見的裝飾器

@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裝飾器使得屬性或方法不可寫

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裝飾器在控制臺(tái)顯示一條警告，表示該方法將廢除

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: 功能廢除了

“es6裝飾器是什么及怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：es6裝飾器是什么及怎么使用
本文鏈接：http://jinyejixie.com/article48/pggoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、小程序開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)