| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <script>
- //目标对象
- const user = {
- name: 'xiaoming',
- age: 20,
- friend: {
- name: 'xiaohong',
- age:18
- }
- }
- //把目标对象换成代理对象
- //参数1： user ---->目标对象
- //参数2： handler----->处理器对象，用来监视数据和数据的操作
- const proxyUser = new Proxy(user,{
- //获取目标对象的属性
- get(target,prop){
- console.log('get方法的调用')
- //反射对象
- return Reflect.get(target,prop)
- },
- //修改目标对象的属性值|为目标对象添加新的值
- set(target,prop,val){
- console.log('set方法的调用')
- return Reflect.set(target,prop,val)
- },
- //删除目标对象中的某个值
- deleteProperty(target,prop){
- console.log('delete方法的调用')
- return Reflect.deleteProperty(target,prop)
- }
- })
- //通过代理对象获取目标对象中的某个值
- console.log(proxyUser.name)
- //通过代理对象更新目标对象中的某个值
- proxyUser.name = 'xiaolan'
- console.log(user)
- //通过代理对象向目标对象添加一个新的值
- proxyUser.sex = '男'
- console.log(user)
- delete proxyUser.name
- console.log(user)
- //更新目标对象中某个属性对象的属性值
- proxyUser.friend.name = 'peiqi'
- console.log(user)
- </script>
- </body>
- </html>
|
