11-ES6-Proxy

1、Proxy–在目标对象前假设一个"拦截"层，外界对该对象的访问都必须通过这层拦截，
提供一种机制可以对外界的访问进行过滤和改写。

 Proxy接收三个参数:
   参数一: { target } 代表的目标对象；
   参数二: { handle } 代表配置对象，定制拦截行为
   参数三: receiver

 let obj = new Proxy( {}, {
   // 拦截代理所有目标对象的读取属性操作
   get( target, key, receiver ){
     console.log( `getting ${ key }` );
     return Reflect.get( target, key, receiver );
   },
   // 拦截代理所有目标对象的设置属性操作
   set( target, key, value, receiver ){
     console.log( `setting ${ key }`);
     return Reflect.set( target, key, value, receiver );
   }
 });
 obj.a = 10;
 console.log( obj );    //   setting a Proxy {}
 console.log( obj.a );  //   getting a Proxy {}

2、要是 Proxy 起作用, 必须针对 Proxy 实例进行操作,而不是针对目标对象进行操作。
如果 handler 没有设置任何拦截, 那就等同于直接通向源对象。

   let target = {};
   let handler = {};
   let proxy = new Proxy( obj, handler );
   proxy.b = 2;
   target.b; // 2

3、同一个拦截器函数可以设置拦截多个操作

   let handler = {
     get( target, name ){
       if( name === 'prototype' ){
         return Object.prototype;
       }
       return 'Hello, ' + name;
     },
     apply( target, thisBinding, args ){
       return args[0];
     },
     construct( target, args ){  // args [ 1, 2 ]
       return { value: args[ 1] };
     }
   };

   let fproxy = new Proxy( function( x, y ){
     return x + y;
   }, handler);

   fproxy( 1, 2 );  // 1
   new fproxy( 1, 2 ); // { value: 2 }
   fproxy.prototype === Object.prototype  // true
   fproxy.foo // "Hello, foo"

4、get( target, handler, receiver ): 拦截某个属性的读取操作

4-1)如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性返回 undefined

   let person = { name: 'hello' };
   let proxy = new Proxy( person, {
     get( target, property ){
       if( property in target ){
         return target[ property ];
       }else{
         throw new ReferenceError( "property \""+ property +"\" does not exist." );
       }
     }
   });
   console.log( proxy.name ); // hello
   console.log( proxy.age );  // 报错

4-2)get方法可以继承

   let proto = new Proxy({},{
     get( target, propertyKey, receiver ){
       console.log( "GET " + propertyKey );
       return target[ propertyKey ];
     }
   });
   let obj = Object.create( proto );
   console.log( obj.age );  // "GET age" undefined
   
   拦截操作定义在 prototype 对象上, 所以如果读取 obj 对象继承的属性, 拦截会生效

5、set( target, propKey, value, receiver ): 拦截对象属性的设置如果目标对象自身的某个属性不可写也不可配置,那么 set 不得改变这个属性的值,只能返回同样的值,否则会报错

   let validator = {
     ser( target, prop, vlue ){
       if( prop === 'age' ){
         if( !Number.isIniteger( value ) ){// Number.isIniteger() 判断是否为整数
           throw new RangError( 'The age is not an integer' );
         }
         if( value > 200 ){
           throw new RangError( 'The age seems invalid' );
         }
       }
       // age以外的属性, 直接保存
       obj[ prop ] = value;
     }
   };

   let person = new Proxy( {}, validator );
   person.age = 100;
   console.log( person.age ); // 100
   person.age = 'age';
   console.log( person.age ); // 报错
   person.age = 300;
   consoole.log( person.age ); // 报错

6、has( target, propKey ):
拦截 propKey in proxy 的操作，返回一个布尔值。
has() 用来拦截 HasProperty 操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是 in 运算。

6-1)隐藏某些属性，使其不被 in 运算发现

   let handler = {
     has( target, key ){
       // key[ 0 ] > _prop[0] =  _
       if( key[ 0 ] === '_' ){
         return false;
       }
       return key in target;
     }
   };
   let target = { _prop: 'foo', prop: 'foo' };
   let proxy = new Proxy( target, handler );
   console.log( '_prop' in proxy );  // false

6-2)如果原对象不可配置或禁止扩展,那么这时 has 会报错

    let obj = { a: 10 };
    Object.preventExtensions( obj );
    let proxy = new Proxy( obj, {
      has( target, prop ){
        return false;
      }
    });
    'a' in proxy; // TypeError is throw

6-3) has() 拦截的是 HasProperty 操作,而不是 HasOwnProperty 操作, 即 has 方法不判断一个属性时对象自身的属性还是继承的属性。has 拦截对 for…in 循环不生效

    let obj1 = { name: '张三', score: 59 };
    let obj2 = { name: '李四', score: 99 };

    let handler = {
      has( target, prop ){
        if( prop === 'score' && target[ prop ] < 60 ){
          console.log( `${ target.name } 不及格` );
          return false;
        }
        return prop in target;
      }
    };

    let proxy_1 = new Proxy( obj1, handler );
    let proxy_2 = new Proxy( obj2, handler );

    console.log( 'score' in proxy_1 );  // false
    console.log( 'score' in proxy_2 );  // true

    for( let key in proxy_1 ){ console.log( proxy_1[ key ] ); }; // 张三 59
    for( let key in proxy_2 ){ console.log( proxy_2[ key ] ); }; // 李四 99

    has 拦截只对 in 循环生效, 对 for...in 循环不生效。 导致不符合要求的属性
    没有排除在 for...in 循环之外。

