• ES6 Proxy


    定义:

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

    语法:

    Proxy对象由一个目标对象(target)和一个捕捉器对象(handler)组成。目标对象是被代理的对象,而捕捉器对象定义了在代理对象上执行操作时的行为。

    let proxy = new Proxy(target, handler);

     Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

    使用方法:

    属性访问拦截:

    1. const target = {
    2. name: 'Alice',
    3. age: 25
    4. };
    5. const handler = {
    6. get: function(target, prop) {
    7. console.log(`访问属性: ${prop}`);
    8. return target[prop];
    9. }
    10. };
    11. const proxy = new Proxy(target, handler);
    12. console.log(proxy.name); // 输出: "访问属性: name",然后输出 "Alice"

    属性赋值拦截:

    1. const target = {
    2. name: 'Alice',
    3. age: 25
    4. };
    5. const handler = {
    6. set: function(target, prop, value) {
    7. console.log(`设置属性: ${prop} 值为 ${value}`);
    8. target[prop] = value;
    9. }
    10. };
    11. const proxy = new Proxy(target, handler);
    12. proxy.age = 30; // 输出: "设置属性: age 值为 30"
    13. console.log(proxy.age); // 输出: 30

    函数调用拦截:

    1. const target = function(message) {
    2. console.log(`原始函数被调用,传入参数: ${message}`);
    3. };
    4. const handler = {
    5. apply: function(target, thisArg, args) {
    6. console.log(`函数调用拦截,参数: ${args}`);
    7. target.apply(thisArg, args);
    8. }
    9. };
    10. const proxy = new Proxy(target, handler);
    11. proxy('Hello!'); // 输出: "函数调用拦截,参数: Hello!",然后输出 "原始函数被调用,传入参数: Hello!"

    常见实例方法:

    get():

    get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。

    set():

    set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。

    apply():

    apply方法拦截函数的调用、callapply操作。

    apply方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

  • 相关阅读:
    大数据培训技术phoenix表操作
    项目1:基于Java API文档制作的搜索引擎
    Jmeter之BeanShell详解和夸线程调用
    量化投资学习——股票分红对期指的影响
    M1(arm) Mac安装open3d
    (四)数组——PHP
    计算机毕业设计Python深度学习房价预测 房价可视化 链家爬虫 房源爬虫 房源可视化 卷积神经网络 大数据毕业设计 机器学习 人工智能 AI
    1500*C. Journey(dfs&树的遍历&数学期望)
    Java设计模式之抽象工厂模式
    SpringBoot - Post请求-接收参数
  • 原文地址:https://blog.csdn.net/m0_72759446/article/details/133951399