Proxy使用詳解

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

通用

1、Proxy可以包裝任何形式的對象：包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理。
2、代理實(shí)例中沒有指定的handler,實(shí)際就是操作原對象target：實(shí)例：打開控制臺(tái)查看：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、代理實(shí)例只是返回對象target的一個(gè)代理包裝(只有在觸發(fā)handler時(shí)，handler中可以操作target)，target的更改不會(huì)觸發(fā)代理實(shí)例的handler：實(shí)例：打開控制臺(tái)查看：http://jsrun.net/7BLKp/edit

來看一下具體的運(yùn)用
MDN上有一個(gè)實(shí)例比較特別【拓展構(gòu)造函數(shù)】，來看一下：在線例子：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

執(zhí)行完Boy.prototype.gender = 'M'后，數(shù)據(jù)結(jié)構(gòu)是下面這個(gè)樣子的

執(zhí)行 var Peter = new Boy('Peter', 13);
new操作進(jìn)入到handler.construct，里面的上下文環(huán)境this綁定在handler（可以查看MDN文檔描述）。直接調(diào)用this.apply進(jìn)入handler.apply執(zhí)行。new操作執(zhí)行完畢之后的數(shù)據(jù)結(jié)構(gòu)

巧妙利用原型鏈和代理

handler形參中的receiver

receiver是代理或繼承代理的對象。通俗來講，就是觸發(fā)了handler的源頭對象。一般receiver即是target的代理實(shí)例。
但是如果對象繼承了代理對象的情況，如下:

"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屬性，所以根據(jù)原型鏈，會(huì)在proxy對象上讀取該屬性，導(dǎo)致被攔截。
obj是obj.msg觸發(fā)handler的原始調(diào)用（源頭）

handler.set

set必須返回一個(gè)boolean類型

必須返回一個(gè)boolean類型，true表示設(shè)置成功，返回false表示失敗，嚴(yán)格模式下會(huì)拋錯(cuò)(下面的例子全部在嚴(yán)格模式下執(zhí)行)
注意：返回的數(shù)據(jù)如果不是boolean類型，會(huì)轉(zhuǎn)換成布爾類型，假值包括：undefined，null，false, +0, -0, NaN, ""?：實(shí)例

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在以下情況會(huì)拋錯(cuò)
1、如果相應(yīng)的目標(biāo)對象屬性是不可寫的數(shù)據(jù)屬性，則無法將屬性的值更改為與相應(yīng)目標(biāo)對象屬性的值不同的值。實(shí)例:嚴(yán)格模式

var obj = {}Object.defineProperty(obj, 'year', {     // configurable: false, 默認(rèn)false    // writable: false, 默認(rèn)false    value: 2})Object.defineProperty(obj, 'class', {     configurable: true,     // writable: false, 默認(rèn)false    value: 'chua'})var proxy = new Proxy(obj, {    set(target, prop, val){        target[prop] = val        return true    }})proxy.card = 'sdf' // 設(shè)置成功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、如果相應(yīng)的目標(biāo)對象屬性配置了[[Set]]為undefined，實(shí)例

var obj = {}const definereactive =  function(data, key, val) {    Object.defineProperty(data, key, {        get: function(){            return val        },        set: undefined // 應(yīng)該設(shè)置成下面這個(gè)正確的函數(shù)        // 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 #