JavaScript的Proxy

prtyaa
prtyaa 2023-12-26 17:20:46 62959
分类专栏： 资讯

Proxy构造方法

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

代理目标对象的访问属性操作

/**
 * 结论:
 * handler.get方法有三个参数，target、key、receiever
 * target是用Proxy包装的目标对象
 * key是执行get操作的时候target的属性名
 * receiever是当前的Proxy对象
 */
var o = {x: "xxx"};
var p = new Proxy(o, {
    get(target, key, receiver) {
        console.log(`target: ${target === o}, key: ${key === "x"}, receiver: ${receiver === p}`)
    }
});
p.x;  // target: true, key: true, receiver: true

target会不会随着之前的目标对象被重新赋值而发生变化呢

/**
 * 结论:
 * target不会随着之前的目标对象被重新赋值而发生变化，target虽然在后面被重新赋值了，但是参数是被作为target参数传入Proxy的时候的那个引用
 */
var o = {x: "xxx"};
var temp = o;
o = new Proxy(o, {
    get(target, key, receiver) {
        console.log(`target: ${target === o}, temp: ${temp === target}, key: ${key === "x"}, receiver: ${receiver === o}`)
    }
});
o.x; // target: false, temp: true, key: true, receiver: true

访问某个对象属性之前先输出时间，然后再输出这个属性的值

var o = {x: "xxx"};
var p = new Proxy(o, {
    get(target, key, receiver) {
        console.log(`${new Date} : ${target.x}`);
    }
});
p.x; // Mon Mar 16 2020 11:57:05 GMT+0800 (中国标准时间) : xxx

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30913
赞同 0
评论 0 条

相关文章

  • 需要开通VIP以后页面内容才能复制怎么办？控制台禁用javascript即可 2023-12-26 67026 浏览

    问题描述有些网页上的内容我们不能直接复制，如果想要复制的话，就要充钱成为VIP以后，才能复制，比如“某某文库”...那么本文记录一下解决方案的步骤...图示如下：仰望vip大佬...解决方案如下：第一步，打开控制台，点击右上角的小齿轮图标按钮首先F12打开控制台或右击-->检查打开控制台第二步，禁用javascript即可然后就可以了复制了，不会受到任何阻碍...总结打开控制台-->点击右上角小齿

  • javascript如何实现输入一个字符，判断是否为英文大写字母('A'-'Z')、小写字母('a'-'z')、数字或是其他符号，并输出相应信息？ 2023-12-26 64743 浏览

    在javascript中：大写字母A-Z对应的ASCII码值是65-90，小写字母a-z对应的ASCII码值是97-122，首先我们需要获取用户输入的字符(假设用户每次只能输入一个字符)，然后将输入的字符转换为对应的ASCII值，再将转换的ASCII值通过if-else-if条件语句进行判断，ASCII的值在65-90这个范围内，则是大写的A-Z；ASCII的值在97-122这个范围内，则是小写的

  • javascript与ECMAScript有什么关系？ 2023-12-26 68562 浏览

    ECMAScript是javascript的规格，javascript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。javascript的创造者是Netscape公司，将javascript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布文件的第一版(ECMA-262)，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开

  • javascript的generator 2023-12-26 63584 浏览

    1、generator是可以用来控制迭代器的函数，它主要的方法有以下三个：generator.prototype.next()返回一个由yield表达式生成的值generator.prototype.return()返回给定的值，并结束生成器generator.prototype.throw()向生成器抛出一个错误2、基本使用常规的遍历，会一次性遍历输出所有的值，但是使用了generator生成器

  • javascript的事件委托 2023-12-26 67690 浏览

    事件处理程序过多会导致页面的整体运行性能，解决的方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：对li的click事件会冒泡到ul上，所以只需要将点击事件绑定在ul上即可。考虑性能问题，用完点击事件后，可以用removeEventListener解除绑定事件。注：addEventListener第三个参数，false表示在冒泡阶段调用事件处理程

  • javascript的跨域方法 2023-12-26 65328 浏览

    一、为什么会产生跨域同源策略是对XHR(XMLHttpRequest)的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。二、跨域的解决方案CORS(Cross-OriginResourceSharing,跨域资源共享)图像pingJSONPwebsockets：全双工、双向通信postMessage1

  • javascript的apply、call 和 bind 2023-12-26 68276 浏览

    1、每个函数都包含有非继承而来的方法：call()、apply()。它们的作用都是在特定的作用域中调用函数，即设置函数体内this对象的值。传递参数扩充函数赖以运行的作用域2、apply()apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象。例如：在这个例子中，callSum1()执行sum()函数时

  • javascript 浮点数值：0.1 + 0.2 不等于 0.3 2023-12-26 66817 浏览

    1、浮点数值所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。例如：constfloatNum=0.1;2、浮点数值的保存保存浮点数值需要的内存空间是保存整数值的2倍，因此ECMAScript会不失时机的将浮点数值转换为整数值。例如：constfloatNum1=1.;//小数点后面没有数字，解析为1constfloatNum2=1.0;//整数——解析为13、e/E

  • javascript 添加包含事件的元素的方法 2023-12-26 63108 浏览

    <em class="color_r">javascript</em>鼠标事件偏移量的研究

    • 关注我们

      信创开放社区公众号二维码

      扫一扫关注公众号

      信创开放社区交流群

      添加我为好友，拉您入交流群！

    添加我为好友，拉您入交流群！

    请使用微信扫一扫!