浠ｇ悊鐨勫簲鐢ㄥ満鏅唬鐞嗚璁℃ā寮忥細涓€涓唬鐞嗗璞′綔涓哄彟涓€涓富浣撳璞＄殑鎺ュ彛銆備笌闂ㄩ潰妯″紡鐩告瘮锛氫唬鐞嗘ā寮忎笉鍚屼簬闂ㄩ潰妯″紡銆傞棬闈㈡ā寮忕殑涓昏浣滅敤鏄畝鍖栫晫闈㈢殑璁捐锛岄殣钘忚儗鍚庡鏉傜殑閫昏緫瀹炵幇锛屽皢涓嶅悓鐨勬柟娉曡皟鐢ㄧ粍鍚堟垚鏇存柟渚跨殑鏂规硶銆備唬鐞嗗璞′粙浜庤皟鐢ㄨ€呭拰涓诲璞′箣闂达紝鍏朵富瑕佷綔鐢ㄦ槸淇濇姢鍜屾帶鍒惰皟鐢ㄨ€呭涓诲璞＄殑璁块棶銆備唬鐞嗘嫤鎴鍦ㄤ富浣撳璞′笂鎵ц鐨勬墍鏈夋垨閮ㄥ垎鎿嶄綔锛屾湁鏃朵細澧炲己鎴栬ˉ鍏呭叾琛屼负銆傚涓婂浘鎵€绀猴紝涓€鑸琾roxy鍜宲rincipal鏈夌浉鍚岀殑鎺ュ彛锛屽璋冪敤鑰呮槸閫忔槑鐨勩€備唬鐞嗗皢姣忎釜鎿嶄綔杞彂缁欏鎵樹汉锛岄€氳繃棰濆鐨勯澶勭悊鎴栧悗澶勭悊澧炲己鍏惰涓恒€傝繖绉嶆ā寮忓彲鑳界湅璧锋潵鍍忊€滀簩绾х粡閿€鍟嗏€濓紝浣嗗瓨鍦ㄦ槸鍚堢悊鐨勶紝浠ｇ悊鍟嗚繕鏄彂鎸ョ潃寰堝ぇ鐨勪綔鐢紝灏ゅ叾鏄湪鎬ц兘浼樺寲鏂归潰銆傛儼鎬у垵濮嬪寲鍜岀紦瀛榩roxy浣滀负subject瀵硅薄鐨勪繚鎶わ紝鍑忓皯client瀵筽roxy鑳屽悗鐪熷疄subject鐨勬秷鑰椼€傞櫎浜嗗欢杩熷垵濮嬪寲鐨勪綔鐢ㄥ锛屼唬鐞嗚繕鍙互鍔犱竴灞傜紦瀛樸€俛gent鐨勫叾浠栧簲鐢ㄥ満鏅鏁版嵁鏍￠獙锛宎gent鍙互鍦ㄨ浆鍙戠粰涓讳綋涔嬪墠瀵硅緭鍏ョ殑鍐呭杩涜鏍￠獙锛岀‘淇濇棤璇悗鍐嶄紶缁欏悗绔€傛澶栵紝浠ｇ悊妯″紡杩樺彲浠ョ敤浜庡畨鍏ㄩ獙璇併€備唬鐞嗗彲鐢ㄤ簬楠岃瘉瀹㈡埛绔槸鍚︽湁鏉冩墽琛屾搷浣滐紝鍙湁鍦ㄩ獙璇佺粨鏋滀负鑲畾鏃讹紝鎵嶅皢璇锋眰鍙戦€佸埌鍚庣銆備唬鐞嗙殑鍙︿竴涓簲鐢ㄥ満鏅槸鏃ュ織璁板綍銆備唬鐞嗗彲浠ラ€氳繃鎷︽埅鏂规硶璋冪敤鍜岀浉鍏冲弬鏁版潵閲嶆柊缂栫爜銆傛澶栵紝瀹冭繕鍙互鑾峰彇杩滅▼瀵硅薄骞跺皢瀹冧滑鏀惧湪鏈湴銆備唬鐞嗗疄鐜板湪JavaScript涓湁寰堝鏂规硶鍙互瀹炵幇浠ｇ悊妯″紡銆傚寘鎷細瀵硅薄缁勫悎鎴栧璞″瓧闈㈤噺鍔犲伐鍘傛ā寮忥紱瀵硅薄澧炲己锛涗娇鐢‥S6鑷甫鐨勫唴缃唬鐞嗐€傝繖浜涙柟娉曞悇鏈変紭缂虹偣銆傜粍鍚堟ā寮忓熀浜庡嚱鏁板紡缂栫▼鐨勬€濇兂锛岀粍鍚堝彲浠ヨ璁や负鏄竴绉嶇畝鍗曞畨鍏ㄧ殑鍒涘缓浠ｇ悊鐨勬柟寮忥紝鍥犱负瀹冧繚鎸佸鎵樹汉涓嶅彉锛屼粠鑰屼笉浼氭敼鍙樺叾鍘熸湁鐨勮涓恒€傚畠鍞竴鐨勭己鐐规槸鎴戜滑蹇呴』鎵嬪姩濮旀墭鎵€鏈夋柟娉曪紝鍗充娇鎴戜滑鍙兂濮旀墭鍏朵腑涓€涓€俢lassCalculator{constructor(){/*...*/}plus(){/*...*/}minus(){/*...*/}}classProxyCalculator{鏋勯€犲嚱鏁帮紙璁＄畻鍣級{this.calculator=calculator}//浠ｇ悊鏂规硶plus(){returnthis.calculator.divide()}minus(){returnthis.calculator.multiply()}}varcalculator=newCalculator();varproxyCalculator=newProxyCalculator(calculator);鍩轰簬缁勫悎鐨勬€濇兂锛屼娇鐢ㄥ伐鍘傚嚱鏁颁綔涓轰唬鐞嗗垱寤篺unctionfactoryProxyCalculator(calculator){return{//浠ｇ悊鏂规硶plus(){returncalculator.divide()},minus(){returncalculator.multiply()}}}varcalculator=newCalculator();varproxyCalculator=newfactoryProxyCalculator(璁＄畻鍣?;瀵硅薄澧炲己瀵硅薄澧炲己杩樻湁涓€涓悕瀛楀彨鍋歁onkeyPatching銆傚浜庡璞″寮猴紝瀹冪殑浼樼偣鏄笉闇€瑕乨elegate鐨勬墍鏈夋柟娉曘€備絾瀹冩渶澶х殑闂鏄敼鍙樹簡涓昏瀵硅薄銆傝繖鏍蜂竴鏉ワ紝鍒涘缓浠ｇ悊鐨勫伐浣滅‘瀹炵畝鍖栦簡锛屼絾缂虹偣鏄細閫犳垚鍑芥暟寮忕紪绋嬫€濇兂涓婄殑鈥滃壇浣滅敤鈥濓紝鍥犱负鍦ㄨ繖閲岋紝涓讳綋涓嶅啀鏄笉鍙彉鐨勩€俧unctionpatchingCalculator(calculator){varplusOrig=calculator.pluscalculator.plus=()=>{//棰濆鐨勯€昏緫//濮旀墭缁欐鏂噐eturnplusOrig.apply(calculator)}returncalculator}varcalculator=newCalculator();varsafeCalculator=patchingCalculator(璁＄畻鍣?;Built-inProxyES6Built-inProxy浠嶦S6寮€濮嬶紝JavaScript鏀寔Proxy銆傚畠缁撳悎浜嗗璞″悎鎴愬拰瀵硅薄澧炲己鍚勮嚜鐨勪紭鐐广€傛垜浠棦涓嶉渶瑕佹墜鍔ㄥ鎵樻墍鏈夌殑鏂规硶锛屼篃涓嶉渶瑕佹敼鍙樹富瀵硅薄锛屼繚鎸佷富瀵硅薄鐨勪笉鍙樻€с€備絾瀹冧篃鏈変竴涓己鐐癸紝閭ｅ氨鏄畠鍑犱箮娌℃湁polyfill銆備篃灏辨槸璇达紝濡傛灉浣跨敤鍐呯疆浠ｇ悊锛屽氨蹇呴』鑰冭檻鍦ㄥ吋瀹规€т笂鍋氬嚭涓€瀹氱殑鐗虹壊銆傜湡鏄奔鍜岀唺鎺屼笉鍙吋寰椼€倂arProxyCalculatorHandler={get:(target,property)=>{if(property==='plus'){//浠ｇ悊鏂规硶returnfunction(){//闄勫姞閫昏緫//濮旀墭缁欎富浣搑eturntarget.divide();}}//濮旀墭鐨勬柟娉曞拰灞炴€eturntarget[property]}}varcalculator=newCalculator();varproxyCalculator=newProxy(calculator,ProxyCalculatorHandler);鍒涘缓浜咰hangeObsverver璁捐妯″紡銆俈ue.js鏈€鏄剧潃鐨勭壒鎬т箣涓€鏄笉鏄剧溂鐨勫弽搴旂郴缁熴€傜粍浠剁姸鎬佹槸涓€涓搷搴斿紡JavaScript瀵硅薄锛屽畠鍦ㄤ慨鏀规椂鏇存柊UI銆傚氨鍍忔垜浠湪浣跨敤Excel鏃讹紝濡傛灉鍦ˋ2鍗曞厓鏍间腑璁剧疆涓€涓叕寮忊€?A0+A1鈥濓紝灏咥0鍜孉1鐩稿姞锛屽綋鎴戜滑鏀瑰彉A0鎴朅1鐨勫€兼椂锛孉2涔熶細闅忎箣鏀瑰彉銆傝繖涔熸槸鎴戜滑涔嬪墠澶氭璇磋繃鐨勫嚱鏁板紡缂栫▼鎬濇兂鐨勪竴涓壇浣滅敤銆傚湪JavaScript涓紝濡傛灉鎴戜滑浣跨敤鍛戒护寮忕紪绋嬶紝鎴戜滑鍙互鐪嬪埌杩欑鍓綔鐢ㄦ槸涓嶅瓨鍦ㄧ殑銆倂arA0=1;varA1=2;varA2=A0+A1;console.log(A2)//杩斿洖鍊间负3A0=2;console.log(A2)//returnisstill3butReactiveProgramming)鏄竴绉嶅熀浜庡０鏄庡紡缂栫▼鐨勮寖渚嬨€傚鏋滄垜浠兂瑕佸疄鐜板搷搴斿紡缂栫▼锛屾垜浠皢闇€瑕佷竴涓儚涓嬮潰绀轰緥涓殑鏇存柊鍔熻兘銆傚彉閲廇2锛涘姛鑳芥洿鏂帮紙锛墈A2=A0+A1;}whenDepsChange(鏇存柊);JavaScript涓病鏈墂henDepsChange杩欐牱鐨勬満鍒舵潵璺熻釜灞€閮ㄥ彉閲忕殑璇诲啓銆俈ue.js鑳藉仛鐨勫氨鏄嫤鎴璞″睘鎬х殑璇诲啓銆俈ue2浠呬娇鐢╣etter/setter銆傚湪Vue3涓紝Proxies鐢ㄤ簬鍝嶅簲寮忓璞★紝getters/setters鐢ㄤ簬閫氳繃灞炴€ц幏鍙栧厓绱犵殑refs銆俧unctionreactive(obj){returnnewProxy(obj,{get(target,key){track(target,key)returntarget[key]},set(target,key,value){鐩爣[key]=valuetrigger(target,key)}})}handler鍖呭惈浜嗕竴绯诲垪鍙€夌殑鏂规硶锛屽悕瀛楀凡缁忛鍏堝畾涔夊ソ锛岀О涓洪櫡闃辨柟娉曪紙trapmethods锛夋墿灞曪細鍦ㄤ粈涔堝満鏅笅鍙互浣跨敤Proxy锛烰avaScript涓唴缃殑Proxy闄や簡鍏呭綋浠ｇ悊涔嬪锛岃繕鍙互鏈夊緢澶氬姛鑳姐€傚熀浜庡叾鎷︽埅鍜岃嚜瀹氫箟鐗规€э紝Proxy涔熷箍娉涘簲鐢ㄤ簬瀵硅薄铏氭嫙鍖栥€佽繍绠楃閲嶈浇浠ュ強鏈€杩戞祦琛岀殑鍏冪紪绋嬨€傝繖閲屾垜浠笉浣跨敤浼唬鐮侊紝鑰屾槸浣跨敤涓€浜涚畝鍗曠殑鐪熷疄浠ｇ爜鏉ヨ璇嗛櫡闃辨柟娉曠殑寮哄ぇ銆傚璞¤櫄鎷熷寲涓嬮潰渚嬪瓙涓殑oddNumArr濂囨暟鏁扮粍灏辨槸涓€涓櫄鎷熷璞°€傛垜浠彲浠ユ煡濂囨暟鏁扮粍閲岄潰鏄鏁拌繕鏄伓鏁帮紝涔熷彲浠ュ緱鍒颁竴涓鏁帮紝浣嗗疄闄呬笂杩欎釜鏁扮粍閲岄潰骞舵病鏈夊瓨鏁版嵁銆俢onstoddNumArr=newProxy([],{get:(target,index)=>index%2===1?index:Number(index)+1,鏈?(target,number)=>number%2===1})console.log(4inoddNumArr)//falseconsole.log(7inoddNumArr)//trueconsole.log(oddNumArr[15])//15console.log(oddNumArr[16])//17杩愮畻绗﹂噸杞借繍绠楃閲嶈浇灏辨槸閲嶆柊瀹氫箟涓€涓凡鏈夌殑杩愮畻绗︼紝璧嬩簣瀹冨彟涓€绉嶅姛鑳斤紝浠ラ€傚簲涓嶅悓鐨勬暟鎹被鍨嬨€備緥濡傦紝鍦ㄤ笅闈㈢殑渚嬪瓙涓紝鎴戜滑閲嶈浇浜嗏€?鈥濄€俿ymbol锛屾墍浠ュ湪鎵цobj.count鐨勬椂鍊欙紝鎴戜滑鐪嬪埌瀹冭繑鍥炰簡鎷︽埅get鍜宻et鐨勮嚜瀹氫箟鏂规硶锛屽苟杩斿洖浜嗚鏁扮殑缁撴灉銆倂arobj=newProxy({},{get:function(target,key,receiver){console.log(`Get${key}!`);returnReflect.get(target,key,receiver);},璁剧疆:function(target,key,value,receiver){console.log(`set${key}!`);returnReflect.set(target,key,value,receiver);}});obj.count=1;//杩斿洖锛氳缃甤ount!obj.count;//Return:Getcount!//Return:Setcount!//Return:1鏈枃涓?鏈圖ay2鐨勫涔犵瑪璁帮紝鍐呭鏉ヨ嚜鏋佸鏃堕棿銆奐vascript杩涢樁瀹炴垬璇俱€嬶紝澶у涓€璧疯繘姝ヰ煉煉?/p>
