修飾器模式

Salamander 發布于2019-08-26 10:20 / 2382人閱讀

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱不會改變原有的對象，而是在其基礎上進行拓展。

?? 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

不會改變原有的對象，而是在其基礎上進行拓展。

實現原理

創建一個 A 類

A 類中的屬性和方法使用 ES7 中的修飾器語法對類和類的屬性增加功能

實現代碼 ts 修飾器語法

如下是 ts 官方文檔的例子：

https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

函數式

let obj = {
  lname: "young",
  fname: "oliver",
  gender: "male",
  getInfo() {
    return "get user infomation";
  }
};

// 這時需要添加一些方法，可以使用修飾器模式
// 這是需要添加的方法
function getGender() {
  console.log(this.gender);
}
function getFullName() {
  console.log(`${this.fname} ${this.lname}`);
}

obj.getInfo = function() {
  let getInfo = obj.getInfo;
  return function() {
    getInfo();
    getGender.call(obj); // 需要手動綁定 this
    getFullName.call(obj); // 需要手動綁定 this
  };
};

obj.getInfo()();

AOP 裝飾函數

// 前置代碼
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(new(self), arguments)
    return self.apply(new(self), arguments)
  }
}

// 后置代碼
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(new(self), arguments)
    return fn.apply(new(self), arguments)
  }
}

const wear1 = function() {
  console.log("穿上第一件衣服")
}

const wear2 = function() {
  console.log("穿上第二件衣服")
}

const wear3 = function() {
  console.log("穿上第三件衣服")
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

缺點是在 Function 的原型鏈上增加了 before、after 導致原生函數被污染

改成以下：

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦

GPU云服務器云服務器修飾器 Python修飾器 python類修飾器裝飾器模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105996.html

聊聊Typescript中的設計模式——裝飾器篇(decorators)

摘要：本文從裝飾模式出發，聊聊中的裝飾器和注解。該函數的函數名。不提供元數據的支持。中的元數據操作可以通過包來實現對于元數據的操作。 ??隨著Typescript的普及，在KOA2和nestjs等nodejs框架中經常看到類似于java spring中注解的寫法。本文從裝飾模式出發，聊聊Typescipt中的裝飾器和注解。什么是裝飾者模式 Typescript中的裝飾器 Typescr...

yiliang 2019-08-23 14:06 評論0 收藏0
Python裝飾器

摘要：一引用書流暢的書二基本概念問題裝飾器是什么解答嚴格來說，裝飾器只是語法糖，裝飾器是可調用的對象，可以像常規的可調用對象那樣調用，特殊的地方是裝飾器的參數是一個函數問題裝飾器有什么特性解答裝飾器有個特性，一是可以把被裝飾的函數替換成其他函數，一, 引用 [書] 流暢的Python [書] Effective Python 二, 基本概念 showImg(https://segme...

aisuhua 2019-07-30 14:33 評論0 收藏0
5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當我們拍了一張照片準備發朋友...

chunquedong 2019-08-23 18:16 評論0 收藏0
PHP 正則表達式入門 Getting Started with PHP Regular Expre

摘要：兼容的正則表達式已經實現了很多使用不同解析引擎的正則函數。中主要有兩個正則解析器一個稱為，另一個稱為兼容正則表達式。在中，每個正則表達式模式都是使用符合格式的字符串。原文鏈接: Getting Started with PHP Regular Expressions Last-Modified: 2019年5月10日16:23:19譯者注: 本文是面向0正則基礎的phper, 很多...

zhangke3016 2019-07-01 12:46 評論0 收藏0
ES6學習筆記4-Proxy、Reflect、Decorator、Module

摘要：攔截實例作為構造函數調用的操作，比如。方法等同于，這提供了一種不使用，來調用構造函數的方法。方法對應，返回一個布爾值，表示當前對象是否可擴展。這是的一個提案，目前轉碼器已經支持。別名或修飾器在控制臺顯示一條警告，表示該方法將廢除。 Proxy Proxy 這個詞的原意是代理，用在這里表示由它來代理某些操作，可以譯為代理器，即用自己的定義覆蓋了語言的原始定義。ES6 原生提供 Proxy...

lushan 2019-08-20 17:02 評論0 收藏0