知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
简单工厂模式
抽象工厂模式
单例模式
装饰器模式
适配器模式
代理模式
观察者模式
发布-订阅模式
观察者模式与发布-订阅模式的区别是什么?
单例模式
工厂模式
享元模式
计算机理论
Group 1
由
GitBook
提供支持
装饰器模式
类装饰器的参数
当我们给一个类添加装饰器时:
1
function
classDecorator
(
target
)
{
2
target
.
hasDecorator
=
true
3
return
target
4
}
5
6
// 将装饰器“安装”到Button类上
7
@classDecorator
8
class
Button
{
9
// Button类的相关逻辑
10
}
Copied!
此处的 target 就是被装饰的类本身。
方法装饰器的参数
而当我们给一个方法添加装饰器时:
1
function
funcDecorator
(
target
,
name
,
descriptor
)
{
2
let
originalMethod
=
descriptor
.
value
3
descriptor
.
value
=
function
()
{
4
console
.
log
(
'我是Func的装饰器逻辑'
)
5
return
originalMethod
.
apply
(
this
,
arguments
)
6
}
7
return
descriptor
8
}
9
10
class
Button
{
11
@funcDecorator
12
onClick
()
{
13
console
.
log
(
'我是Func的原有逻辑'
)
14
}
15
}
Copied!
此处的 target 变成了
Button.prototype
,即类的原型对象。这是因为 onClick 方法总是要依附其实例存在的,修饰 onClik 其实是修饰它的实例。但我们的装饰器函数执行的时候,Button 实例还
并不存在
。为了确保实例生成后可以顺利调用被装饰好的方法,装饰器只能去修饰 Button 类的原型对象。
以前
单例模式
下一个
适配器模式
最近更新
2yr ago
复制链接