bocyou
diff --git a/‎02-ES新特性/ES6/05-Reflect&Proxy.html‎
Lines changed: 267 additions & 2 deletions b/‎02-ES新特性/ES6/05-Reflect&Proxy.html‎
Lines changed: 267 additions & 2 deletions
diff --git a/‎git速查表.JPG‎
149 KB b/‎git速查表.JPG‎
149 KB
diff --git a/‎git速查表.png‎
-736 KB b/‎git速查表.png‎
-736 KB
@@ -19,20 +19,28 @@
     age: 26
 }
 let handler = {
+    // get(target, propKey, receiver)
     get: function(target, key) {
         console.log('getting '+ key);
         return target[key]; // 不是target.key
     },
+    // set(target, propKey, value, receiver)
     set: function(target, key, value) {
+        if (key === 'age') {
+            if (!Number.isInteger(value)) {
+                throw new TypeError('The age is not an integer');
+            }
+        } 
         console.log('setting '+ key);
         target[key] = value;
     }
 }
 let proxy = new Proxy(target, handler)
 proxy.name     // getting name  实际执行 handler.get
 proxy.age = 25 // setting age   实际执行 handler.set
+// proxy.age = "25" // "The age is not an integer"
 
-// target 可为空对象
+// => target 可为空对象
 let targetEpt = {}
 let proxyEpt = new Proxy(targetEpt, handler)
 // 调用 get 方法，此时目标对象为空，没有 name 属性
@@ -43,21 +51,278 @@
 proxyEpt.name // getting name "csxiaoyao"
 // 注意：通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相影响
 
-// handler 可为空对象
+// => handler 可为空对象
 // 相当于不设置拦截操作，直接访问目标对象
 let targetEmpty = {}
 let proxyEmpty = new Proxy(targetEmpty,{})
 proxyEmpty.name = "csxiaoyao" // Proxy {name: "csxiaoyao"}
 
+/**
+ * 应用：利用实例方法 get(target, propKey, receiver) 实现私有属性读取保护
+ * get() 方法可以继承
+ */
+let proxy2 = new Proxy({}, {
+    get(target, propKey, receiver) {
+        // 实现私有属性读取保护
+        if(propKey[0] === '_'){
+            throw new Error(`Invalid attempt to get private "${propKey}"`);
+        }
+        console.log('Getting ' + propKey);
+        return target[propKey];
+    }
+});
+// 更好的创建对象的方式
+let obj = Object.create(proxy2);
+// console.log(obj._test) // Invalid attempt to get private "_test"
+
+/**
+ * proxy receiver参数
+ */
+const handler2 = {
+    // 参数 receiver 表示原始操作行为所在对象，一般是 Proxy 实例本身
+    set: function(obj, key, value, receiver) {
+        console.log(obj, key, value, receiver)
+        if (key === 'instance') {
+            obj[key] = receiver;
+        } else {
+            obj[key] = value;
+        }
+        return true
+        // 注意: 严格模式下，set代理如果没有返回true，会报错
+    }
+};
+const proxy3 = new Proxy({}, handler2);
+proxy3.name = 'csxiaoyao';
+proxy3.instance = ''
+proxy3.instance === proxy3 // true
+// Object.setPrototypeOf()
+const exam = {}
+Object.setPrototypeOf(exam, proxy3)
+exam.instance = ''
+exam.instance === exam // true
+
+/**
+ * proxy apply
+ */
+// apply(target, ctx, args)
+// 用于拦截函数的调用、call 和 reply 操作
+// target目标对象，ctx目标对象上下文，args目标对象的参数数组
+function sub(a, b){
+    return a - b;
+}
+let handler3 = {
+    apply: function(target, ctx, args){
+        console.log('handle apply');
+        return Reflect.apply(...arguments);
+    }
+}
+let proxySub = new Proxy(sub, handler3)
+proxySub(2, 1) // 1
+
+/**
+ * proxy has
+ */
+// has(target, propKey)
+// 用于拦截 HasProperty 操作
+// 即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截
+// 此方法不判断一个属性是对象自身的属性，还是继承的属性
+// 注意：此方法不拦截 for ... in 循环
+let  handler4 = {
+    has: function(target, propKey){
+        console.log("handle has");
+        return propKey in target;
+    }
+}
+let exam2 = {name: "csxiaoyao"}
+let proxyHas = new Proxy(exam2, handler4) // true
+
+/**
+ * proxy construct
+ */
+// construct(target, args)
+// 用于拦截 new 命令，返回值必须为对象
+let handler5 = {
+    construct: function(target, args, newTarget){
+        console.log("handle construct");
+        return Reflect.construct(target, args, newTarget);
+    }}
+class exam3 {
+    constructor(name){
+        this.name = name;
+    }
+}
+let proxy4 = new Proxy(exam3, handler5)
+new proxy4("csxiaoyao") // exam3 {name: "csxiaoyao"}
+
+/**
+ * proxy deleteProperty
+ */
+// deleteProperty(target, propKey)
+// 用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除
+let  handler6 = {
+    deleteProperty: function(target, propKey){
+        console.log("handle deleteProperty");
+        return false;
+    }
+}
+let exam4 = {name: "csxiaoyao"}
+let proxyDelete = new Proxy(exam4, handler6) // true
+delete proxyDelete.name
+
+/**
+ * proxy defineProperty
+ */
+// defineProperty(target, propKey, propDesc)
+// 用于拦截 Object.defineProperty
+// 若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性
+// defineProperty 返回值为false，添加属性操作无效
+let handler7 = {
+    defineProperty: function(target, propKey, propDesc){
+        console.log("handle defineProperty");
+        return true;
+    }
+}
+let proxyDefine = new Proxy({}, handler7)
+proxyDefine.name = "csxiaoyao"
+
+/**
+ * proxy getOwnPropertyDescriptor
+ */
+// getOwnPropertyDescriptor(target, propKey)
+// 用于拦截 Object.getOwnPropertyDescriptor() 返回值为属性描述对象或 undefined
+let handler8 = {
+    getOwnPropertyDescriptor: function(target, propKey){
+        console.log('handle getOwnPropertyDescriptor')
+        return Object.getOwnPropertyDescriptor(target, propKey);
+    }
+}
+let proxyGetOwnPropertyDescriptor = new Proxy({name: "csxiaoyao"}, handler8)
+const retData = Object.getOwnPropertyDescriptor(proxyGetOwnPropertyDescriptor, 'name')
+console.log(retData) // {value: "csxiaoyao", writable: true, enumerable: true, configurable: true}
 
