常用网站建设技术是什么意思东莞大岭山森林公园

当前位置： 首页 > news >正文

常用网站建设技术是什么意思,东莞大岭山森林公园,怎么建设网站服务器,长沙室内设计proxy详细介绍与使用 proxy 对象用于创建一个对象的代理#xff0c;是在目标对象之前架设一个拦截#xff0c;外界对该对象的访问#xff0c;都必须先通过这个拦截。通过这种机制#xff0c;就可以对外界的访问进行过滤和改写。 ES6 原生提供 Proxy 构造函数#xff0c;…proxy详细介绍与使用 proxy 对象用于创建一个对象的代理是在目标对象之前架设一个拦截外界对该对象的访问都必须先通过这个拦截。通过这种机制就可以对外界的访问进行过滤和改写。 ES6 原生提供 Proxy 构造函数用来生成 Proxy 实例。 var proxy new Proxy(target, handler);target参数表示所要拦截的目标对象handler参数也是一个对象用来定制拦截行为。 const obj {}; const proxynew Proxy(obj,{get:function(target,propKey){return 1} })console.log(proxy.name) // 1 console.log(proxy.value) // 1在上面代码中Proxy接受两个参数第一个是要代理的目标对象上面的是空对象obj在没有设置Proxy的情况下对proxy的操作就是访问obj。第二个参数是配置对象对每个被代理的操作需要提供一个对应的处理函数这个函数用于拦截对应的操作。 上面代码中配置对象有个get方法用来拦截对目标对象属性的访问请求。get方法中的两个参数分别是目标对象和所要访问的属性。由于设置的是返回1所以访问任何属性都得到1。 如果handler没有设置拦截就等同于直接通向原对象。 const obj {}; const proxynew Proxy(obj, {}) proxy.a 1 console.log(obj.a) // 1 console.log(obj proxy) // falsehandler是空对象没有拦截作用访问proxy等同于访问obj。但是代理对象和原对象并不相等。 handler配置 handler 对象是一个容纳一批特定属性的占位符对象。它包含有 proxy 的各个捕获器。

