• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript的Proxy对象详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、Proxy 是什么?

Proxy 对象用于拦截并修改目标对象的指定操作。

// 语法
const p = new Proxy(target, handler)
  • target :目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
  • handler :以函数作为属性的对象,实现拦截和自定义操作。

二、怎么用?

1、使用 Proxy 的简单实例

访问不存在的属性,设置默认值返回而不返回 undefined

// 1、找到合适的 handler 并编写代码
const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};
// 2、新建 Proxy 对象
const p = new Proxy({}, handler);
// 3、执行操作
p.a = 1;
p.b = undefined;
// 4、查看结果
console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

2、目标对象被正确修改

let target = {};
let p = new Proxy(target, {});
p.a = 37;   // 操作转发到目标
console.log(target.a);    // 37. 操作已经被正确地转发

3、使用 set handler 做数据验证

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;
    // 表示成功
    return true;
  }
};
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

4、扩展构造函数

function extend(sup, base) {
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype, "constructor"
  );
  base.prototype = Object.create(sup.prototype);
  var handler = {
    construct: function(target, args) {
      var obj = Object.create(base.prototype);
      this.apply(target, obj, args);
      return obj;
    },
    apply: function(target, that, args) {
      sup.apply(that, args);
      base.apply(that, args);
    }
  };
  var proxy = new Proxy(base, handler);
  descriptor.value = proxy;
  Object.defineProperty(base.prototype, "constructor", descriptor);
  return proxy;
}
var Person = function (name) {
  this.name = name
};
var Boy = extend(Person, function (name, age) {
  this.age = age;
});
Boy.prototype.sex = "M";
var Peter = new Boy("Peter", 13);
console.log(Peter.sex);  // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age);  // 13

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript动画函数封装详解发布时间:2022-02-05
下一篇:
深入了解Vue组件七种通信方式发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap