Proxy使用详解

来源 | https://www.cnblogs.com/chuaWeb/p/13676000.html

通用

1、Proxy可以包装任何形式的对象：包括原生数组，函数，甚至另一个代理。
2、代理实例中没有指定的handler,实际就是操作原对象target：实例：打开控制台查看：http://jsrun.net/3RLKp/edit

let target = function(){return 'ddd'}let proxy = new Proxy(target, {});proxy.prototype.age = 12console.log(proxy.prototype === target.prototype) // true

3、代理实例只是返回对象target的一个代理包装(只有在触发handler时，handler中可以操作target)，target的更改不会触发代理实例的handler：实例：打开控制台查看：http://jsrun.net/7BLKp/edit

来看一下具体的运用
MDN上有一个实例比较特别【拓展构造函数】，来看一下：在线例子：http://jsrun.net/cRLKp/edit

function extend(sup, base) {  var descriptor = Object.getOwnPropertyDescriptor(    base.prototype, 'constructor'  );  base.prototype = Object.create(sup.prototype);  var handler = {    construct: function(target, args) {      var obj = Object.create(base.prototype);      this.apply(target, obj, args);      return obj;    },    apply: function(target, that, args) {      sup.apply(that, args);      base.apply(that, args);    }  };  var proxy = new Proxy(base, handler);  descriptor.value = proxy;  Object.defineProperty(base.prototype, 'constructor', descriptor);  return proxy;}
var Person = function(name) {  this.name = name;};
var Boy = extend(Person, function(name, age) {  this.age = age;});
Boy.prototype.gender = 'M';
var Peter = new Boy('Peter', 13);
console.log(Peter.gender);  // "M"console.log(Peter.name);    // "Peter"console.log(Peter.age);     // 13

执行完Boy.prototype.gender = 'M'后，数据结构是下面这个样子的

执行 var Peter = new Boy('Peter', 13);
new操作进入到handler.construct，里面的上下文环境this绑定在handler（可以查看MDN文档描述）。直接调用this.apply进入handler.apply执行。new操作执行完毕之后的数据结构

巧妙利用原型链和代理

handler形参中的receiver

receiver是代理或继承代理的对象。通俗来讲，就是触发了handler的源头对象。一般receiver即是target的代理实例。
但是如果对象继承了代理对象的情况，如下:

"use strict"const proxy = new Proxy({}, {    get: function(target, prop, receiver) {        if(proxy === receiver){            console.log('receiver为proxy')        }        else if(obj === receiver){            console.log('receiver为obj')        }else{            console.log('receiver不为proxy也不为obj')        }        return 'chua';    }});proxy.dd // receiver为proxylet obj = Object.create(proxy);obj.msg // receiver为obj

proxy对象是obj对象的原型，obj对象本身并没有msg属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截。
obj是obj.msg触发handler的原始调用（源头）

handler.set

set必须返回一个boolean类型

必须返回一个boolean类型，true表示设置成功，返回false表示失败，严格模式下会抛错(下面的例子全部在严格模式下执行)
注意：返回的数据如果不是boolean类型，会转换成布尔类型，假值包括：undefined，null，false, +0, -0, NaN, "" ：实例

const target = {  msg: "hello"};
const handler = {    set: function(target, prop, value, receiver){        target[prop] = value        // return true    }};
const proxy = new Proxy(target, handler);proxy.msg = 'wow' // Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg'

handler.set在以下情况会抛错
1、如果相应的目标对象属性是不可写的数据属性，则无法将属性的值更改为与相应目标对象属性的值不同的值。实例:严格模式

var obj = {}Object.defineProperty(obj, 'year', {     // configurable: false, 默认false    // writable: false, 默认false    value: 2})Object.defineProperty(obj, 'class', {     configurable: true,     // writable: false, 默认false    value: 'chua'})var proxy = new Proxy(obj, {    set(target, prop, val){        target[prop] = val        return true    }})proxy.card = 'sdf' // 设置成功proxy.year = 10 // Uncaught TypeError: Cannot assign to read only property 'year' of object proxy.class = 'dd' // Uncaught TypeError: Cannot assign to read only property 'class' of object

2、如果相应的目标对象属性配置了[[Set]]为undefined，实例

var obj = {}const definereactive =  function(data, key, val) {    Object.defineProperty(data, key, {        get: function(){            return val        },        set: undefined // 应该设置成下面这个正确的函数        // function(newVal) {        //     val = newVal;        // }    });}definereactive(obj, 'year', obj.year)var proxy = new Proxy(obj, {    set(target, prop, val){        target[prop] = val        return true    }})obj.year = 20 // Uncaught TypeError: Cannot set property year of #