資訊專欄INFORMATION COLUMN
摘要：更多前端技術(shù)和知識點(diǎn)，搜索訂閱號菌訂閱不會改變原有的對象，而是在其基礎(chǔ)上進(jìn)行拓展。
?? 更多前端技術(shù)和知識點(diǎn)，搜索訂閱號 JS 菌 訂閱
不會改變原有的對象，而是在其基礎(chǔ)上進(jìn)行拓展。
實(shí)現(xiàn)原理創(chuàng)建一個 A 類
A 類中的屬性和方法使用 ES7 中的修飾器語法對類和類的屬性增加功能
實(shí)現(xiàn)代碼 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() {}
}
函數(shù)式
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 裝飾函數(shù)
// 前置代碼
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()
// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服
缺點(diǎn)是在 Function 的原型鏈上增加了 before、after 導(dǎo)致原生函數(shù)被污染
改成以下：
const after = function(fn, afterFn) {
return function() {
fn.apply(this, arguments)
afterFn.apply(this, arguments)
}
}
const wear = after(after(wear1, wear2), wear3)
wear()
請關(guān)注我的訂閱號，不定期推送有關(guān) JS 的技術(shù)文章，只談技術(shù)不談八卦
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105996.html
摘要：本文從裝飾模式出發(fā)，聊聊中的裝飾器和注解。該函數(shù)的函數(shù)名。不提供元數(shù)據(jù)的支持。中的元數(shù)據(jù)操作可以通過包來實(shí)現(xiàn)對于元數(shù)據(jù)的操作。 ??隨著Typescript的普及，在KOA2和nestjs等nodejs框架中經(jīng)?？吹筋愃朴趈ava spring中注解的寫法。本文從裝飾模式出發(fā)，聊聊Typescipt中的裝飾器和注解。 什么是裝飾者模式 Typescript中的裝飾器 Typescr...
摘要：下裝飾者的實(shí)現(xiàn)了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實(shí)現(xiàn)裝飾者模式原函數(shù)拍照片定義函數(shù)裝飾函數(shù)加濾鏡用裝飾函數(shù)裝飾原函數(shù)這樣我們就實(shí)現(xiàn)了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數(shù)來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式 當(dāng)我們拍了一張照片準(zhǔn)備發(fā)朋友...
摘要：兼容的正則表達(dá)式已經(jīng)實(shí)現(xiàn)了很多使用不同解析引擎的正則函數(shù)。中主要有兩個正則解析器一個稱為，另一個稱為兼容正則表達(dá)式。在中，每個正則表達(dá)式模式都是使用符合格式的字符串。 原文鏈接: Getting Started with PHP Regular Expressions Last-Modified: 2019年5月10日16:23:19譯者注: 本文是面向0正則基礎(chǔ)的phper, 很多...
摘要：攔截實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如。方法等同于，這提供了一種不使用，來調(diào)用構(gòu)造函數(shù)的方法。方法對應(yīng)，返回一個布爾值，表示當(dāng)前對象是否可擴(kuò)展。這是的一個提案，目前轉(zhuǎn)碼器已經(jīng)支持。別名或修飾器在控制臺顯示一條警告，表示該方法將廢除。 Proxy Proxy 這個詞的原意是代理，用在這里表示由它來代理某些操作，可以譯為代理器，即用自己的定義覆蓋了語言的原始定義。ES6 原生提供 Proxy...
閱讀 2846·2023-04-26 02:23
閱讀 1594·2021-11-11 16:55
閱讀 3156·2021-10-19 11:47
閱讀 3370·2021-09-22 15:15
閱讀 1984·2019-08-30 15:55
閱讀 1045·2019-08-29 15:43
閱讀 1300·2019-08-29 13:16
閱讀 2203·2019-08-29 12:38
