Js涓璓roxy瀵硅薄

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js涓璓roxy瀵硅薄相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/function' title='function'>function   浠ｇ悊   灏变細   str   turn   zh-cn   鍏宠仈   day   棰樼洰   

Js涓璓roxy瀵硅薄

Proxy瀵硅薄鐢ㄤ簬瀹氫箟鍩烘湰鎿嶄綔鐨勮嚜瀹氫箟琛屼负锛屼緥濡傚睘鎬ф煡鎵俱€佽祴鍊笺€佹灇涓俱€佸嚱鏁拌皟鐢ㄧ瓑銆?/p>

璇硶

const proxy = new Proxy(target, handler);
  • target: 瑕佷娇鐢?code>Proxy鍖呰鐨勭洰鏍囧璞★紝鍙互鏄换浣曠被鍨嬬殑瀵硅薄锛屽寘鎷師鐢熸暟缁勶紝鍑芥暟锛岀敋鑷冲彟涓€涓唬鐞嗐€?/li>
  • handler: 涓€涓€氬父浠ュ嚱鏁颁綔涓哄睘鎬х殑瀵硅薄锛屽悇灞炴€т腑鐨勫嚱鏁板垎鍒畾涔変簡鍦ㄦ墽琛屽悇绉嶆搷浣滄椂浠ｇ悊proxy鐨勮涓恒€?/li>

鎻忚堪

Proxy鐢ㄤ簬淇敼鏌愪簺鎿嶄綔鐨勯粯璁よ涓猴紝涔熷彲浠ョ悊瑙ｄ负鍦ㄧ洰鏍囧璞′箣鍓嶆灦璁句竴灞傛嫤鎴紝澶栭儴鎵€鏈夌殑璁块棶閮藉繀椤诲厛閫氳繃杩欏眰鎷︽埅锛屽洜姝ゆ彁渚涗簡涓€绉嶆満鍒讹紝鍙互瀵瑰閮ㄧ殑璁块棶杩涜杩囨护鍜屼慨鏀广€傝繖涓瘝鐨勫師鐞嗕负浠ｇ悊锛屽湪杩欓噷鍙互琛ㄧず鐢卞畠鏉ヤ唬鐞嗘煇浜涙搷浣滐紝璇戜负浠ｇ悊鍣ㄣ€?/p> 

var target = {a: 1};
var proxy = new Proxy(target, {
    set: function(target, key, value, receiver){ 
        console.log("watch");
        return Reflect.set(target, key, value, receiver);
    },
    get: function(target, key, receiver){ 
        return target[key];
    }
});
proxy.a = 11; // watch
console.log(target); // {a: 11}

Object.defineProperty鏄敤浜庣洃鍚睘鎬э紝鑰?code>Proxy鏄洃鍚暣涓璞★紝閫氳繃璋冪敤new Proxy()锛屽彲浠ュ垱寤轰竴涓唬鐞嗙敤鏉ユ浛浠ｅ彟涓€涓璞¤绉颁负鐩爣锛岃繖涓唬鐞嗗鐩爣瀵硅薄杩涜浜嗚櫄鎷燂紝鍥犳璇ヤ唬鐞嗕笌璇ョ洰鏍囧璞¤〃闈笂鍙互琚綋浣滃悓涓€涓璞℃潵瀵瑰緟銆備唬鐞嗗厑璁告嫤鎴湪鐩爣瀵硅薄涓婄殑搴曞眰鎿嶄綔锛岃€岃繖鍘熸湰鏄?code>Js寮曟搸鐨勫唴閮ㄨ兘鍔涳紝鎷︽埅琛屼负浣跨敤浜嗕竴涓兘澶熷搷搴旂壒瀹氭搷浣滅殑鍑芥暟锛屽嵆閫氳繃Proxy鍘诲涓€涓璞¤繘琛屼唬鐞嗕箣鍚庯紝鎴戜滑灏嗗緱鍒颁竴涓拰琚唬鐞嗗璞″嚑涔庡畬鍏ㄤ竴鏍风殑瀵硅薄锛屽苟涓斿彲浠ヤ粠搴曞眰瀹炵幇瀵硅繖涓璞¤繘琛屽畬鍏ㄧ殑鐩戞帶銆?/p> 

// 甯歌鐨勪竴閬撻潰璇曢 瀹炵幇 a===1&&a===2&&a===3 涓簍rue

// Object.defineProperty 瀹氫箟鐨勬槸灞炴€?// 鍙互瀹炵幇瀵逛簬棰樼洰鐨勮姹?var  _a = 0;
Object.defineProperty(window, "a", {
    get:function(){
        return ++_a;
    }
})
console.log(a===1 && a===2 && a===3); // true

