闆讹紝浠嬬粛鍙傝€冭绠桱i鐨勫崥鏂囷細銆奐avaScript 鐨?Proxy璇﹁В銆嬮槷涓€宄扮殑銆奅CMAScript 6 鍏ラ棬銆?15.Proxy淇浜嗕竴浜涢敊璇紝閲嶆柊鏁寸悊浜嗙紪杈戝拰鎺掔増锛屼粎渚涗釜浜哄涔犱娇鐢ㄣ€傞棶棰樼殑鏍规簮Vue3.0鍚姩浜哖roxy鑰屼笉鏄疧bject.defineProperty锛屼骇鐢熶簡涓€绯诲垪鐨勭枒鎯戙€備粈涔堟槸浠ｇ悊锛熶唬鐞嗗彲浠ュ仛浠€涔堬紵Vue瀵筄bject.defineProperty鍋氫簡浠€涔堬紵涓轰粈涔堜娇鐢≒roxy鑰屼笉鏄疧bject.defineProperty锛?.浠€涔堟槸浠ｇ悊锛?.1鐞嗚ВProxyMDN鐨勫畾涔夛細浠ｇ悊瀵硅薄鐢ㄤ簬瀹氫箟鍩烘湰鎿嶄綔锛堝灞炴€ф煡鎵俱€佽祴鍊笺€佹灇涓俱€佸嚱鏁拌皟鐢ㄧ瓑锛夌殑鑷畾涔夎涓恒€傞€氫織鍦拌锛孭roxy灏辨槸涓€涓璞℃搷浣滅殑鎷︽埅鍣紝鎷︽埅瀵圭洰鏍囧璞＄殑鎿嶄綔锛屾墽琛屼竴浜涜嚜瀹氫箟鐨勮涓恒€傚垎灞傜殑鎬濇兂鏈夌偣绫讳技浜巗pring鐨凙OP銆?.2濡備綍浣跨敤Proxyletp=newProxy(target,handler);璇硶寰堢畝鍗曪紝鍙湁涓や釜鍙傛暟锛屽緢瀹规槗鐞嗚ВProxy鍖呰９鐨勭洰鏍囧璞★紙鍙互鏄换浣曠被鍨嬬殑瀵硅薄锛屽寘鎷師鐢熸暟缁勶紝鍑芥暟锛岀敋鑷虫槸鍏朵粬浠ｇ悊锛夈€傚鐞嗙▼搴忎竴涓璞★紝鍏跺睘鎬ф槸瀹氫箟浠ｇ悊鍦ㄦ墽琛屾搷浣滄椂鐨勮涓虹殑鍑芥暟銆倂arproxy=newProxy({},{get:function(target,property){return35;}});letobj=Object.create(proxy);obj.time//35鏃犳搷浣滆浆鍙戜唬鐞嗕唬鐞嗗璞浼氬皢瀵瑰叾搴旂敤鐨勬墍鏈夋搷浣滆浆鍙戠粰鐩爣瀵硅薄target锛屽彲浠ョ洿鎺ュ浠ｇ悊瀵硅薄杩涜鎿嶄綔锛屾搷浣滀細杞彂缁欑洰鏍囧璞°€俵ettarget={};letp=newProxy(target,{});p.a=37;//鎿嶄綔琚浆鍙戝埌鐩爣console.log(target.a);//37.鎿嶄綔宸茶姝ｇ‘杞彂1.3鍙嫤鎴搷浣滀竴鍏辨湁13涓彲浠ｇ悊鐨勬搷浣滐紝涓嬮潰鍒楀嚭浜嗘瘡涓搷浣滅殑浠ｅ彿锛堝睘鎬у悕/鏂规硶鍚嶏級鍜岃Е鍙戣繖涓搷浣滅殑鏂瑰紡銆傝娉ㄦ剰锛屽鏋滄湭瀹氫箟鎿嶄綔锛屽畠灏嗚杞彂鍒扮洰鏍囧璞°€俬andler.getPrototypeOf()鍦ㄨ鍙栧埌浠ｇ悊瀵硅薄鐨勫師鍨嬫椂瑙﹀彂锛屾瘮濡傚湪鎵цObject.getPrototypeOf(proxy)鏃躲€俬andler.setPrototypeOf()鍦ㄨ缃唬鐞嗗璞＄殑鍘熷瀷鏃惰Е鍙戯紝姣斿鍦ㄦ墽琛孫bject.setPrototypeOf(proxy,null)鏃惰Е鍙戙€俬andler.isExtensible()鍦ㄥ垽鏂唬鐞嗗璞℃槸鍚﹀彲鎵╁睍鏃惰Е鍙戣鎿嶄綔锛屾瘮濡傛墽琛孫bject.isExtensible(proxy)鏃躲€俬andler.preventExtensions()褰撲唬鐞嗗璞′笉鍙墿灞曟椂瑙﹀彂锛屼緥濡傛墽琛孫bject.preventExtensions(proxy)鏃躲€俬andler.getOwnPropertyDescriptor()鍦ㄨ幏鍙栦唬鐞嗗璞＄殑鏌愪釜灞炴€х殑灞炴€ф弿杩版椂瑙﹀彂璇ュ姩浣滐紝姣斿鎵цObject.getOwnPropertyDescriptor(proxy,鈥渇oo鈥?鏃躲€俬andler.defineProperty()鍦ㄥ畾涔変唬鐞嗗璞＄殑鏌愪釜灞炴€х殑灞炴€ф弿杩版椂瑙﹀彂璇ュ姩浣滐紝渚嬪鎵цObject.defineProperty(proxy,鈥渇oo鈥?{})鏃躲€俬andler.has()鍦ㄥ垽鏂唬鐞嗗璞℃槸鍚﹀叿鏈夋煇涓睘鎬ф椂瑙﹀彂杩欎釜鍔ㄤ綔锛屾瘮濡傚湪浠ｇ悊涓墽琛屸€渇oo鈥濇椂銆俬andler.get()褰撹鍙栦唬鐞嗗璞＄殑灞炴€ф椂瑙﹀彂姝ゆ搷浣滐紝渚嬪鎵цproxy.foo鏃躲€俬andler.set()鍦ㄤ负浠ｇ悊瀵硅薄鐨勫睘鎬ц祴鍊兼椂瑙﹀彂姝ゆ搷浣滐紝渚嬪鎵цproxy.foo=1鏃躲€俬andler.deleteProperty()褰撳垹闄や唬鐞嗗璞＄殑灞炴€ф椂瑙﹀彂姝ゆ搷浣滐紝渚嬪鎵цdeleteproxy.foo鏃躲€俬andler.ownKeys()褰撹幏鍙栧埌浠ｇ悊瀵硅薄鐨勬墍鏈夊睘鎬ч敭鏃惰Е鍙戣鍔ㄤ綔锛屼緥濡傛墽琛孫bject.getOwnPropertyNames(proxy)鏃躲€俬andler.apply()褰撶洰鏍囧璞℃槸涓€涓嚱鏁板苟琚皟鐢ㄦ椂瑙﹀彂銆俬andler.construct()鍦ㄦ瀯閫犵洰鏍囧璞′负鏋勯€犲嚱鏁扮殑浠ｇ悊瀵硅薄瀹炰緥鏃惰Е鍙戣鎿嶄綔锛屼緥濡傛墽琛宯ewproxy()鏃躲€?.4this鐨勬寚鍚戦渶瑕佺壒鍒敞鎰忎唬鐞嗗璞″拰鎷︽埅鎿嶄綔涓璽his鎸囧悜鐨勯棶棰樸€備竴鏃﹀璞¤浠ｇ悊锛屽畠鐨則his鎸囧悜浠ｇ悊瀵硅薄consttarget={m:function(){console.log(this===proxy);}};甯搁噺澶勭悊绋嬪簭={};甯搁噺浠ｇ悊=鏂颁唬鐞嗭紙鐩爣锛屽鐞嗙▼搴忥級锛泃arget.m()//falseproxy.m()//鐪熴€傜洰鏍囧嚱鏁扮殑this鎸囧悜proxyhandler瀹氫箟鐨勬嫤鎴搷浣溿€倀his鎸囧悜澶勭悊绋嬪簭锛宺eceiver鎸囧悜浠ｇ悊銆俢onst鐩爣={m:100};consthandler={get(target,property,receiver){console.log(this===handler)//true銆傝繖鍦ㄦ嫤鎴搷浣滀腑鎸囧悜澶勭悊绋嬪簭console.log(receiver===proxy)//true銆俽eceiver鎸囧悜浠ｇ悊瀵硅薄proxyreturntarget[property]}};甯搁噺浠ｇ悊=鏂颁唬鐞嗭紙鐩爣锛屽鐞嗙▼搴忥級锛沜onsole.log(proxy.m)浜屻€丳roxy鍙互鍋氫粈涔堬紵Proxy鐨勫悇绉嶅父鐢ㄦ嫤鎴柟寮忓彲浠ュ仛浠€涔堬紵鍥涚甯哥敤鎿嶄綔2.1get()get鏂规硶鐢ㄤ簬鎷︽埅瀵规煇涓睘鎬х殑璇诲彇鎿嶄綔銆傚畠鍙互鎺ュ彈涓変釜鍙傛暟锛屽垎鍒槸鐩爣瀵硅薄銆佸睘鎬у悕鍜屼唬鐞嗗疄渚嬫湰韬€傚嵆浣垮浜庢病鏈夊睘鎬х殑灞炴€э紝鎵€鏈夊睘鎬ц皟鐢ㄩ兘浼氳繘鍏ュ悓涓€涓猤et銆傚彲浠ュ垱寤轰竴浜涗笉瀛樺湪鐨勫睘鎬э紝鍙互鍦ㄥ彇鏁版嵁鐨勬椂鍊欐牎楠屽拰杞崲鏁版嵁锛屽彲浠ヨ嚜瀹氫箟涓€浜涜娉曠硸鎿嶄綔锛屽鏋済et杩斿洖涓€涓嚱鏁帮紝鍙互灏嗕竴涓睘鎬ц浆鎹㈡垚涓€涓柟娉晇arbase={a:100,small:"helloworld!!"};varproxy=newProxy(base,{get(target,property,receiver){//灞炴€ц浆鎹负鍑芥暟if("fn"===property){returnfunction(value){console.log(value);};}if("ghost"===property){return"ghost";}if("fn"===property){returnfunction(value){console.log(value);};}//鑷畾涔夎娉曠硸if(property.includes("_")){constdirect=property.split("_")[1];constpropertyBase=property.split("_")[0];switch(direct){case"Big":returnreceiver[propertyBase].toLocaleUpperCase();default:break;}}if(!(propertyintarget)){thrownewReferenceError('Property''+灞炴€?'"涓嶅瓨鍦ㄣ€?);//楠岃瘉灞炴€у€紏returntarget[property];}});console.log(proxy.a)//杈撳嚭100姝ｅ父accessproxy.fn("fn")//杈撳嚭fn灞炴€ц浆鎹负鏂规硶console.log(proxy.small_Big)//杈撳嚭HELLOWORLD!!鑷畾涔夎娉曠硸console.log(proxy.ghost)//杈撳嚭ghost鍒涘缓灞炴€onsole.log(proxy.ghost_Big)//浣跨敤console.log(proxy.b)//鏁版嵁鏍￠獙鎶涘嚭閿欒2.2set()set鏂规硶鐢ㄤ簬鎷︽埅鏌愪釜灞炴€х殑璧嬪€兼搷浣滐紝鍙互鎺ュ彈鍥涗釜鍙傛暟锛屼緷娆℃槸鐩爣瀵硅薄銆佸睘鎬у悕銆佸睘鎬у€煎拰Proxy瀹炰緥鏈韩锛屾渶鍚庝竴涓弬鏁板彲閫夊彲鐢ㄤ簬楠岃瘉灞炴€ф槸鍚︽弧瓒宠姹傘€傚畠鍙敤浜庢洿鏀规暟鎹牸寮忋€傚畠鍙敤浜庣洃瑙嗘暟鎹洿鏀逛簨浠躲€傚畠鍙互闃绘涓€浜涜祴鍊兼搷浣滐紝姣斿浠モ€淿鈥濆紑澶寸殑绉佹湁鍙橀噺銆倂arbase={a:100,small:"浣犲ソ涓栫晫锛侊紒"};constA_Change_Event="aChangeEvent";window.addEventListener(A_Change_Event,e=>{console.log(e.data.value);});varproxy=newProxy(base,{set(obj,property,value,receiver){if("a"===property){if(!Number.isInteger(value)){thrownewTypeError("The"+property+"isnotaninteger");}if(value>100){thrownewRangeError("The"+property+"seemsinvalid");}obj[property]=value;//eventconstdataChangeEvent=newEvent(A_Change_Event);//鍒涘缓涓€涓簨浠禿ataChangeEvent.data={value};window.dispatchEvent(dataChangeEvent);}}});proxy.a=80;console.log(proxy.a);proxy.a=120;2.3apply()鍑芥暟瀵硅薄涔熷彲浠ヤ綔涓轰唬鐞嗕汉銆俛pply鏂规硶鎷︽埅鍑芥暟璋冪敤銆佽皟鐢ㄥ拰搴旂敤鎿嶄綔銆俛pply鏂规硶鍙互鎺ュ彈涓変釜鍙傛暟锛屽垎鍒槸鐩爣瀵硅薄銆佺洰鏍囧璞＄殑涓婁笅鏂囧璞★紙this锛夈€佺洰鏍囧璞＄殑鍙傛暟鏁扮粍銆傛渶绠€鍗曠殑渚嬪瓙vartarget=function(){return'鎴戞槸鐩爣';};varhandler={apply:function(){return'鎴戞槸浠ｇ悊';}};varp=newProxy(target,handler);p()//鈥滄垜鏄唬鐞嗏€?.4construct()construct鎷︽埅new鎿嶄綔鎺ュ彈涓変釜鍙傛暟target锛氱洰鏍囧璞rgs锛氭瀯閫犲嚱鏁扮殑鍙傛暟瀵硅薄newTarget锛氬垱寤烘椂瀹炰緥瀵硅薄锛屾柊鍛戒护浣滅敤浜嶸ue3.1涓殑Constructor3銆丳roxy鍜孫bject.definePropertyObject.defineProperty瀹炵幇observe閫掑綊閬嶅巻鎵€鏈夊睘鎬э紝浣跨敤Object.defineProperty涓€涓€瀹氫箟鐩戝惉vardata={name:'kindeng'}锛涜瀵燂紙鏁版嵁锛夛紱鏁版嵁銆傚悕绉?'dmq';//鍝堝搱鍝堬紝鍊煎彉浜唊indeng-->dmqfunctionobserve(data){if(!data||typeofdata!=='object'){return;}//鑾峰彇鎵€鏈夊睘鎬ч亶鍘哋bject.keys(data).forEach(function(key){defineReactive(data,key,data[key]);});};functiondefineReactive(data,key,val){observe(鍊硷級锛?/鐩戞帶瀛愬睘鎬bject.defineProperty(data,key,{enumerable:true,//enumerableconfigurable:false,//涓嶈兘鍐嶅畾涔塯et:function(){returnval;},set:function(newVal){console.log('鍝堝搱鍝堬紝璇ュ€煎凡琚洃鎺?,val,'-->',newVal);val=newVal;}});}3.2Proxy瀹炵幇浜唎bserve锛屼笉鐢ㄩ鍏堥€愪釜閬嶅巻bindings鏉ュ垽鏂璷bserve(data){constthat=this;璁╁鐞嗙▼搴?{get(target,property){returntarget[property];},set(target,key,value){letres=Reflect.set(target,key,value);that.subscribe[key].map(item=>{item.update();});杩斿洖璧勬簮锛泒}this.$data=newProxy(data,handler);}鍥涖€佷负浠€涔堢敤Proxy鑰屼笉鐢∣bject.defineProperty锛烿ue3.0浣跨敤Proxy鏉ヤ唬鏇垮師鏉ョ鎷欑殑閬嶅巻瀵硅薄鐨勬柟娉曪紝浣跨敤Object.defineProperty鏂规硶涓哄睘鎬ф坊鍔爏et鍜実et璁块棶鍣ㄣ€備篃灏辨槸璇达紝涓嶅簲璇ラ亶鍘嗘暟鎹璞★紝鑰屾槸鐩存帴鐩戝惉銆傛暣鐞嗕笉鏄擄紝濡傛灉瑙夊緱鏈夊府鍔╄鐐逛釜璧炩€斺€斾綔鑰咅煣戰煆烩€嶐煉幻桭luox
