乐趣区

关于javascript:JavaScript-之-Proxy

前言

Proxy 能够了解成,在指标对象之前架设一层“拦挡”,外界对该对象的拜访,都必须先通过这层拦挡,因而提供了一种机制,能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理,用在这里示意由它来“代理”某些操作,能够译为“代理器”。

语法

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是下面这种模式,不同的只是 handler 参数的写法。其中:

  • new Proxy() 示意生成一个 Proxy 实例
  • target 参数示意所要拦挡的指标对象
  • handler 参数也是一个对象,用来定制拦挡行为

如果 handler 没有设置任何拦挡,那就等同于间接通向原对象。

let target = {};
let handler = {};
let proxy = new Proxy(target,handler);
proxy.name = '编程三昧'; 
console.log(target.name); // '编程三昧'

还有一个技巧是将 Proxy 对象,设置到 object.proxy 属性, 从而在 object 对象上调用:

let proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

let obj = Object.create(proxy);
obj.time // 35

get()

get() 办法用于拦挡某个属性的读取操作,能够承受三个参数,顺次为:

  • 指标对象
  • 属性名
  • proxy 实例自身(严格地说,是操作行为所针对的对象),可选。

get() 办法的用法,上文曾经有一个例子,上面是另一个拦挡读取操作的例子:

let  perosn = {
    name:'james',
    age:26,
    profession:'software'
}

var proxy = new Proxy(perosn,{get:function(target,property) {if (property in target) {return target[property];
        } else {throw new ReferenceError("propertype\""+property + "\" does no exit");
        }
    }
});

console.log(proxy.name,proxy.profession); // james software
console.log(proxy.sex); // Uncaught ReferenceError: propertype"sex" does no exit

set()

set() 办法用来拦挡某个属性的赋值操作,能够承受四个参数,顺次为:

  • 指标对象
  • 属性名
  • 属性值
  • Proxy 实例自身,可选。

假设 person 对象有一个 age 属性,该属性应该是一个不大于 200 的整数,那么能够应用 Proxy 保障 age 的属性值符合要求。

let perosn = {
    name:'james',
    age:26,
    profession:'software'
}

let proxy = new Proxy(perosn,{get:function(target,property) {if (property in target) {return target[property];
        } else {throw new ReferenceError("propertype\""+property + "\" does no exit");
        }
    },
    set:function(target,key,value) {if(key === 'age') {if(value>80) {throw ReferenceError("invail");
            } else {return target[key] = value;
            }
        } else {return target[key];
        }
    }
});
proxy.age = 60;
console.log(proxy.name,proxy.profession,proxy.age); // james software 60

proxy.age = 99; // Uncaught ReferenceError: invail

apply()

apply() 办法拦挡:

  • 函数的调用
  • call 操作
  • apply 操作

apply() 办法能够承受三个参数,别离是:

  • 指标对象
  • 指标对象的上下文对象(this)
  • 指标对象的参数数组。
let twice = {apply(target, ctx, agrs) {return Reflect.apply(...arguments) * 2;
    }
};
function sum (a, b) {return a + b;}
let proxy5 = new Proxy(sum, twice);

console.log(proxy5(1, 3));  // 8
console.log(proxy5.apply(null, [1, 3])); // 8

另外,间接调用 Reflect.apply 办法,也会被拦挡。

Reflect.apply(proxy5, null, [9, 10]) // 38

has()

has() 办法用来拦挡 HasProperty 操作,即判断对象是否具备某个属性时,这个办法会失效。典型的操作就是 in 运算符。

has() 办法能够承受两个参数,别离是指标对象、需查问的属性名。

上面的例子应用 has 办法暗藏某些属性,不被 in 运算符发现。

let stu1 = {name: '张三', score: 59};
let stu2 = {name: '李四', score: 99};

let handler = {has(target, prop) {if (prop === 'score' && target[prop] < 60) {console.log(`${target.name} 不及格 `);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

'score' in oproxy1
// 张三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {console.log(oproxy1[a]);
}
// 张三
// 59

for (let b in oproxy2) {console.log(oproxy2[b]);
}
// 李四
// 99

下面代码中,has 拦挡只对 in 运算符失效,对 for...in 循环不失效,导致不符合要求的属性没有被 for…in 循环所排除。

Proxy 反对的拦挡操作一览

Proxy 反对的拦挡操作根本有 13 种。

get(target, propKey, receiver)

拦挡对象属性的读取,比方:

  • proxy.foo
  • proxy['foo']

set(target, propKey, value, receiver)

拦挡对象属性的设置,比方 proxy.foo = vproxy['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)

~

~ 本文完,感激浏览!

~

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!

退出移动版