公告:九九网站目录为广大站长提供免费收录网站服务,会员可在线完成投稿无需添加友情链接。只收录内容正规合法的网站;快审网站软文10元

点击这里在线咨询客服
新站提交
  • 网站:8453
  • 待审:20
  • 小程序:9
  • 文章:3601
  • 会员:2183

 

今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化的逻辑,定义完后我们可以通过代理定义的方法间接操作对象。再说得通俗点,在我们的生活中,我们买房租房一般不找房东先找中介的道理一样,因为中介充当了房源的代理一样。

接下来我们通过代码理解下什么是代理,用JS创建代理比较简单,如下段代码所示:

letinitialObject = {/* 定义对象 */};lethandler = {/* 自定义相关的拦截器处理逻辑 */};letproxyedObject =newProxy(initialObject, handler);

简单解释下,我们可以通过代理去调用 handler 里定义的逻辑去操作对象,对象代理有两个参数,initialObject 是目标对象,handler 拦截器对象(或者称作处理器对象)。

接下来,我们来看一个例子,我们通过代理实现读取一个对象的属性,如果对象的属性不存在,则返回代理中定义的默认值,这里我们在代理里重写了原有对象的 get 方法。

letdog = {
  name:"Spike"};consthandler = {
    get: (obj, property) => propertyinobj ? obj[property] :Youdonthave defined  a property named  +  property;
}constproxyDog = new Proxy(dog, handler);
console.log(proxyDog.name);// 将会输出 Spikeconsole.log(proxyDog.age);// 输出 You dont have defined  a property named age

上述例子,我们通过 get: (obj, property) => ... 方法重写了对象的 get 方法。

最后我再看一个如何通过代理去更对对象的值,如果更新的值不是我们期望的值,系统则抛出异常错误,不能正常更新,否则重新赋值并更新对象的属性。

letdog = {
    name:"Spike",
    age:1;
};lethandler = { 
    set: (obj, property, value) => {if(property ===age) {if(!Number.isInteger(value)) throw new TypeError(Usenumbers onlyforage);if((value <0) || (value >30))  throw new RangeError(Adog cantlive that long); 
        } 
        obj[prop] = value;returntrue; 
    } 
};constproxyDog = new Proxy(dog, handler);
proxyDog.age = -1;// will throw A dog cant live that longproxyDog.age =veryold;// will throw Use numbers only for age

通过 JS 代理我们不仅可以重写 getters 和 setters 方法,我们还可以进行这些操作:deleteProperty、construct、getOwnPropertyDescriptor 等...

今天的文章就到这里,不知道你是否理解代理对象啦,在接下来的文章里,我们再聊聊代理在实际项目中的运用,感谢你的阅读。

Daniel

分享到:

  admin

注册时间:

网站:0 个   小程序:3 个  文章:0 篇

  • 453

    网站

  • 9

    小程序

  • 3601

    文章

  • 83

    会员

赶快注册账号,推广您的网站吧!
热门网站
最新入驻小程序

跳一跳2022-08-22

跳一跳是微信开发的一款小游戏,有

数独大挑战2018-06-03

数独一种数学游戏,玩家需要根据9

答题星2018-06-03

您可以通过答题星轻松地创建试卷

全阶人生考试2018-06-03

各种考试题,题库,初中,高中,大学四六

运动步数有氧达人2018-06-03

记录运动步数,积累氧气值。还可偷

每日养生app2018-06-03

每日养生,天天健康