資訊專欄INFORMATION COLUMN
摘要：即必須有返回值其中可接受三個(gè)參數(shù)，為目標(biāo)對(duì)象，為屬性名，為實(shí)際接受的對(duì)象，默認(rèn)為本例中新建的，如果多帶帶指出一個(gè)對(duì)象，可使指出對(duì)象受到相同的方法作用。且中的必須有返回值，的不用，這也正是因?yàn)樵谒筮€會(huì)執(zhí)行所以不需要。
ES6 Proxy/Reflect Proxy 攔截器
proxy是es6的新特性，簡(jiǎn)單來講，即是對(duì)目標(biāo)對(duì)象的屬性讀取、設(shè)置，亦或函數(shù)調(diào)用等操作進(jìn)行攔截（處理）。
let proxy = new Proxy(target,handle)target
一個(gè)proxy代理對(duì)象由兩部分組成target/handle。其中target為目標(biāo)對(duì)象，可以為一個(gè)空對(duì)象即（target={}），也可以是一個(gè)含有屬性和方法的對(duì)象（target={foo:1,bar:2}）,在進(jìn)行l(wèi)et proxy=new Proxy(target,handle)的操作后，新的proxy對(duì)象會(huì)對(duì)target進(jìn)行“淺拷貝”,即proxy、target兩個(gè)對(duì)象會(huì)相互影響。即：
let target = { _prop: "foo", prop: "foo" };
let proxy = new Proxy(target, handler);
proxy._prop = "bar";
target._attr = "new"
console.log(target._prop) // "bar"
console.log(proxy._attr) //"new"
ES5 getter/setter
handle是實(shí)際運(yùn)行的處理方法，Proxy的handle一共有13種方法，以最簡(jiǎn)單常用的get/set方法為例。在ES5中，對(duì)象就有g(shù)et/set的訪問器（低版本瀏覽器不支持），它們的作用是在對(duì)象進(jìn)行屬性的讀寫時(shí)，進(jìn)行額外的操作。例如person對(duì)象下的age屬性，當(dāng)它不在0-100之間時(shí)，給這個(gè)age的值重置為0。
var person = {
get age(){
console.log("getter")
return this._age;//這里千萬不能return this.age,會(huì)出錯(cuò)
},
set age(val) {
console.log("setter")
this._age = val < 100 && val > 0 ? val:0
}
};
person.age = 10 //10
person.age = 101 //0
person.age = "age" //0
在進(jìn)行賦值操作時(shí)，會(huì)先觸發(fā)set、后觸發(fā)get，進(jìn)行如person.age++的操作時(shí)，set、get的觸發(fā)順序?yàn)椋篻et=>set。以上就是ES5的getter/setter訪問器。
handle在 Proxy中的handle中g(shù)et、set方法也類似。即
let handler = {
get (target, key){
return target[key]
},
set (target, key, value) {
if (key === "age") {
target[key] = value > 0 && value < 100 ? value : 0
}
return true;//必須有返回值
}
};
let target = {};
let proxy = new Proxy(target, handler);
proxy.age = 22 //22
其中g(shù)et可接受三個(gè)參數(shù)（target，key, receiver）,target為目標(biāo)對(duì)象，key為屬性名，receiver為實(shí)際接受的對(duì)象，默認(rèn)為本例中新建的proxy，如果多帶帶指出一個(gè)對(duì)象，可使指出對(duì)象受到相同的方法作用。例如：
let _proxy={};
let handler = {
get (target, key , receiver){
receiver=_proxy;
target[key]="test";
return Reflect.get(target,key,receiver);
},
set (target, key, value) {
if (key === "age") {
target[key] = value > 0 && value < 100 ? value : 0
}
return true;//必須有返回值
}
};
let target = {};
let proxy = new Proxy(target, handler);
proxy.age
console.log(_proxy.age) // test
set方法 多一個(gè)value參數(shù)，為屬性值，即 proxy.age=1，中的1。
與ES5 setter/getter訪問器的區(qū)別是，在proxy中，proxy.age=1,只會(huì)執(zhí)行 set的方法，而不是像ES5中的setter，會(huì)先執(zhí)行set，后執(zhí)行g(shù)et。且proxy中的set必須有返回值，ES5的setter不用，這也正是因?yàn)樵谒筮€會(huì)執(zhí)行g(shù)etter,所以不需要。
Reflect 反射Reflect與ES5的Object有點(diǎn)類似，包含了對(duì)象語言內(nèi)部的方法，Reflect也有13種方法，與proxy中的方法一一對(duì)應(yīng)。Proxy相當(dāng)于去修改設(shè)置對(duì)象的屬性行為，而Reflect則是獲取對(duì)象的這些行為。
還是剛才的例子：
let _proxy = {}
let handler = {
get (target, key,recive){
return Reflect.get(target,key,recive)
},
set (target, key, value) {
if (key === "age") {
target[key] = value > 0 && value < 100 ? value : 0
}
return Reflect.set(target,key,value,_proxy);
}
};
let target = {};
let proxy = new Proxy(target, handler);
proxy.age = 33
console.log(_proxy.age)//33
Reflect 也可與ES5的setter/getter配合使用,例如：
var myObject = {
foo: 1,
bar: 2,
get baz() {
return this.foo + this.bar;
},};
var myReceiverObject = {
foo: 4,
bar: 4,};
Reflect.get(myObject, "baz", myReceiverObject) // 8
其余方法與Proxy均相同，區(qū)別即是，設(shè)置和獲取的關(guān)系。
Proxy和Reflect還有很多方法，比如apply作為操作對(duì)象函數(shù)時(shí)觸發(fā)的方法，比如myObject =function(){
return "it"s Fn"}, myObject();會(huì)觸發(fā)handle中的apply方法。還有觸發(fā)has方法的_attr in obj等等共計(jì)13種方法，本次只以最簡(jiǎn)單的set、get方法來舉例。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81483.html
摘要：攔截實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如。方法等同于，這提供了一種不使用，來調(diào)用構(gòu)造函數(shù)的方法。方法對(duì)應(yīng)，返回一個(gè)布爾值，表示當(dāng)前對(duì)象是否可擴(kuò)展。這是的一個(gè)提案，目前轉(zhuǎn)碼器已經(jīng)支持。別名或修飾器在控制臺(tái)顯示一條警告，表示該方法將廢除。 Proxy Proxy 這個(gè)詞的原意是代理，用在這里表示由它來代理某些操作，可以譯為代理器，即用自己的定義覆蓋了語言的原始定義。ES6 原生提供 Proxy...
摘要：理解元編程和是屬于元編程范疇的，能介入的對(duì)象底層操作進(jìn)行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個(gè)可以用來進(jìn)行元編程的特性。在之后，標(biāo)準(zhǔn)引入了，從而提供比較完善的元編程能力。 導(dǎo)讀 幾年前 ES6 剛出來的時(shí)候接觸過 元編程（Metaprogramming）的概念，不過當(dāng)時(shí)還沒有深究。今天在應(yīng)用和學(xué)習(xí)中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...
摘要：的出現(xiàn)，使用內(nèi)建對(duì)象的繼承得以實(shí)現(xiàn)。屬性不存在拋出異常是取值操作，而就是賦值操作，可以對(duì)屬性值進(jìn)行驗(yàn)證。屬性必須為數(shù)字拋出異常接受兩個(gè)參數(shù)被讀取屬性的原對(duì)象，即代理的目標(biāo)。這個(gè)可以攔截內(nèi)部方法，通過返回?cái)?shù)組的值可以覆寫其行為。 Proxy & Reflect extends的出現(xiàn)，使用內(nèi)建對(duì)象的繼承得以實(shí)現(xiàn)。Proxy可以攔截JS引擎內(nèi)部目標(biāo)的底層對(duì)象操作，這些底層操作被攔截后會(huì)觸發(fā)響...
摘要：用于修改某些操作的默認(rèn)行為和訪問器屬性的行為類似在對(duì)象的前面多一層代理，對(duì)象字面量中定義屬性的特性方法，訪問器屬性此時(shí)屬性被定義為訪問器屬性不一樣的寫法中是用代理的寫法第一個(gè)參數(shù)是對(duì)象，第二個(gè)是要操作的方法對(duì)象也有兩個(gè)屬性，一個(gè)是目標(biāo)對(duì)象， 1,Proxy用于修改某些操作的默認(rèn)行為和訪問器屬性的行為類似,在對(duì)象的前面多一層代理， const obj = { ...
摘要：主要原因應(yīng)該是在處理數(shù)組響應(yīng)是會(huì)存在缺陷。構(gòu)造函數(shù)其中表示生成一個(gè)實(shí)例，為需要代理的對(duì)象，則是一個(gè)對(duì)象，定義了各種代理行為。對(duì)于滿足條件的屬性以及其他屬性，直接保存報(bào)錯(cuò)報(bào)錯(cuò)攔截的操作，返回一個(gè)布爾值。 前言 https://segmentfault.com/a/11... Vue3.0應(yīng)該馬上就要發(fā)布正式版了。聽說在新版本中，Proxy取代了Object.defineProperty進(jìn)...
閱讀 2871·2021-10-11 10:57
閱讀 2434·2021-08-27 16:20
閱讀 1414·2019-08-30 13:03
閱讀 1587·2019-08-30 12:50
閱讀 3373·2019-08-29 14:16
閱讀 1588·2019-08-29 11:12
閱讀 1641·2019-08-28 17:53
閱讀 2920·2019-08-27 10:58
