欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中的Proxy對(duì)象

 更新時(shí)間：2020年11月27日 09:12:30   作者：WindrunnerMax  
這篇文章主要介紹了JavaScript中的Proxy對(duì)象的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下

Js中Proxy對(duì)象

Proxy對(duì)象用于定義基本操作的自定義行為，例如屬性查找、賦值、枚舉、函數(shù)調(diào)用等。

語(yǔ)法

const proxy = new Proxy(target, handler);
  • target: 要使用Proxy包裝的目標(biāo)對(duì)象，可以是任何類(lèi)型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理。
  • handler: 一個(gè)通常以函數(shù)作為屬性的對(duì)象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理proxy的行為。

描述

Proxy用于修改某些操作的默認(rèn)行為，也可以理解為在目標(biāo)對(duì)象之前架設(shè)一層攔截，外部所有的訪問(wèn)都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外部的訪問(wèn)進(jìn)行過(guò)濾和修改。這個(gè)詞的原理為代理，在這里可以表示由它來(lái)代理某些操作，譯為代理器。

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是用于監(jiān)聽(tīng)屬性，而Proxy是監(jiān)聽(tīng)整個(gè)對(duì)象，通過(guò)調(diào)用new Proxy()，可以創(chuàng)建一個(gè)代理用來(lái)替代另一個(gè)對(duì)象被稱(chēng)為目標(biāo)，這個(gè)代理對(duì)目標(biāo)對(duì)象進(jìn)行了虛擬，因此該代理與該目標(biāo)對(duì)象表面上可以被當(dāng)作同一個(gè)對(duì)象來(lái)對(duì)待。代理允許攔截在目標(biāo)對(duì)象上的底層操作，而這原本是Js引擎的內(nèi)部能力，攔截行為使用了一個(gè)能夠響應(yīng)特定操作的函數(shù)，即通過(guò)Proxy去對(duì)一個(gè)對(duì)象進(jìn)行代理之后，我們將得到一個(gè)和被代理對(duì)象幾乎完全一樣的對(duì)象，并且可以從底層實(shí)現(xiàn)對(duì)這個(gè)對(duì)象進(jìn)行完全的監(jiān)控。

// 常見(jiàn)的一道面試題 實(shí)現(xiàn) a===1&&a===2&&a===3 為true

// Object.defineProperty 定義的是屬性
// 可以實(shí)現(xiàn)對(duì)于題目的要求
var _a = 0;
Object.defineProperty(window, "a", {
  get:function(){
    return ++_a;
  }
})
console.log(a===1 && a===2 && a===3); // true

// proxy 代理的是對(duì)象 
// 因此在調(diào)用時(shí)實(shí)際與題目要求并不太相符
// 但同樣也是一種實(shí)現(xiàn)方式
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()方法可以用來(lái)創(chuàng)建一個(gè)可撤銷(xiāo)的代理對(duì)象，其返回一個(gè)包含了代理對(duì)象本身和它的撤銷(xiāo)方法的可撤銷(xiāo)Proxy對(duì)象。

  • target: 將用Proxy封裝的目標(biāo)對(duì)象，可以是任何類(lèi)型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至可以是另外一個(gè)代理對(duì)象。
  • handler: 一個(gè)對(duì)象，其屬性是一批可選的函數(shù)，這些函數(shù)定義了對(duì)應(yīng)的操作被執(zhí)行時(shí)代理的行為。

該方法的返回值是一個(gè)對(duì)象，其結(jié)構(gòu)為{"proxy": proxy, "revoke": revoke}，一旦某個(gè)代理對(duì)象被撤銷(xiāo)，它將變得幾乎完全不可調(diào)用，在它身上執(zhí)行任何的可代理操作都會(huì)拋出TypeError異常，注意可代理操作一共有14種，執(zhí)行這14種操作以外的操作不會(huì)拋出異常。一旦被撤銷(xiāo)，這個(gè)代理對(duì)象便不可能被直接恢復(fù)到原來(lái)的狀態(tài)，同時(shí)和它關(guān)聯(lián)的目標(biāo)對(duì)象以及處理器對(duì)象都有可能被垃圾回收掉。再次調(diào)用撤銷(xiāo)方法revoke()則不會(huì)有任何效果，但也不會(huì)報(bào)錯(cuò)。

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"，因?yàn)?typeof 不屬于可代理操作

handler對(duì)象方法

handler對(duì)象是一個(gè)容納一批特定屬性的占位符對(duì)象，它包含有Proxy的各個(gè)捕獲器trap。所有的捕捉器是可選的，如果沒(méi)有定義某個(gè)捕捉器，那么就會(huì)保留源對(duì)象的默認(rèn)行為。

  • handler.getPrototypeOf(): Object.getPrototypeOf方法的捕捉器。
  • handler.setPrototypeOf(): Object.setPrototypeOf方法的捕捉器。
  • handler.isExtensible(): Object.isExtensible方法的捕捉器。
  • handler.preventExtensions(): Object.preventExtensions方法的捕捉器。
  • handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor方法的捕捉器。
  • handler.defineProperty(): Object.defineProperty方法的捕捉器。
  • handler.has(): in操作符的捕捉器。
  • handler.get(): 屬性讀取操作的捕捉器。
  • handler.set(): 屬性設(shè)置操作的捕捉器。
  • handler.deleteProperty(): delete操作符的捕捉器。
  • handler.ownKeys(): Reflect.ownKeys、Object.getOwnPropertyNames、Object.keys、Object.getOwnPropertySymbols方法的捕捉器。
  • handler.apply(): 函數(shù)調(diào)用操作的捕捉器。
  • handler.construct(): new操作符的捕捉器。
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 // [ 'a', 'f' ]
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

每日一題

https://github.com/WindrunnerMax/EveryDay

以上就是JavaScript中的Proxy對(duì)象的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Proxy對(duì)象的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論