沈阳网站建设 龙兴科技,含数据的wordpress,交互设计专业大学排名,学做陶艺作品的网站文章目录 1 Proxy代理1.1 get方法1.2 set方法1.3 has方法1.4 this问题 2 Reflect对象2.1 代替Object的某些方法2.2 修改某些Object方法返回结果2.3 命令式变为函数行为2.4 配合Proxy 1 Proxy代理
Proxy如其名#xff0c;它的作用是在对象和和对象的属性值之间设置一个代理它的作用是在对象和和对象的属性值之间设置一个代理获取该对象的值或者设置该对象的值 以及实例化等等多种操作 都会被拦截住 经过这一层我们可以统一处理我们可以认为它就是“代理器”。
ES6之前
let obj {}// let arr [1,2,3] // push pop
// console.log(box)
Object.defineProperty(obj, data, { // obj--对象data--属性get(){console.log(get)return box.innerHTML},set(value){console.log(set,value)// 设置 dombox.innerHTML value}
})console.log(obj)1.1 get方法
let target {}
let proxy new Proxy(target, {get(target, prop){return target[prop]}
})1.2 set方法
let target {}
let proxy new Proxy(target, {get(target, prop){return target[prop]},set(target, prop, value){if(prop data){box.innerHTML value}target[prop] value;}
})1.3 has方法
has捕获器拦截对象属性的in操作符的调用当使用in操作符来检查一个属性是否存在于一个对象时如果对象是个proxyhas捕获器就会被调用。
let target {_prop: 内部数据
}
let proxy new Proxy(target, {get(target, prop) {return target[prop]},set(target, prop, value) {if (prop data) {box.innerHTML value}target[prop] value;},has(target, key) {if (key[0] _) {return false;}return key in target;}
})1.4 this问题
let target new Set()
const proxy new Proxy(target, {get(target, key) {const value target[key]// 遇到Function都手动绑定一下this// 正常调用时this指向proxy// bind修正后value方法的this指向target对象if(value instanceof Function) {console.log(访问${value}方法了)return value.bind(target)// 不能是call / apply改变页面加载之后就立即执行同步代码// bind 不会立即执行原函数异步代码 }return value}
})
proxy.add(1)Proxy本质上属于元编程非破坏性数据劫持在原对象的基础上进行了功能的衍生而又不影响原对象符合松耦合高内聚的设计理念。
2 Reflect对象
Reflect可以用于获取目标对象的行为它与Object类似但是更易读为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的。
2.1 代替Object的某些方法
const obj {
};
Reflect.defineProperty(obj, name, {value: kerwin,writable: false,configurable:false
});
2.2 修改某些Object方法返回结果
// 老写法
try {Object.defineProperty(target, property, attributes);// success
} catch (e) {// fail
}// 新写法
if(Reflect.defineProperty(target, property, attributes)) {// success
} else {// fail
}2.3 命令式变为函数行为
const obj {name:kerwin
};
//老写法
console.log(name in obj) //true
//新写法
console.log(Reflect.has(obj, name)) //true//老写法
delete obj.name
//新写法
Reflect.deleteProperty(obj, name)2.4 配合Proxy
Reflect.set()和Reflect.get()。
let obj {name:kerwin
}Reflect.set(obj, age, 100)
console.log(Reflect.get(obj, name))let target new Set()
const proxy new Proxy(target, {get(target, key) {const value Reflect.get(target, key)if (value instanceof Function) {console.log(访问${value}方法了)return value.bind(target)}return value},set() { // set(target, key, value)return Reflect.set(...arguments)}
})
proxy.add(1)let arr [1, 2, 3]
let proxy new Proxy(arr, {get(target, key) {console.log(get, key)return Reflect.get(...arguments)},set(target, key, value) {console.log(set, key, value)return Reflect.set(...arguments)}
})
proxy.push(4)
// 能够打印出很多内容
// get push (寻找 proxy.push 方法)
// get length (获取当前的 length)
// set 3 4 (设置 proxy[3] 4)
// set length 4 (设置 proxy.length 4)