1. get get方法用于拦截某个属性的读取操作接受三个参数目标对象属性名Proxy或者proxy实例本身第三个参数可选。 const obj{value:1 } const proxynew Proxy(obj,{get:function(target,propKey){if(propKey in target){return target[propKey]}else{throw new ReferenceError(${propKey} 不存在)}} }) console.log(proxy.value) // 1 proxy.name //报错如果访问目标对象不存在的属性会抛出一个错误。如果没有这个拦截函数访问不存在的属性只会返回undefined。 get方法可以被继承 const obj {a: 1 }; let proto new Proxy(obj, {get(target, propertyKey) {return target[propertyKey];} }); let newObj Object.create(proto); newObj.a // GET foo拦截操作定义在原型对象上面所以如果读取obj对象继承的属性时拦截会生效。 下面是一个get方法的第三个参数的例子它总是指向原始的读操作所在的那个对象一般情况下就是 Proxy 实例。 const proxy new Proxy({}, {get: function(target, key, receiver) {return receiver;} }); proxy.getReceiver proxy // true对于get方法proxy存在一些约束 如果要访问的目标属性是不可写以及不可配置的则返回的值必须与该目标属性的值相同否则会抛出异常。const obj {}; Object.defineProperty(obj, a, {configurable: false,enumerable: false,value: 1,writable: false }); const proxynew Proxy(obj,{get:function(target,propKey){return 2 // return 1 就没问题} }); proxy.a如果要访问的目标属性没有配置访问方法即 get 方法是 undefined 的则返回值必须为 undefined。const obj {}; Object.defineProperty(obj, a, {configurable: false,get: undefined }); const proxynew Proxy(obj,{get:function(target,propKey){return 1; // return undefined 就没问题} }); proxy.a2. set 用来拦截某个属性的赋值操作接受四个参数(目标对象、属性名、属性值、最初被调用的对象(通常是proxy实例本身但 handler 的 set 方法也有可能在原型链上或以其他方式被间接地调用(因此不一定是 proxy 本身)))第四个参数可选。 const proxy new Proxy({}, {set: function(obj,prop,value){if(prop value) {if(!Number.isInteger(value)){throw new TypeError(不是整数)}if(value10){throw new RangeError(太大了)}}obj[prop] value} }) proxy.value 5 proxy.value val //报错 proxy.value 20 //报错由于设置了存值函数set任何不符合要求的value属性赋值都会抛出一个错误这是数据验证的一种实现方法。 来看看set在原型链上的情况. const proxy new Proxy({}, {set: function(obj, prop, value, receiver) {console.log(receiver newObj); // trueif(prop value) {if(!Number.isInteger(value)){throw new TypeError(不是整数)}if(value10){throw new RangeError(太大了)}}obj[prop] value} }) let newObj Object.create(proxy); newObj.value 1;将代理对象作为原型创建一个新对象此时第四个参数就是这个新对象而不是proxy实例。 对于set方法proxy也存在一些约束 若目标属性是一个不可写及不可配置的数据属性则不能改变它的值。const obj {}; Object.defineProperty(obj, a, {configurable: false,enumerable: false,value: 1,writable: false }); const proxynew Proxy(obj,{set: function(obj, prop, value) {obj[prop] value} }); proxy.a 1; proxy.a // 还是 undefined如果目标属性没有配置存储方法即 set 的是 undefined则不能设置它的值.const obj {}; Object.defineProperty(obj, a, {configurable: false,set: undefined }); const proxynew Proxy(obj,{set: function(obj, prop, value) {obj[prop] value} }); proxy.a 1; proxy.a // 还是 undefined在严格模式下如果 set 方法返回 false那么也会抛出一个异常。 3. apply 拦截函数的调用接受三个参数分别是目标对象、目标对象的上下文对象this和目标对象的参数数组。 var target function () { return target; }; var handler {apply: function () {return proxy;} };var p new Proxy(target, handler); p() // proxy变量p是 Proxy 的实例当它作为函数调用时p()就会被apply方法拦截返回一个字符串。
2. has 用来拦截HasProperty操作即判断对象是否具有某个属性时这个方法会生效。典型的操作就是in运算符。接受两个参数分别是目标对象、需查询的属性名。 var handler {has (target, key) {return key in target;} }; var target { prop: foo }; var proxy new Proxy(target, handler); propa in proxy // false如果原对象不可配置或者禁止扩展这时has拦截会报错。 var obj { a: 10 }; Object.preventExtensions(obj);var p new Proxy(obj, {has: function(target, prop) {return false;} }); a in p // TypeError is thrownhas方法拦截的是HasProperty操作而不是HasOwnProperty操作即has方法不判断一个属性是对象自身的属性还是继承的属性。可以看作是针对 in 操作的钩子。
3. construct 用于拦截new命令 var handler {construct (target, args, newTarget) {return new target(…args);} };接受三个参数目标对象构造函数的参数对象new命令作用的构造函数。 construct方法返回的必须是一个对象否则会报错。
4. deletePrototype 拦截delete操作如果这个方法抛出错误或者返回false当前属性就无法被delete命令删除。 var handler {deleteProperty (target, key) {invariant(key, delete);delete target[key];return true;} }; function invariant (key, action) {if (key[0] _) {throw new Error(Invalid attempt to \({action} private \){key} property);} } var target { _prop: foo }; var proxy new Proxy(target, handler); delete proxy._prop // Error: Invalid attempt to delete private _prop propertydeleteProperty方法拦截了delete操作符删除第一个字符为下划线的属性会报错。 目标对象自身的不可配置configurable的属性不能被deleteProperty方法删除否则报错。
5. defineProperty 拦截了Object.defineProperty操作。 var handler {defineProperty (target, key, descriptor) {return false;} }; var proxy new Proxy({}, handler); proxy.a a // 不会生效8. getOwnPropertyDescriptor 拦截Object.getOwnPropertyDescriptor()返回一个属性描述对象或者undefined。 var handler {getOwnPropertyDescriptor (target, key) {return Object.getOwnPropertyDescriptor(target, key);} }; var target {a: a }; var proxy new Proxy(target, handler); Object.getOwnPropertyDescriptor(proxy, a) // { value: a, writable: true, enumerable: true, configurable: true }9. getPrototypeOf 用来拦截获取对象原型。 var proto {}; var p new Proxy({}, {getPrototypeOf(target) {return proto;} }); Object.getPrototypeOf(p) proto // true10. isExtensible 拦截Object.isExtensible操作。 var p new Proxy({}, {isExtensible: function(target) {console.log(called);return true;} }); Object.isExtensible(p) // called // true11. ownKeys 拦截对象自身属性的读取操作。 let target {a: 1,b: 2,c: 3 }; let handler {ownKeys(target) {return [a];} }; let proxy new Proxy(target, handler); Object.keys(proxy) // [ a ]12. preventExtensions 拦截Object.preventExtensions()。 var proxy new Proxy({}, {preventExtensions: function(target) {return true;} }); Object.preventExtensions(proxy) // Uncaught TypeError: preventExtensions on proxy: trap returned truish but the proxy target is extensible13. setPrototypeOf 用来拦截Object.setPrototypeOf方法。 var handler {setPrototypeOf (target, proto) {throw new Error(Changing the prototype is forbidden);} }; var proto {}; var target function () {}; var proxy new Proxy(target, handler); Object.setPrototypeOf(proxy, proto); // Error: Changing the prototype is forbidden只要修改target的原型对象就会报错。 proxy比Object.defineProperty具有的优势 了解Proxy的基本用法过后接下来我们再深入探讨一下相比于Object.defineProperty, Proxy到底有哪些优势。 首先最明显的优势就是在于Proxy要更为强大一些那这个强大具体体现在Object.defineProperty只能监听到对象属性的读取或者是写入而Proxy除读写外还可以监听对象中属性的删除对对象当中方法的调用等等。 这里我们为obj对象定义一个Proxy对象在Proxy对象的处理对象中的外的添加一个deleteProperty的代理方法这个方法会在外部对当前这个代理对象进行delete操作时会自动执行。 这个方法同样接收两个参数分别是代理目标对象和所要删除的这个属性的名称。 const obj {a: 1 } const proxy new Proxy(obj, {deleteProperty(target, propKey) {delete target[propKey]} })delete proxy.avue2.x的响应式并不具备这样的处理而是需要一个\(delete方法来解决。 export default {data() {return {obj: {a: 1}}},methods: {deleteA() {delete this.obj.a; // a属性确实删除了但是没有触发对应的更新// this.\)delete(this.obj, a) 能删除a并触发更新}} }比如上方的使用delete直接删除a并不会触发更新这是因为Object.defineProperty只能监听到对象属性的读取或者是写入没办法监听删除。我们顺便来看看vue2.x的解决办法 function del(target: any[] | object, key: any) {// …if (isArray(target) isValidArrayIndex(key)) {target.splice(key, 1)return}const ob (target as any).ob// …delete target[key]if (!ob) {return}// 获取对象的观察者ob并手动调用更新if (DEV) {ob.dep.notify({type: TriggerOpTypes.DELETE,target: target,key})} else {ob.dep.notify()} }可以看到 vue 实例的 $delete 处理了一些边界情况处理了数组和对象的删除最重要的是获取了变量上的ob指针指向的观察者实例并通知依赖dep里的watcher更新。 第二点优势就是对于数组对象进行监视 通常我们想要监视数组的变化基本要依靠重写数组方法这也是vue2.x的实现方式proxy可以直接监视数组的变化。以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的pushshift之类的方法以此来劫持对应的方法调用的过程。 这里来看如何直接使用Proxy对象来对数组进行监视。这里我们定义一个list数组然后对这个list数组进行Proxy监视。 在这个Proxy对象的处理对象上我们去添加一个set方法用于监视数据的写入在这个方法的内部我们打印参数的值然后再target对象上设置传入的值最后返回一个true表示写入成功。 这样我们再外部对数组的写入都会被监视到例如我们这里通过push向数组中添加值。 const arr [] const proxy new Proxy(arr, {set(target, propKey, value) {target[propkey] value;return true} })Proxy内部会自动根据push操作推断出来他所处的下标每次添加或者设置都会定位到对应的下标property。 最后相比于Object.defineProperty还有一点优势就是Proxy是以非入侵的方式监管了对象的读写那也就是说一个已经定义好的对象我们不需要对对象本身去做任何的操作就可以监视到他内部成员的读写而defineProperty的方式就要求我们必须按特定的方式单独去定义对象当中那些被监视的属性。