介绍
- 使用者无权访问目标对象
- 中间加代理,通过代理做授权和控制
- 科学上网、明星经纪人
UML类图
示例
class LoadImg {
constructor(fileName) {
this.fileName = fileName
this.loadFromDisk()
}
loadFromDisk() {
console.log(`从${this.fileName}加载中...`)
}
// 假设无法直接访问display
display() {
console.log('展示')
}
}
class ProxyImg {
constructor(fileName) {
this.loadImg = new LoadImg(fileName)
}
display() {
this.loadImg.display()
}
}
const proxyImg = new ProxyImg('123.png')
proxyImg.display()
bind()也属于代理,把this代理到函数中(Jquery中$.proxy(fn, this)也是一样)
<div>点点点点</div>
<script>
document.querySelector('div').addEventListener('click', function() {
setTimeout(function() {
this.style.setProperty('background-color', 'red')
}.bind(this), 2000)
})
es6中的Proxy
- 动态生成element
const DOM = new Proxy({}, {
get(target, property) {
return function(attr = {}, ...children) {
const element = document.createElement(property)
for (let i in attr) {
element.setAttribute(i, attr[i])
}
for (let i of children) {
if (typeof i === 'string') {
i = document.createTextNode(i)
}
element.appendChild(i)
}
return element
}
}
})
const body = document.querySelector('body')
const newElement = DOM.div({ class: 'box1' }, '我是box1', '哈哈哈哈', DOM.a({ href: 'www.baidu.com' }, '百度'))
body.appendChild(newElement)
-
apply()
has()
deleteProperty()
等
es6中的Reflect
- ES6 为了操作对象而提供的新 API
- 将
Object
对象的一些明显属于语言内部的方法(比如Object.defineProperty
),放到Reflect
对象上 - 修改某些
Object
方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc)
在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)
则会返回false
- 让
Object
操作都变成函数行为 -
Reflect
对象的方法与Proxy
对象的方法一一对应,只要是Proxy
对象的方法,就能在Reflect
对象上找到对应的方法
代理模式vs适配器模式
- 适配器模式:提供不一样的接口
- 代理模式:提供一致的接口
代理模式vs装饰器模式
- 装饰器模式:扩展功能,原有的功能不变且可直接使用
- 代理模式:显示原有功能,但是经过限制或者阉割之后的