Proxy代理
Proxy对象
在一个系统中，总要存储一些数据，对于这些数据，可能有一些是希望我们访问的，但是总有一些是中重要的，不希望我们访问的，希望保护起来，因此ES6新增了代理，在目标对象前架设个“拦截“层，外界对该对象的访问必须通过这层拦截，我们可以对外界的访问进行过滤和改写。
注意：Proxy修改了某些操作的默认行为，等同于在语言层做出修改，所以也属于”元编程“，即对语言进行编程。
语法： let proxy = new Proxy(target,handler)
target 表示被代理的对象
handler 表示操作被代理的对象
注意:[[]] 为引擎内部属性或方法，外部不能获取
let star = {
name: '尼古拉斯赵四',
girlFriend: '赵丽颖',
age: 40
}
// 代理对象
let proxy = new Proxy(star, {
// 取值方法
get(target, key, receiver) {
// 如果是重要的数据，不要访问
if (key === 'girlFriend') {
throw new Error('不能访问girlFriend')
}
if (key === 'age') {
return 0
}
// target 代表 star， key 代表属性名称， receiver代表proxy， this代表Proxy的第二个参数对象
// console.log('get', receiver === this, 11, receiver === proxy, this.num)
return target[key]
},
set(target, key, value, receiver) {
// 如果是重要的数据，不要修改
if (key === 'girlFriend') {
throw new Error('不能修改girlfriend')
}
// console.log('set', ...args, this)
// console.log(value)
target[key] = value;
},
num: 10
})
// // 修改数据
// proxy.name = '亚洲舞王'
// // 获取数据
// console.log(proxy.name)
// 修改重要数据
// proxy.girlFriend = '孙俪'
// console.log(proxy.girlFriend, star.girlFriend)
// ++star.age;
// proxy.age;
console.log(++proxy.age)
拦截方法
get(target,key,proxy) 拦截对象属性的读取
//get(target,key,proxy) 拦截对象属性的读取
// 1 对数据做校验
// 2 数组或者字符串的索引值做处理（负索引值）
// 3 方法链式调用
// 4 模拟虚拟DOM创建
// 5 configurable, writable
// 负索引值
// let arr = [1, 2, 3, 4, 5];
// let proxy = new Proxy(arr, {
// // 取值方法
// get(target, key) {
// // 如果是负索引值
// if (key < 0) {
// key = key % target.length + target.length;
// }
// return target[key]
// }
// })
// console.log(proxy[1])
// console.log(proxy[-1])
// 链式调用
// let str = 'hello ';
// console.log(str.trim().toUpperCase())
// console.log(str.trim.toUpperCase)
// 定义一个方法，包装字符串
// let ickt = function(val) {
// // 返回一个代理对象
// return new Proxy({}, {
// fns: [],
// // 取值方法
// get(target, key, proxy) {
// // 如果key是get，返回结果
// if (key === 'get') {
// // console.log(this.fns)
// // 执行对val的处理，并返回结果
// // return this.fns.reduce((result, fn) => {
// // return result[fn](result)
// // }, val)
// return this.fns.reduce((result, fn) => result[fn](result), val)
// }
// // 存储这些操作方法
// this.fns.push(key)
// // 为了链式调用，每次要返回receiver
// return proxy
// }
// })
// }
// 使用方法，省略()
// console.log(ickt(str).trim.toUpperCase.get)
// let ickt = function(val, tools) {
// // 返回一个代理对象
// return new Proxy({}, {
// fns: [],
// // 取值方法
// get(target, key, proxy) {
// // 如果key是get，返回结果
// if (key === 'get') {
// // console.log(this.fns)
// // 执行对val的处理，并返回结果
// // return this.fns.reduce((result, fn) => {
// // return result[fn](result)
// // }, val)
// return this.fns.reduce((result, fn) => (tools || result)[fn](result), val)
// }
// // 存储这些操作方法
// this.fns.push(key)
// // 为了链式调用，每次要返回receiver
// return proxy
// }
// })
// }
// // 工具方法
// let tools = {
// toUpperCase: val => val.toUpperCase(),
// repeat: val => val.repeat(2),
// trim: val => val.trim(),
// reverse: val => val.split('').reverse().join('')
// }
// // 拓展，可以传递工具集合
// console.log(ickt(str, tools).trim.repeat.reverse.toUpperCase.get)
// react jsx
// <div id="app">
// <img src="./demo.png" alt="demo">
// <p>爱创课堂</p>
// </div>
// react.createElement(
// 'div',
// { id: 'app' },
// React.createElement('img', { src: './demo.png', alt: 'demo' }),
// React.createElement('p', null, '爱创课堂')
// )
// 创建React库
// let React = new Proxy({}, {
// // 取值方法
// get(obj, name) {
// // 返回函数
// return function(attrs, ...children) {
// // 创建容器元素
// let dom = document.createElement(name);
// // 遍历属性
// attrs && Object.keys(attrs).forEach(key => dom.setAttribute(key, attrs[key]))
// // 遍历子元素
// children.forEach(item => {
// // 如果是文本
// if (typeof item === 'string') {
// // 添加文本节点
// dom.appendChild(document.createTextNode(item))
// } else {
// // 添加元素
// dom.appendChild(item)
// }
// })
// // 返回创建的元素
// return dom;
// }
// }
// })
// // // 模拟React创建DOM元素
// let result = React.div(
// { id: 'app' },
// React.img({ src: './demo.png', alt: 'demo' }),
// React.p(null, '爱创课堂')
// )
// // console.log(result)
// // 上树
// document.body.appendChild(result);
// configurable, writable
// let obj = {
// msg: 'hello'
// }
// Object.defineProperties(obj, {
// color: {
// value: 'red',
// writable: false,
// enumerable: true,
// configurable: true
// },
// num: {
// value: 20,
// writable: true,
// enumerable: true,
// configurable: false
// }
// })
// // 代理
// let proxy = new Proxy(obj, {})
// // 不传递操作方法，此时代理对象与原对象的行为是一致的
// console.log(proxy.msg)
// proxy.msg = 'ickt';
// // console.log(proxy.msg)
// console.log(obj)
// console.log(proxy.color)
// proxy.color = 'green';
// console.log(proxy.color)
// Object.defineProperty(obj, 'num', {
// value: 30,
// writable: true,
// enumerable: true,
// configurable: true
// })
// Object.defineProperty(proxy, 'num', {
// value: 30,
// writable: true,
// enumerable: true,
// configurable: true
// })
// console.log(obj)
set(target,key,value,proxy) 拦截对象属性的设置
has(target,key) 拦截propKey in proxy 的操作， 返回布尔值
deleteProperty(target,key) 拦截delete proxy[key] 操作，返回布尔值
ownKeys(target) 拦截
Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.keys,返回值是个数组
getOwnPropertyDescriptor(target,key) 拦截 Object.getOwnPropertyDescriptor操作，返回属性值的描述对象
defineProperty(target,key,descripor) 拦截Object.defineProperty Object.defineProperties 操作。
preventExtensions(target) 拦截 Object.preventExtensions（不可拓展） ，返回布尔值
idExtensible(target) 拦截Object.idExtensible , 返回布尔值
Object.getPrototypeOf(target) 拦截Object.getPrototypeOf(target) ，返回对象
Object.setPrototypeOf(target，proto) 拦截Object.setPrototypeOf(target，proto) ，返回布尔值
Object.setPrototypeOf(target) 拦截Proxy实例 并将其作为函数调用操作
Object.construct(target,args) 拦截Proxy实例 作为构造函数调用的操作
// 定义对象
// let obj = {
// color: 'red',
// num: 10
// }
let obj = function() {
console.log('obj fn')
}
// 代理
let proxy = new Proxy(obj, {
// has(target, key) 拦截propKey in proxy 的操作，返回 个布尔值。
// has() {
// console.log(arguments)
// }
// deleteProperty(target, key) 拦截 delete proxy[key]的操作，返回 个布尔值。
// deleteProperty() {
// console.log(arguments)
// }
// ownKeys(target) 拦截Object.getOwnPropertyNames,Object.getOwnPropertySymbols, Object.keys，返回 个数组。
// ownKeys() {
// console.log(arguments)
// return []
// }
// getOwnPropertyDescriptor(target, key) 拦截Object.getOwnPropertyDescriptor操作，返回属性的描述对象。
// defineProperty(target, key, descripor) 拦截Object.defineProperty、 Object defineProperties操作
// preventExtensions(target) 拦截Object.preventExtensions （不可拓展），返回布尔值
// isExtensible(target) 拦截Object.isExtensible， 返回布尔值。
// getPrototypeOf(target) 拦截Object.getPrototypeOf，返回对象。
// setPrototypeOf(target, proto) 拦截Object.setPrototypeOf， 返回一个布尔值。
// apply(target, object, args) 拦截Proxy实例，并将其作为函数调用的操作
apply() {
console.log(arguments)
},
// construct( target, args)
construct() {
console.log('construct', arguments)
return {}
}
})
// console.log('color' in proxy)
// delete proxy.color
// console.log(Object.getOwnPropertyNames(proxy))
// 执行方法
// proxy(1, 2, 3)
// proxy.call({ color:'red' }, 1, 2, 3)
// 作为构造函数
new proxy(1, 2, 3)
电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com
Proxy要点
1、当操作代理对象参数是空对象的时候，对代理对象的操作将直接映射给被代理对象（无拦截）。
let obj = {}
// 代理
let proxy = new Proxy(obj, {})
// proxy与obj行为是一致的
proxy.color = 'red'
console.log(obj)//{color:"red"}
2、Proxy对目标对象的代理，是不透明的代理，因此在无拦截的情况下，也无法保证与目标对象的行为一直。原因是在Proxy代理过程中，Proxy代理对象内部this始终指向Proxy代理对象。
// let obj = {
// num: 10,
// demo() {
// console.log(this)
// }
// }
// 代理对象, 无拦截
// let proxy = new Proxy(obj, {})
// this指向 obj
// obj.demo() //obj
// proxy.demo() //proxy 代理对象
// map对象: 属性名称可以是任何数据类型。
// let map = new Map();
// // let map = {};
// // 类
// class Demo {
// constructor(color) {
// // this._color = color;
// // map[this] = color;
// map.set(this, color);
// }
// // 特性方法
// get color() {
// // 通过demo和proxy调用color属性，this指向不同。
// console.log(this, map)
// // return this._color;
// // return map[this];
// return map.get(this);
// }
// }
// // 实例化
// let demo = new Demo('red');
// // 代理对象, 无拦截
// let proxy = new Proxy(demo, {})
// // this指向 obj
// console.log(demo.color);
// console.log(proxy.color);
所以代理一些实例化对象的时候会存在this问题。 3、一些源生方法，只能通过正确的this才能获取数据，此时就无法使用Proxy做代理。
// 3 一些源生方法，只能通过正确的this才能获取数据，此时就无法使用proxy做代理了
// let r = /a/;
// let proxy = new Proxy(r, {});
// // 使用
// console.log(r.test('a'))
// console.log(proxy.test('a'))
4、Proxy.revocable方法可以返回一个可取消的代理对象。 其中revoke属性可以取消proxy代理实例。 应用场景“目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问
// 4 取消代理
let obj = {
color: 'red'
}
let { proxy, revoke } = Proxy.revocable(obj, {});
// console.log(ickt)
// 代理
console.log(proxy.color)
// 收回代理权
revoke();
// 代理失效
console.log(proxy.color)
