ES6新特性之Proxy（有助于理解Vue3的响应式原理）

简介

  Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy可以理解成：在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

let proxy = new Proxy(target, handler);

  ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。其中，new Proxy() 表示生成一个Proxy实例；target 参数表示所要代理（拦截）的目标对象，即如果没有Proxy的介入，操作原来要访问的就是这个对象；handler 参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截（代理）对应的操作；如果handler没有设置任何拦截，那就等同于直接操作原对象，且一个拦截器函数中可以设置拦截多个操作。注意：要使得Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象进行操作。

let person = {
    name: '柳小姐', age: 18 };
let p = new Proxy(person, {
   
	get(target,propName) {
   
		console.log(`读取了p身上的${
     propName}属性`);
		return target[propName];
	}
	set(target,propName,value) {
   
		console.log(`修改了p身上的${
     propName}属性`);
		target[propName] = value;
	}
});

另外，Proxy实例也可以作为其他对象的原型对象。

let proxy = new Proxy({
   }, {
   
  get(target,propName) {
   
    return 35;
  }
});
let obj = Object.create(proxy);
//proxy对象是obj对象的原型，obj对象本身并没有time属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截，由于拦截函数总是返回35，所以访问任何属性都得到35
console.log(obj.time);  //35

注意：如果一个属性不可配置（configurable）且不可写（writable），则 Proxy不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

Proxy实例的方法

1、get(target, propKey, receiver)：：get方法用于拦截对象属性的读取操作，如 proxy.foo 和 proxy[‘foo’]。可以接受三个参数：依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。另外，get 方法可以继承。

let p = new Proxy({
   }, {
   
  get(target, propertyKey) {
   
    console.log('GET ' + propertyKey);
    return target[propertyKey]; 
  }
});
let obj = Object.create<