+/**
+ * proxy getPrototypeOf
+ */
+// getPrototypeOf(target)
+// 主要用于拦截获取对象原型的操作，包括以下操作：
+// - Object.prototype._proto_
+// - Object.prototype.isPrototypeOf()
+// - Object.getPrototypeOf()
+// - Reflect.getPrototypeOf()
+// - instanceof
+// 注意：返回值必须是对象或 null ，否则报错
+// 另外，如果目标对象不可扩展（non-extensible），getPrototypeOf 方法必须返回目标对象的原型对象
+let exam5 = {}
+let proxyProto = new Proxy({},{
+    getPrototypeOf: function(target){
+        return exam5;
+    }
+})
+console.log(Object.getPrototypeOf(proxyProto)) // {}
 
+/**
+ * proxy isExtensible
+ */
+// isExtensible(target)
+// 用于拦截 Object.isExtensible 操作
+// 该方法只能返回布尔值，否则返回值会被自动转为布尔值
+let proxyExtensible = new Proxy({},{
+    isExtensible:function(target){
+        return true;
+    }
+})
+Object.isExtensible(proxyExtensible) // true
+// 注意：它的返回值必须与目标对象的isExtensible属性保持一致，否则会抛出错误
+
+/**
+ * proxy ownKeys
+ */
+// ownKeys(target)
+// 用于拦截对象自身属性的读取操作
+// - Object.getOwnPropertyNames()
+// - Object.getOwnPropertySymbols()
+// - Object.keys()
+// - or...in
+// 方法返回的数组成员，只能是字符串或 Symbol 值，否则会报错
+// 若目标对象中含有不可配置的属性，则必须将这些属性在结果中返回，否则就会报错
+// 若目标对象不可扩展，则必须全部返回且只能返回目标对象包含的所有属性，不能包含不存在的属性，否则也会报错
+
+// [ 'name' ]f返回结果中，三类属性会被过滤：
+// - 目标对象上没有的属性
+// - 属性名为 Symbol 值的属性
+// - 不可遍历的属性
+let target1 = {
+    name: "csxiaoyao",
+    [Symbol.for('age')]: 26,
+};
+// 添加不可遍历属性 'gender'
+Object.defineProperty(target1, 'gender', {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 'male'
+});
+let handlerOwnKeys = {
+    ownKeys(target) {
+        return ['name', 'parent', Symbol.for('age'), 'gender'];
+    }
+};
+let proxyOwnKeys = new Proxy(target1, handlerOwnKeys);
+const retData2 = Object.keys(proxyOwnKeys)
+console.log(retData2) // ['name']
+
+/**
+ * proxy preventExtensions
+ */
+// preventExtensions(target)
+// 拦截 Object.preventExtensions 操作
+// 该方法必须返回一个布尔值，否则会自动转为布尔值
+// 只有目标对象不可扩展时（即 Object.isExtensible(proxy) 为 false ）才能返回 true ，否则会报错
+
+// 由于 proxy.preventExtensions 返回 true，此处也会返回 true，因此会报错
+// Object.preventExtensions(proxyPreventExtensions) // error
+// 解决方案
+var proxyPreventExtensions2 = new Proxy({}, {
+    preventExtensions: function(target) {
+        // 返回前先调用 Object.preventExtensions
+        Object.preventExtensions(target);
+        return true;
+    }
+});
+Object.preventExtensions(proxyPreventExtensions2)
+
+/**
+ * proxy setPrototypeOf
+ */
+// 主要用来拦截 Object.setPrototypeOf 方法
+// 返回值必须为布尔值，否则会被自动转为布尔值
+// 若目标对象不可扩展，setPrototypeOf 方法不得改变目标对象的原型
+let proto = {}
+let proxyProto2 = new Proxy(function () {}, {
+    setPrototypeOf: function(target, proto) {
+        console.log("setPrototypeOf");
+        return true;
+    }
+});
+Object.setPrototypeOf(proxyProto2, proto);
+
+/**
+ * proxy revocable
+ */
+// Proxy.revocable()
+// 用于返回一个可取消的 Proxy 实例
+let {proxy5, revoke} = Proxy.revocable({}, {});
+proxy5.name = "csxiaoyao";
+revoke();
+proxy5.name
 
 /**
  * 【 Reflect 】
  * 获取目标对象的行为
  * 与 Object 类似，但是更易读
  * 为操作对象提供了一种更优雅的方式，方法与 Proxy 是对应的
  */
+
 </script>
 </body>
 </html>