loading...

4

尤大大说Proxy是个好东西,那么就来分享一下使用方法

javascript读完大概需要6分钟

  • 发布时间:2018-11-21 15:15 星期三
  • 刘伟波
  • 551
  • 更新于2018-11-21 15:17 星期三

Proxy

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)

语法

let p = new Proxy(target, handler);
  • target
    用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
  • handler
    一个对象,其属性是当执行一个操作时定义代理的行为的函数。

方法

Proxy.revocable()
创建一个可撤销的Proxy对象。

示例

基础示例

在以下简单的例子中,当对象中不存在属性名时,缺省返回数为37。例子中使用了 get。


let handler = {
    get: function(target, name){
        return name in target ? target[name] : 37;
    }
};

let p = new Proxy({}, handler);

p.a = 1;
p.b = undefined;

console.log(p.a, p.b);    // 1, undefined

console.log('c' in p, p.c);    // false, 37

验证

通过代理,你可以轻松地验证向一个对象的传值。这个例子使用了 set。

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalid

摘自:MDN

--
作者:刘伟波

链接:http://www.liuweibo.cn/p/241

来源:刘伟波博客

本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符
    关于技术问题或者有啥不懂的都可以来 我的视频空间 提问, 推荐作者总结知识点 前端知识体系, 感謝支持!