// proxy 浠ｇ悊鐨勬槸瀵硅薄 
// 鍥犳鍦ㄨ皟鐢ㄦ椂瀹為檯涓庨鐩姹傚苟涓嶅お鐩哥
// 浣嗗悓鏍蜂篃鏄竴绉嶅疄鐜版柟寮?var _a = 0;
var proxy = new Proxy(window, {
    set: function(target, key, value, receiver){ 
        return Reflect.set(target, key, value, receiver);
    },
    get: function(target, key, receiver){
        if(key === "a") return ++_a;
        else return window[key];
    }
});
console.log(proxy.a===1 && proxy.a===2 && proxy.a===3); //true

鏂规硶

Proxy.revocable()

Proxy.revocable(target, handler)
Proxy.revocable()鏂规硶鍙互鐢ㄦ潵鍒涘缓涓€涓彲鎾ら攢鐨勪唬鐞嗗璞★紝鍏惰繑鍥炰竴涓寘鍚簡浠ｇ悊瀵硅薄鏈韩鍜屽畠鐨勬挙閿€鏂规硶鐨勫彲鎾ら攢Proxy瀵硅薄銆?/p>

  • target: 灏嗙敤Proxy灏佽鐨勭洰鏍囧璞★紝鍙互鏄换浣曠被鍨嬬殑瀵硅薄锛屽寘鎷師鐢熸暟缁勶紝鍑芥暟锛岀敋鑷冲彲浠ユ槸鍙﹀涓€涓唬鐞嗗璞°€?/li>
  • handler: 涓€涓璞★紝鍏跺睘鎬ф槸涓€鎵瑰彲閫夌殑鍑芥暟锛岃繖浜涘嚱鏁板畾涔変簡瀵瑰簲鐨勬搷浣滆鎵ц鏃朵唬鐞嗙殑琛屼负銆?/li>

璇ユ柟娉曠殑杩斿洖鍊兼槸涓€涓璞★紝鍏剁粨鏋勪负{"proxy": proxy, "revoke": revoke}锛屼竴鏃︽煇涓唬鐞嗗璞¤鎾ら攢锛屽畠灏嗗彉寰楀嚑涔庡畬鍏ㄤ笉鍙皟鐢紝鍦ㄥ畠韬笂鎵ц浠讳綍鐨勫彲浠ｇ悊鎿嶄綔閮戒細鎶涘嚭TypeError寮傚父锛屾敞鎰忓彲浠ｇ悊鎿嶄綔涓€鍏辨湁14绉嶏紝鎵ц杩?code>14绉嶆搷浣滀互澶栫殑鎿嶄綔涓嶄細鎶涘嚭寮傚父銆備竴鏃﹁鎾ら攢锛岃繖涓唬鐞嗗璞′究涓嶅彲鑳借鐩存帴鎭㈠鍒板師鏉ョ殑鐘舵€侊紝鍚屾椂鍜屽畠鍏宠仈鐨勭洰鏍囧璞′互鍙婂鐞嗗櫒瀵硅薄閮芥湁鍙兘琚瀮鍦惧洖鏀舵帀銆傚啀娆¤皟鐢ㄦ挙閿€鏂规硶revoke()鍒欎笉浼氭湁浠讳綍鏁堟灉锛屼絾涔熶笉浼氭姤閿欍€?/p> 

var revocable = Proxy.revocable({}, {
  get: function(target, key) {
    return `[[ ${key} ]]`;
  }
});
var proxy = revocable.proxy;
console.log(proxy.example); // [[ example ]]
revocable.revoke();
// console.log(proxy.example);  // 鎶涘嚭 TypeError
// proxy.example = 1;           // 鎶涘嚭 TypeError
// delete proxy.example;        // 鎶涘嚭 TypeError
// typeof proxy                 // "object"锛屽洜涓?typeof 涓嶅睘浜庡彲浠ｇ悊鎿嶄綔

handler瀵硅薄鏂规硶

