在ps中做网站首页的尺寸,书签制作 小学生的手工书签,wordpress首页弹窗,什么平台可以接国外订单关于proxy的精髓理解#xff08;掌握这些理解#xff0c;基本对proxy的执行过程也就有了把握#xff09;#xff1a; 1、Proxy 用于修改某些操作的默认行为#xff0c;等同于在语言层面做出修改#xff0c;所以属于一种“元编程”#xff08;meta programming#xff0…关于proxy的精髓理解掌握这些理解基本对proxy的执行过程也就有了把握 1、Proxy 用于修改某些操作的默认行为等同于在语言层面做出修改所以属于一种“元编程”meta programming即对编程语言进行编程 2、 Proxy 可以理解成在目标对象之前架设一层“拦截”外界对该对象的访问都必须先通过这层拦截因此提供了一种机制可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理用在这里表示由它来“代理”某些操作可以译为“代理器”。 3、Proxy 实际上重载overload了点运算符即用自己的定义覆盖了语言的原始定义 语法
var proxy new Proxy(target, handler);Proxy 对象的所有用法都是上面这种形式不同的只是handler参数的写法。其中new Proxy()表示生成一个Proxy实例target参数表示所要拦截的目标对象handler参数也是一个对象用来定制拦截行为。
coding let obj new Proxy({},{get: function(target,propKey,receiver) {console.log(获取的时候会被拦截)console.log(target,propKey,receiver)return Reflect.get(target,propKey,receiver)},set: function(target,propKey,value,receiver) {console.log(设置时被拦截);console.log(target,propKey,value,receiver)return Reflect.set(target,propKey,value,receiver)}
})
console.log(obj) // Proxy {}obj.count 1
// 设置时被拦截
// {} count 1 Proxy {}obj.count
// 获取的时候会被拦截
// {count: 1} count Proxy {count: 1}
// 设置时被拦截
// {count: 1} count 2 Proxy {count: 1}let porxy1 new Proxy({},{get: function(target,propKey) {if(propKey time) {return 99}return 100}
})
console.log(porxy1.age) // 100
console.log(porxy1.time) // 99// hander没有设置任何拦截等于直接通向原对象没有任何拦截效果访问proxy就等同于访问target
let target {}
let hander {}
let proxy2 new Proxy(target,hander)
proxy2.name xiao
console.log(proxy2.name) // xiao// proxy对象是obj对象的原型obj对象本身并没有time属性
// 所以根据原型链会在proxy对象上读取该属性导致被拦截
let proxy3 new Proxy({},{get: function(target,propKey) {return 419}
})
let obj1 Object.create(proxy3)
console.log(obj1.name) // 419发问vue3的响应式为什么Object.defineProperty() 要改成Proxy看下面
Object.defineProperty(obj, prop, descriptor)
// 显式
Object.defineProperty(obj, key, {enumerable: false,configurable: false,writable: false,value: static
})// configurable 当且仅当该属性的 configurable 键值为 true 时
//该属性的描述符才能够被改变同时该属性也能从对应的对象上被删除。 默认为 false。// enumerable 当且仅当该属性的 enumerable 键值为 true 时
// 该属性才会出现在对象的枚举属性中。 默认为 false。// value该属性对应的值。可以是任何有效的 JavaScript 值数值对象函数等。
// 默认为 undefined。//writable 当且仅当该属性的 writable 键值为 true 时属性的值
// 也就是上面的 value才能被赋值运算符 (en-US)改变。 默认为 false。//get 属性的 getter 函数如果没有 getter则为 undefined。
//当访问该属性时会调用此函数。执行时不传入任何参数但是会传入 this 对象由于继承关系
// 这里的this并不一定是定义该属性的对象。该函数的返回值会被用作属性的值。 默认为 undefined。//set 属性的 setter 函数如果没有 setter则为 undefined。
// 当属性值被修改时会调用此函数。该方法接受一个参数也就是被赋予的新值
// 会传入赋值时的 this 对象。 默认为 undefined。var o {}; // 创建一个新对象
var bValue 38;
Object.defineProperty(o, b, {// 使用了方法名称缩写ES2015 特性// 下面两个缩写等价于// get : function() { return bValue; },// set : function(newValue) { bValue newValue; },get() { return bValue; },set(newValue) { bValue newValue; },enumerable : true,configurable : true
});Object.defineProperty() 就上面那几把梭看看proxy好几把梭换换换
var handler {get: function(target, name) {if (name prototype) {return Object.prototype;}return Hello, name;},apply: function(target, thisBinding, args) {return args[0];},construct: function(target, args) {return {value: args[1]};}
};var fproxy new Proxy(function(x, y) {return x y;
}, handler);fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype Object.prototype // true
fproxy.foo Hello, foo // true对于可以设置、但没有设置拦截的操作则直接落在目标对象上按照原先的方式产生结果。 下面是 Proxy 支持的拦截操作一览一共 13 种。
get(target, propKey, receiver)拦截对象属性的读取比如proxy.foo和proxy[‘foo’]。set(target, propKey, value, receiver)拦截对象属性的设置比如proxy.foo v或proxy[‘foo’] v返回一个布尔值。has(target, propKey)拦截propKey in proxy的操作返回一个布尔值。deleteProperty(target, propKey)拦截delete proxy[propKey]的操作返回一个布尔值。ownKeys(target)拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环返回一个数组。该方法返回目标对象所有自身的属性的属性名而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。getOwnPropertyDescriptor(target, propKey)拦截Object.getOwnPropertyDescriptor(proxy, propKey)返回属性的描述对象。defineProperty(target, propKey, propDesc)拦截Object.defineProperty(proxy, propKey, propDesc、Object.defineProperties(proxy, propDescs)返回一个布尔值。preventExtensions(target)拦截Object.preventExtensions(proxy)返回一个布尔值。getPrototypeOf(target)拦截Object.getPrototypeOf(proxy)返回一个对象。isExtensible(target)拦截Object.isExtensible(proxy)返回一个布尔值。setPrototypeOf(target, proto)拦截Object.setPrototypeOf(proxy, proto)返回一个布尔值。如果目标对象是函数那么还有两种额外操作可以拦截。apply(target, object, args)拦截 Proxy 实例作为函数调用的操作比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。construct(target, args)拦截 Proxy 实例作为构造函数调用的操作比如new proxy(…args)。