7、deleteProperty( target, propKey )

· 拦截 delete proxy[ propkey ]的操作,返回一个布尔值。
· 目标对象自身的不可配置( configuiable: false )的属性不能被 deleteProperty() 删除,否则会报错
· deleteProperty() 用于拦截 delete 操作, 如果这个方法抛出错误或者返回 false, 当前属性就无法被 delete 命令删除。

  let handler = {
    deleteProperty( target, key ){
      invariant( key, 'delete' );
      return true;
    }
  };

  function invariant( key, action ){
    if( key[ 0 ] === '_' ){
      throw new Error( `Invalid attempt to ${ action } private "${key}" property` );
    }
  };

  let target = {_prop: 'foo'};
  let proxy = new Proxy( target, handler );
  delete proxy._prop;
  // Error: Invalid attempt to delete private "_prop" property

8、ownKeys( target )

· 拦截对象自身属性的读取操作。拦截以下操作:
· 返回一个数组,该方法返回目标对象所有自身属性的属性名
· Object.getOwnPropertyNmaes( proxy )
· Object.getOwnPropertySymbols( proxy )
· 返回一个数组,Object.keys()的返回结果仅包括目标对象的可遍历属性。
· Object.keys( proxy )

例1 Object.keys()

    let target = { a: 1,   b: 2, c: 3 };
    let handler = {
      ownKeys( target ){
        return ['a'];
      }
    };
    let proxy = new Proxy( target, handler );
    Object.keys( proxy );  // [ 'a' ]

例2 Object.keys() 拦截所有的 key 值中第一个字符为下划线 _ 的属性

    let target = { _bar: 'foo', _prop: 'bar', prop: 'baz' };
    let handler = {
      ownKeys( target ){
        // key[0]  _bar[0] _
        return Reflect.ownKeys( target ).filter( ( key ) => key[ 0 ] !== '_' );
      }
    };
    let proxy = new Proxy( target, handler );
  	for( let key in proxy ){console.log( target[ key ] )}; // "baz"

8-1)使用 Object.keys() 时，有 3 类属性会被 ownKeys() 方法自动过滤, 不会返回
· 目标对象上不存在的属性
· 属性名为 Symbol 值
· 不可遍历( enumerable: false )的属性

    let target = { a: 1, b: 2, [Symbol('secret')]: '3' };
    Object.defineProperty( target, 'createKey', {
      enumerable: false,
      configurable: true,
      writable: true,
      value: 'static'
    });

    let handler = {
      ownKeys( target ){
        return [ 'a', 'd', Symbol.for( 'secrct'), 'createKey' ];
      }
    };
    let proxy = new Proxy( target, handler );
    Object.keys( proxy ); // [ 'a' ]

8-2)ownKeys() 返回的数组成员只能是 字符串 或 Symbol 值。如果有其他类型, 或者返回的根本不是数组, 就会报错。

    let obj = {};
    let proxy = new Proxy( obj, {
      ownKeys( target ){
        return [ 123, true, undefined, null, {}, [] ];
      }
    });
    Object.getOwnPropertyNmaes( p );
    // Uncaugh TypeError: 123 is not a valid property name

8-3)ownKeys() 还可以拦截 Object.getOwnPropertyNames()

    let obj = new Proxy( {}, {
      ownKeys( target ){
        return [ 'a', 'b', 'c' ];
      }
    });
    Object.getOwnPropertyNames( obj ); // [ 'a', 'b', 'b' ]

8-4)如果目标对象自身包含不可配置的属性,则该属性必须被 ownKeys() 返回, 否则会报错

    let obj = {};
    Object.defineProperty( obj, 'a', {
      configurable: false,
      enumerable: true,
      value: 10
    });
    let proxy = new Proxy( obj, {
      ownKeys( target ){
        return ['b'];
      }
    });
    Object.getOwnPropertyNames( proxy );
    // Uncaugh TypeError: 'ownKeys' on proxy: trap result did not include 'a'

8-5)如果目标对象是不可扩展的( non-extensition ), 这时 ownKeys() 返回的数组之中必须包含原对象的所有属性, 且不能包含多余的属性, 否则会报错

    let obj = { a: 1 };
    Object.preventExtensions( obj );

    let proxy = new Proxy( obj, {
      ownKeys( target ){
        return [ 'a', 'b' ];
      }
    });
    Object.getOwnPropertyNames( proxy );
    // Uncaugh TypeError: 'ownKeys' on proxy:
    // trap returned extra keys but proxy target is non-extensible
    
    obj对象不可扩展, 这时 ownKeys() 返回的数组之中包含了 obj 对象的多余属性 b,
    所以导致出错

