在实际开发中经常会遇到js抛出的错误,但是我们有没有想过自己去接管js异常验证,根据自己的需求抛出异常呢?原本也许不行,但是在es6出来后就可以做到了

一、代理(Proxy)

什么是‘代理’ 呢?代理:就是调用new 创建一个和目标(traget)对象一直的虚拟化对象,然该代理中就可以拦截JavaScript引擎内部目标的底层对象的操作;这些底层操作被拦截后会触发响应特定操作的陷阱函数

来看个简单的案例

    let tartget = {};
let proxy = new Proxy(target,{});
proxy.name = 'proxy';
console.log(proxy.name); // proxy
console.log(tartget .name); // proxy tartget .name = 'tartget';
console.log(proxy.name); // target
console.log(tartget .name); // target

如案例

proxy.name = 'proxy'; 将proxy赋值给proxy.name时,代理就会将该操作转发给目标,执行name属性的创建;然而他只是做转发而不会存储该属性;

so他们之间存在一个相互引用;tartget .name设置一个新值后,proxy.name值也改变了;

二、反射(Reflect)

那反射又是什么呢?反射:它提供了一个Reflect对象API;该对像中的方法默认特性与底层的操作对应;而每一个代理陷阱会对应一个命名和参数都相同的Reflect方法(其实就是每个代理陷阱都会对应一个Reflect api接口供覆写JavaScript底层操作)

映射关系如下表:

代理陷阱 覆写的特性 默认特性
get 读写一个属性值 Reflect.get()
set 写入一个属性 Reflect.set()
has in操作 Reflect.has()
deleteProperty delete操作符 Reflect.deleteProperty()
getAPrototypeof Object.getAPrototypeof () Reflect.getAPrototypeof ()
setAPrototypeof Object.setAPrototypeof () Reflect.setAPrototypeof ()
isExtensible Object.isExtensible() Reflect.isExtensible()
preventExtensions Object.preventExtensions() Reflect.preventExtensions()
getOwnPropertyDescriptor Object.getOwnPropertyDescriptor() Reflect.getOwnPropertyDescriptor()
defineaProperty Object.defineaProperty() Reflect.defineaProperty()
ownKeys Object.keys() 、 Object.getOwnPropertyNames()和 Object.getOwnPropertySysmbols() Reflect.ownKeys()
apply 调用一个函数 Reflect.apply()
construct 用new调用一个函数 Reflect.construct()

三、使用set陷阱验证属性

接下来使用set陷阱来验证一下对象属性赋值操作(如为对象新增属性,要求必须赋值为int)

let target = {
name :'target'
};
let proxy = new Proxy(target,{
set(trapTarget,key,value,receiver){
//忽略不希望受到影响的已有属性
if(!trapTarget.hasOwnProperty(key)){
if(isNaN(value)){
throw new TypeError("属性必须是数字哟,亲!");
}
}
// 添加属性
return Reflect.set(trapTarget,key,value,receiver);
}
}); // 添加一个新属性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(proxy.count); // 1 // 由于目标已有name属性,so 如上第一个if不成立(赋值成功)
proxy.name= "proxy";
console.log(proxy.name); // proxy
console.log(proxy.name); // proxy // 新建一个属性同时赋值一个非int 值,第一个if成立,第二个if验证isNaN(key) = true 即抛出异常
proxy.anotherName = "proxy";

案例中set(trapTarget,key,value,receiver) 这个set陷阱默认接收 四个参数

  • trapTarget 用于接收属性(代理的目标)的对象
  • key 要写入的属性键(字符串或Symbol类型)
  • value 被写入的属性的值
  • receiver 操作发生的对象(通常是代理)

四、使用get 陷阱验证对象结构

let target = {};
console.log(target.name); // undefined

在JavaScript中调用一个对象不存在的属性不会报错,反而使用undefined代替被读取属性的值

而喝多时候会带来意想不到的bug,现在我们可以使用get陷阱来验证该问题

依然看这个案例

    let proxy = new Proxy(target,{
get(trapTarget,key,receiver){
//忽略不希望受到影响的已有属性
if(!(key in receiver)){
throw new TypeError("sorry 亲! 你找的 "+key+" 属性不存在。!")
}
// 添加属性
return Reflect.get(trapTarget,key,receiver);
}
});
// 添加一个属性,
proxy.name= "proxy";
console.log(proxy.name); // proxy // 读取一个不存在的属性 直接会抛出异常
console.log(proxy.nme);

如上使用in操作判断receiver中是否存在被读取的属性;如果没有抛出异常

其中get(trapTarget,key,receiver) 参数

  • trapTarget 被读取属性源对象(代理的目标)
  • key 要读取的属性键(字符串或Symbol类型)
  • receiver 操作发生的对象(通常是代理)

五、函数代理apply和construct陷阱

使用这个两个陷阱来验证函数调用时的参数的正确性

如下案例

// 参数求和
function sum (...values){
return values.reduce((previous,current) => prvious + current, 0);
} let sumProxy = new Proxy(sum,{
apply:function(trapTarget,thisArg,argumentList){
argumentList.forEach(arg => {
if(typeof arg !== "number"){
throw new TypeError("所有参数必须是数字,亲!");
}
});
return Reflect.apply(trapTarget,thisArg,argumentList);
},
// 防止使用new 关键字调用
construct:function(trapTarget,argumentList){
throw new TypeError("亲,你不能这么干,该函数不能通过new调用。");
}
}); // 测试哈
console.log(sumProxy(1,2,3,4)); // 10 // 传入一个非数字的属性值试试 【直接抛出异常】
console.log(sumProxy(1,“2”,3,4)); // 10 // 同样使用new调用 【直接抛出异常】
let result = new sumProxy();