handler瀵硅薄鏄竴涓绾充竴鎵圭壒瀹氬睘鎬х殑鍗犱綅绗﹀璞★紝瀹冨寘鍚湁Proxy鐨勫悇涓崟鑾峰櫒trap銆傛墍鏈夌殑鎹曟崏鍣ㄦ槸鍙€夌殑锛屽鏋滄病鏈夊畾涔夋煇涓崟鎹夊櫒锛岄偅涔堝氨浼氫繚鐣欐簮瀵硅薄鐨勯粯璁よ涓恒€?/p>

  • handler.getPrototypeOf(): Object.getPrototypeOf鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.setPrototypeOf(): Object.setPrototypeOf鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.isExtensible(): Object.isExtensible鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.preventExtensions(): Object.preventExtensions鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.defineProperty(): Object.defineProperty鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.has(): in鎿嶄綔绗︾殑鎹曟崏鍣ㄣ€?/li>
  • handler.get(): 灞炴€ц鍙栨搷浣滅殑鎹曟崏鍣ㄣ€?/li>
  • handler.set(): 灞炴€ц缃搷浣滅殑鎹曟崏鍣ㄣ€?/li>
  • handler.deleteProperty(): delete鎿嶄綔绗︾殑鎹曟崏鍣ㄣ€?/li>
  • handler.ownKeys(): Reflect.ownKeys銆?code>Object.getOwnPropertyNames銆?code>Object.keys銆?code>Object.getOwnPropertySymbols鏂规硶鐨勬崟鎹夊櫒銆?/li>
  • handler.apply(): 鍑芥暟璋冪敤鎿嶄綔鐨勬崟鎹夊櫒銆?/li>
  • handler.construct(): new鎿嶄綔绗︾殑鎹曟崏鍣ㄣ€?/li> 
var target = {
    a: 1,
    f: function(...args){
        console.log(...args);
    }
};
var proxy = new Proxy(target, {
    getPrototypeOf: function(target) {
        console.log("getPrototypeOf");
        return Object.getPrototypeOf(target);
    },
    setPrototypeOf: function(target, prototype) {
        console.log("setPrototypeOf");
        return Object.setPrototypeOf(target, prototype);
    },        
    isExtensible: function(target) {
        console.log("isExtensible");
        return Object.isExtensible(target);
    },
    preventExtensions: function(target) {
        console.log("preventExtensions");
        return Object.preventExtensions(target);
    },
    getOwnPropertyDescriptor: function(target, prop) {
        console.log("getOwnPropertyDescriptor");
        return Object.getOwnPropertyDescriptor(target, prop);
    },
    defineProperty: function(target, prop, descriptor) {
        console.log("defineProperty");
        return Object.defineProperty(target, prop, descriptor);
    },
    has: function(target, prop) {
        console.log("has");
        return prop in target;
    },
    get: function(target, prop, receiver) {
        console.log("get");
        return target[prop];
    },
    set: function(target, prop, value, receiver) {
        console.log("set");
        target[prop] = value;
        return true;
    },
    deleteProperty: function(target, property) {
        console.log("deleteProperty");
        delete target[property];
        return true;
    },
    ownKeys: function(target) {
        console.log("ownKeys");
        return Reflect.ownKeys(target);
    }
})


var proxyF = new Proxy(target.f, {
    construct: function(target, argumentsList, newTarget) {
        console.log("construct");
        return new target(...argumentsList);
    },
    apply: function(target, thisArg, argumentsList) {
        console.log("apply");
        return target.apply(thisArg, argumentsList);
    },

})

const _prototype = {test: 1};
Object.setPrototypeOf(proxy, _prototype); // setPrototypeOf
console.log(Object.getPrototypeOf(proxy)); // getPrototypeOf // { test: 1 }

Object.preventExtensions(proxy); // preventExtensions
console.log(Object.isExtensible(proxy)); // isExtensible // false

Object.defineProperty(proxy, "a", {configurable: true}); // defineProperty
console.log(Object.getOwnPropertyDescriptor(proxy, "a")); // getOwnPropertyDescriptor // { value: 1, writable: true, enumerable: true, configurable: true }

proxy.a = 11; // set
console.log(proxy.a); // get // 11

console.log(Object.keys(proxy)); // ownKeys getOwnPropertyDescriptor getOwnPropertyDescriptor // [ 鈥榓鈥? 鈥榝鈥?]
delete proxy.a; // deleteProperty
console.log("a" in proxy); // has // false

proxyF(1, 2, 3); // apply 1 2 3
new proxyF(1, 2, 3); // construct 1 2 3

鍙傝€?/h2> 
https://juejin.im/post/6844903853867925517
https://www.cnblogs.com/kdcg/p/9145385.html
https://developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Global_Objects/Proxy


以上是关于Js涓璓roxy瀵硅薄的主要内容，如果未能解决你的问题，请参考以下文章

Spring瀹瑰櫒绠＄悊瀵硅薄鍜宯ew瀵硅薄

绫诲拰瀵硅薄

闈㈠悜瀵硅薄

闈㈠悜瀵硅薄缂栫▼

[STL] 绠€鍗曟竻闄ap瀵硅薄鎵€鍗犵敤鍐呭瓨

ServletContext瀵硅薄