9、getOwnPropertyDescriptor( target, propKey )：

拦截 Object.getOwnPropertyDescriptor( proxy, propKey ), 返回一个属性描述对象或者 undefined

  let handler = {
    getOwnPropertyDescriptor( target, key ){
      if( key[ 0 ] === '_' ){
        return;
      }
      return Object.getOwnPropertyDescriptor( target, key );
    }
  };
  let target = { _foo: 'bar', baz: 'tar' };
  let proxy = new Proxy( target, handler );
  Object.getOwnPropertyDescriptor( proxy, 'wat' ); // undefined

  Object.getOwnPropertyDescriptor( proxy, '_foo' ); // undefined

  Object.getOwnPropertyDescriptor( proxy, 'baz' );
  // { value: 'tar', writable: true, enumerable: true, configurable: true }

10、defineProperty( target, propKey, propEesc )

拦截 defineProperty() 拦截了 Object.defineProperty()操作。返回一个布尔值。
· Object.defineProperty( proxy, propKey, propDesc )
· Object.defineProperties( proxy,propDesc )
如果目标对象不可扩展( extensible ), 则 defineProperty() 不能增加目标对象中不存在的属性, 否则会报错。
如果目标对象的某个属性不可写(writable)或不可配置(configurable ), defineProperty()不得改变这两个设置。

      let handler = {
        defineProperty( target, key, descriptor ){
          return false;
        }
      };
      let target = {};
      let proxy = new Proxy( target, handler );
      proxy.foo = 'bar';
      // TypeError: proxy defineProperty handler returned false for property ' "foo" '
      
      返回 false, 导致添加新属性会抛出错误

11、preventExtensions( target )

拦截 Object.preventExtensions( proxy ), 返回一个布尔值。
此方法有一个限制, 只有目标对象不可扩展( object.isExtensible(proxy)为false ),proxy.preventExtensions() 才能返回 true,否则会报错

   let proxy = new Proxy( {}, {
     preventExtensions( target ){
       Object.preventExtensions( target );
       return true;
     }
   });
   Object.preventExtensions( proxy );  // true

12、getPrototypeOf( target )

拦截 Object.getPrototypeOf( proxy ),返回一个对象。
getPrototypeOf() 的返回值必须是对象或者是 null, 否则会报错。如果目标对象不可扩展( extensible ), getPrototypeOf()必须返回目标对象的原型对象。

getPrototypeOf() 拦截以下操作:
· Object.prototype.proto
· Object.prototype.isPrototypeOf()
· Object.getPrototypeOf()
· Reflect.getPrototypeOf()
· instanceof

   let proto = {};
   let proxy = new Proxy( {}, {
     getPrototypeOf( target ){
       return proto;
     }
   });
   Object.getPrototypeOf( proxy ) === proto; // true

13、isExtensible( target )

拦截 Object.isExtensible( proxy ), 返回一个布尔值

14、setPrototypeOf( target )

拦截 Object.setPrototypeOf( proxy, proto ),返回一个布尔值。如果目标对象是函数。该方法只能返回布尔值, 否则会被自动转为布尔值。如果目标对象不可扩展( extensible ),setPrototypeOf() 不得改变目标对象的原型。

   let handler = {
     setPrototypeOf(target,proro){
       throw new Error( 'Change the prototype is forbidden' );
     }
   };
   let proto = {};
   let target = function() {};
   let proxy = new Proxy( target, handler );
   Object.setPrototypeOf( proxy, proto );
   // Error: Change the prototype is forbidden
   
   只要修改 target 的原型对象就会报错

15、apply( target, thisBinding, args )—apply()方法拦截函数的调用、call() 和 apply()操作。

拦截 Proxy 实例,并将其作为函数调用的操作,比如proxy(…args)、 proxy.call(Object,…args)、proxy.apply(…)
apply()接收3个参数:
参数一: target 目标对象
参数二: this 目标对象的上下文对象
参数三: args 目标对象的参数数组

例1

   let handler = {
     apply( target, ctx, args ){
       return Reflect.apply( ...arguments );
     }
   };

例2

   let target = function(){ return 'I am the target' };
   let handler = {
     apply(){
       return 'I am the proxy';
     }
   };
   let p = new Proxy( target, handler );
   console.log( p() );  // I am the proxy
   
   变量 p 是 Proxy 的实例, 作为函数调用 p() 就会被 apply() 拦截, 返回字符串

例3

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

16、construct( target, args )

拦截 proxy 实例作为构造函数调用的操作,比如 new proxy( …args ), construct()
返回的必须是一个对象, 否则会报错
这个方法接收两个参数:
· target: 目标对象
· args: 构建函数的参数对象

   let proxy = new Proxy( function(){},{
     construct( target, args ){
       console.log( 'called: ' + args.join(',') );
       return { value: args[0] * 10 };
     }
   });
   ( new proxy( 1 ) ).value;   // called: 1   // 10