apply陷阱和Reflect.apply()都接受同样的参数

  • trapTarget 被执行的函数(代理的目标)
  • thisArg 函数被调用时内部的this的值
  • argumentList传递给函数的参数数组

当使用new调用函数时 会触发construct陷阱,接收的参数为

  • trapTarget 被执行的函数(代理的目标)
  • argumentList传递给函数的参数数组

其中Reflect.construct()第三个参数是newTarget 这是一个可选参数。用于指定该函数内部

new.target的值

看到这里有没有感觉这个对于js项目代码检测还是蛮有用处的呢。



ok先到这里,时间不早了改且休息了;改天继续…

js代理(Proxy) 和 反射(Reflection)的更多相关文章

  1. 代理(Proxy)和反射(Reflection)

    前面的话 ES5和ES6致力于为开发者提供JS已有却不可调用的功能.例如在ES5出现以前,JS环境中的对象包含许多不可枚举和不可写的属性,但开发者不能定义自己的不可枚举或不可写属性,于是ES5引入了O ...

  2. JAVA设计模式-动态代理(Proxy)源码分析

    在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...

  3. [整理]C#反射(Reflection)详解

    本人理解: 装配件:Assembly(程序集) 晚绑定:后期绑定 MSDN:反射(C# 编程指南) -----------------原文如下-------- 1. 什么是反射2. 命名空间与装配件的 ...

  4. 【设计模式】学习笔记17:代理模式之保护代理与Java反射

    本文出自   http://blog.csdn.net/shuangde800 本笔记内容: 1. Java动态代理,反射机制 2. 保护代理 3. 应用保护代理实现的约会系统 ----------- ...

  5. Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

  6. 浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance

    浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance java.lang.reflect.Proxy:该类用于动态生成代理类,只需传入目标接口.目标接口的类加载器以及Inv ...

  7. AGS API for JS代理页的使用

    AGS API for JS代理页的使用 1.概述 代理页即使用后端语言编写的请求转发页面,部署在Web应用端.客户端请求先发送到该代理页,代理页再将该请求转发到服务器处理,服务器处理结果再经代理页转 ...

  8. C#反射(Reflection)详解

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...

  9. JAVA设计模式-动态代理(Proxy)示例及说明

    在Mybatis源码解析,一步一步从浅入深(五):mapper节点的解析文章的最后部分,我们提到了动态代理的概念,下面我们就简单了解一下动态代理. 一,概念 代理设计模式的目的就是在不直接操作对象的前 ...

  10. ArcGIS JS 使用Proxy之 Printing Tools unable to connect to mapServer

    ArcGIS JS使用Proxy.ashx将地图服务隐藏,并在微博服务器端增加了地图服务权限判断. Proxy.ashx做了如下设置, <serverUrl url="http://l ...

随机推荐

  1. Java项目是不是分布式,真有那么重要吗?

    大家好,我是3y啊. 大概不知道从什么时候,「微服务」「分布式」这两个词又再次频繁出现在我的视线里. 「微服务」「分布式」在我刚毕业的时候还是比较关注的,那时候还入门了一把SpringCloud,写了 ...

  2. Cesium近地天空盒,解决图片旋转问题

    前言 当我们使用官网的例子设置天空盒后,会发现天空云彩是斜的,比如下边这张图:通过查阅网上资料,需要修改cesium的源码,以下是修改后skybox的源码,在自己的项目中引入即可: 实现代码 cons ...

  3. Windows10 穿越火线手感和Windows7不一样

    如果是穿越火线或者其他FPS玩家,应该会感觉Win10和WIin7两者手感会有一定的区别.为什么升级了系统变菜了?心理作用?其实确实和系统有关系哦.我从Windows7升级到Windows10玩穿越火 ...

  4. [C++STL教程]2.queue队列容器,小白都能看懂的讲解!

    在学习数据结构的时候我们会听到这样一个词:队列. 本文将介绍STL中的队列:queue 本文仅从入门和实用角度介绍queue的用法,主要针对初学者或竞赛向.如有不严谨的地方欢迎指正!本文长度约2000 ...

  5. Python爬取爬取明星关系并写入csv文件

    今天用Python爬取了明星关系,数据不多,一共1386条数据,代码如下: import requests from bs4 import BeautifulSoup import bs4 impor ...

  6. 9.SSRF和XML

    SSRF和XML 目录 SSRF和XML SSRF介绍 SSRF漏洞挖掘 SSRF漏洞利用 内网探测: 常见端口探测: 协议探测: file协议敏感文件: XML介绍 DTD定义 DTD作用 XXE介 ...

  7. scoket用法

    一.scoket基本介绍 1.scoket简介(以下是来自chatgpt回答) 1)Socket(套接字)是计算机网络中用于描述主机之间通信的一种机制.它定义了一种标准的接口, 使得应用程序可以利用网 ...

  8. pysimplegui之第一个程序,包括回调函数,事件,阻塞等待内容

    自定义窗口 API 调用(您的第一个窗口) 总结一下:我遇到的坑, 比如拿输入框的内容的时候可以直接通过value[key] 几种窗口模式就是什么时候用timeout这个参数 关闭窗口可以的一边形式 ...

  9. python去掉重复值的方法--四种

    my_list = [1,1,1,1,2,3,3,3,4,5,5,56,6,7,77,7,5,5,3]# 集合法:缺点是结果会打乱原始数据的顺序print(set(my_list)) # 列表法:缺点 ...

  10. 理解String、StringBuilder和StringBuffer

    1. String.StringBuilder和StringBuffer异同 相同点:底层都是通过char数组实现的 不同点: String对象一旦创建,其值是不能修改的,如果要修改,会重新开辟内存空 ...