const target = {  message1: "hello",  message2: "everyone",};const handler1 = {};const proxy1 = new Proxy(target, handler1);

console.log(proxy1.message1); // helloconsole.log(proxy1.message2); // everyone

const target = {  message1: "hello",  message2: "everyone",};const handler2 = {  get(target, prop, receiver) {    return "world";  },};const proxy2 = new Proxy(target, handler2);

console.log(proxy2.message1); // worldconsole.log(proxy2.message2); // world

const target = {  message1: "hello",  message2: "everyone",};const handler3 = {  get(target, prop, receiver) {    if (prop === "message2") {      return "world";    }    return Reflect.get(...arguments);  },};const proxy3 = new Proxy(target, handler3);console.log(proxy3.message1); // helloconsole.log(proxy3.message2); // world

メモ:Proxy.prototype プロパティはないので、Proxy インスタンスには特別なプロパティやメソッドはありません。

const handler = {  get(obj, prop) {    return prop in obj ? obj[prop] : 37;  },};const p = new Proxy({}, handler);p.a = 1;p.b = undefined;console.log(p.a, p.b); // 1, undefinedconsole.log("c" in p, p.c); // false, 37

const target = {};const p = new Proxy(target, {});p.a = 37; // 操作はプロキシーへ転送されますconsole.log(target.a); // 37 （操作は正しく転送されました）

class Secret {  #secret;  constructor(secret) {    this.#secret = secret;  }  get secret() {    return this.#secret.replace(/\d+/, "[REDACTED]");  }}const aSecret = new Secret("123456");console.log(aSecret.secret); // [REDACTED]// 何もしない転送のように見えるconst proxy = new Proxy(aSecret, {});console.log(proxy.secret); // TypeError: Cannot read private member #secret from an object whose class did not declare it

const proxy = new Proxy(aSecret, {  get(target, prop, receiver) {    // 既定では、Reflect.get(target, prop, receiver) のようになり、    // `this` の値が異なるようになります。    return target[prop];  },});console.log(proxy.secret);

class Secret {  #x = 1;  x() {    return this.#x;  }}const aSecret = new Secret();const proxy = new Proxy(aSecret, {  get(target, prop, receiver) {    const value = target[prop];    if (value instanceof Function) {      return function (...args) {        return value.apply(this === receiver ? target : this, args);      };    }    return value;  },});console.log(proxy.x());

const proxy = new Proxy(new Map(), {});console.log(proxy.size); // TypeError: get size method called on incompatible Proxy

const validator = {  set(obj, prop, value) {    if (prop === "age") {      if (!Number.isInteger(value)) {        throw new TypeError("年齢が整数ではありません");      }      if (value > 200) {        throw new RangeError("年齢が不正なようです");      }    }    // 値を保存する既定の挙動    obj[prop] = value;    // 値の保存が成功したことを返します。    return true;  },};const person = new Proxy({}, validator);person.age = 100;console.log(person.age); // 100person.age = "young"; // 例外が発生するperson.age = 300; // 例外が発生する

const view = new Proxy(  {    selected: null,  },  {    set(obj, prop, newVal) {      const oldVal = obj[prop];      if (prop === "selected") {        if (oldVal) {          oldVal.setAttribute("aria-selected", "false");        }        if (newVal) {          newVal.setAttribute("aria-selected", "true");        }      }      // 値を保存する既定の挙動      obj[prop] = newVal;      // 成功を示す      return true;    },  },);const item1 = document.getElementById("item-1");const item2 = document.getElementById("item-2");// select item1:view.selected = item1;console.log(`item1: ${item1.getAttribute("aria-selected")}`);// item1: true// selecting item2 de-selects item1:view.selected = item2;console.log(`item1: ${item1.getAttribute("aria-selected")}`);// item1: falseconsole.log(`item2: ${item2.getAttribute("aria-selected")}`);// item2: true

const products = new Proxy(  {    browsers: ["Firefox", "Chrome"],  },  {    get(obj, prop) {      // 追加プロパティ      if (prop === "latestBrowser") {        return obj.browsers[obj.browsers.length - 1];      }      // 値を返す既定の挙動      return obj[prop];    },    set(obj, prop, value) {      // 追加プロパティ      if (prop === "latestBrowser") {        obj.browsers.push(value);        return true;      }      // 値が配列でなければ変換      if (typeof value === "string") {        value = [value];      }      // 値を保存する既定の挙動      obj[prop] = value;      // 値の保存が成功したことを返します。      return true;    },  },);console.log(products.browsers);//  ['Firefox', 'Chrome']products.browsers = "Safari";//  (間違えて) 文字列を渡すconsole.log(products.browsers);//  ['Safari'] <- 問題ありません、値は配列になっていますproducts.latestBrowser = "Edge";console.log(products.browsers);//  ['Safari', 'Edge']console.log(products.latestBrowser);//  'Edge'

/*  const docCookies = ... "docCookies" オブジェクトは下記から取得しています。  https://reference.codeproject.com/dom/document/cookie/simple_document.cookie_framework*/const docCookies = new Proxy(docCookies, {  get(target, key) {    return target[key] ?? target.getItem(key) ?? undefined;  },  set(target, key, value) {    if (key in target) {      return false;    }    return target.setItem(key, value);  },  deleteProperty(target, key) {    if (!(key in target)) {      return false;    }    return target.removeItem(key);  },  ownKeys(target) {    return target.keys();  },  has(target, key) {    return key in target || target.hasItem(key);  },  defineProperty(target, key, descriptor) {    if (descriptor && "value" in descriptor) {      target.setItem(key, descriptor.value);    }    return target;  },  getOwnPropertyDescriptor(target, key) {    const value = target.getItem(key);    return value      ? {          value,          writable: true,          enumerable: true,          configurable: false,        }      : undefined;  },});/* Cookie のテスト */console.log((docCookies.myCookie1 = "First value"));console.log(docCookies.getItem("myCookie1"));docCookies.setItem("myCookie1", "Changed value");console.log(docCookies.myCookie1);