Proxy代理的作用

Proxy代理的作用：

1. Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

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

3. ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

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

4. 一个技巧是将 Proxy 对象，设置到object.proxy属性，从而可以在object对象上调用。

5. get方法用于拦截某个属性的读取操作。下面是一个拦截读取操作的例子。

var person = { 
   
  name: "张三"
};

var proxy = new Proxy(person, { 
   
  get: function(target, property) { 
   
    if (property in target) { 
   
      return target[property];
    } else { 
   
      throw new ReferenceError("Property \"" + property + "\" does not exist.");
    }
  }
});

proxy.name // "张三"
proxy.age // 抛出一个错误

6. set方法用来拦截某个属性的赋值操作。

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');
      }
    }

    // 对于age以外的属性，直接保存
    obj[prop] = value;
  }
};

let person = new Proxy({ 
   }, validator);

person.age = 100;

person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错

7. apply方法拦截函数的调用、call和apply操作。apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var twice = { 
   
  apply (target, ctx, args) { 
   
    return Reflect.apply(...arguments) * 2;
  }
};
function sum (left, right) { 
   
  return left + right;
};
var proxy = new Proxy(sum, twice);

proxy(1, 2) // 6

proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

今天的文章Proxy代理的作用分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。