>[success] # Proxy 和 Reflect 結合使用 1. Proxy 劫持對象類似set這類配置項，方法應當返回一個布爾值，返回`true`代表屬性設置成功，Reflect 調用set 方法是自帶返回值成功`true `失敗 `false` ~~~ const obj = { age: 18, } const objProxy = new Proxy(obj, { set: function (target, key, newValue, receiver) { // target[key] = newValue // 采用傳統形式 沒有異常返回失敗返回值 // Reflect.set方法有返回Boolean值, 可以判斷本次操作是否成功 return Reflect.set(target, key, newValue) }, get: function (target, key, receiver) {}, }) ~~~ 2. `Reflect ` 和 `Proxy 的劫持對象設置參數` 參數都是一一對應，并且其中`Reflect.get(target, propertyKey[, receiver])`,`Reflect.set(target, propertyKey, value[, receiver])` 對應`proxy` 中的`handler.get(target, property, receiver)`，`handler.set(target, property, value, receiver)`,其中二者中`receiver` 要做特別說明，在`Reflect`調用`get` 和`set`時候如果`target` 即目標對象具有`getter `和`setter` ，參數`receiver` 可以決定他們**this**指向的的`receiver`如果我們的源對象（obj）有setter、getter的訪問器屬性，那么可以通過receiver來改變里面的**this** * 舉個例子，下面**obj** 是一個具備`getter `和`setter` 的對象，通過**Reflect.set 去指定了receiver 后**此時setter 中的**this**指向了**receiver 參數代表的對象obj1**，如果沒有指定的話`getter `和`setter` 的**對象中this指向的是其target**即下面案例中的**obj** ~~~ const obj = { _name: 'aaa', set name(newValue) { console.log('this:', this) // this: {_name: 'bbb'} this._name = newValue }, get name() { return this._name }, } const obj1 = { _name: 'bbb', } Reflect.set(obj, 'name', '更新', obj1) console.log(obj1._name) // 更新 console.log(obj._name) // aaa ~~~ * **額外補充說明**，屬性想被 proxy 劫持，需要proxy 生成的代理對象調用后才能觸發 ~~~ const obj1 = { name: 'bbb', } const proxyObj = new Proxy(obj1, { get(target, key, receiver) { console.log('觸發') return Reflect.get(target, key) }, }) obj1.name // 不會觸發代理對象中get 劫持 proxyObj.name // 會觸發 ~~~ * 使用 Proxy 和 Reflect 配合使用并且代理對象中有`getter`和`setter`沒有綁定**receiver**，下面案例中，當進觸發了`getter`和`setter`中 **this**是其本身即**this._name = newValue** 調用 可看作是**obj ._name = newValue**上面說過不是代理對象調用是不會觸發劫持，因此**set **只觸發一次 ~~~ const obj = { _name: 'aaa', set name(newValue) { console.log('this:', this) this._name = newValue }, get name() { return this._name }, } const objProxy = new Proxy(obj, { set: function (target, key, newValue, receiver) { console.log('proxy中set方法被調用', key) return Reflect.set(target, key, newValue) }, get: function (target, key, receiver) { console.log('proxy中獲取方法被調用') return Reflect.get(target, key) }, }) objProxy.name = 12 // objProxy._name = 18 console.log(objProxy._name) console.log(obj._name) ~~~ * 沒綁定時候set 只觸發一次因為 沒有觸發代理對象中的劫持  * 如果你期望代理對象中`getter`和`setter` 中的this 也要進入代理對象劫持，就需要使用**receiver**，大部分情況下Proxy的`handler.get(target, property, receiver)`，`handler.set(target, property, value, receiver)`的**receiver** 都是代理對象，在利用**Reflect** 去傳遞 就可以做到攔截到`getter`和`setter` 中的攔截觸發 ~~~ const obj = { _name: 'aaa', set name(newValue) { console.log('this:', this) this._name = newValue }, get name() { return this._name }, } const objProxy = new Proxy(obj, { set: function (target, key, newValue, receiver) { console.log('proxy中set方法被調用', key) return Reflect.set(target, key, newValue, receiver) }, get: function (target, key, receiver) { console.log('proxy中獲取方法被調用') return Reflect.get(target, key, receiver) }, }) objProxy.name = 12 // objProxy._name = 18 console.log(objProxy._name) console.log(obj._name) ~~~ * 當使用了get 和 set 時候 在使用代理利用**receiver** 后此時 set 會觸發兩次，如下此時this 是代理對象**this._name** 會再次觸發代理對象因此set 會觸發兩次 ~~~ set name(newValue) { console.log('this:', this) // 代理對象 this._name = newValue } ~~~  >[danger] ##### 說明 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set 最初被調用的對象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型鏈上，或以其他方式被間接地調用（因此不一定是 proxy 本身）。 **備注：** 假設有一段代碼執行`obj.name = "jen"`，`obj`不是一個 proxy，且自身不含`name`屬性，但是它的原型鏈上有一個 proxy，那么，那個 proxy 的`set()`處理器會被調用，而此時，`obj`會作為 receiver 參數傳進來。 >[info] ## 標記 https://juejin.cn/post/7080916820353351688 需要再看這個文章在思考一下