Wie erhalte ich das Ziel eines JavaScript-Proxys?

So greifen Sie auf das Ziel zu (das ist myArray) von myProxy Hier?

function createProxy() {
  const myArray = [Math.random(), Math.random()];
  return new Proxy(myArray, {});
}

const myProxy = createProxy();

Ich hätte gerne eine getProxyTarget Funktion, die das ursprüngliche Objekt zurückgeben würde, ohne einen anderen Teil des Codes zu ändern:

let original;
function createProxy() {
  const myArray = [Math.random(), Math.random()];
  original = myArray;
  return new Proxy(myArray, {});
}

const myProxy = createProxy();

function getProxyTarget(proxy){ /* ... your code */ }

console.log(getProxyTarget(myProxy) === original) // should be true

Wenn Sie Vue 3 verwenden und mit Proxies arbeiten, bietet Vue einige Methoden, die Ihnen dabei helfen:

import { isProxy, toRaw } from 'vue';

Mithilfe dieser können Sie überprüfen, ob ein Objekt ein Proxy ist isProxyZum Beispiel:

isProxy(reactiveObjectOrArray) ? 'yup' : 'nope'

Und Sie können die Rohdaten mit extrahieren toRaw:

const rawObjectOrArray = toRaw(reactiveObjectOrArray)

Weitere Informationen zu toRaw Und isProxy

Mit können Sie eine Kopie der vom Proxy zurückgegebenen Daten erstellen Object.assign():

const target_copy = Object.assign({}, my_proxy);

Das wird für alle funktionieren aufzählbare eigene Eigenschaften auf dem Proxy/Ziel vorhanden.

Ich finde, dass ich (bei Verwendung von Vue.js, wo manchmal Proxy-Objekte beteiligt sind, z. B. beim Beobachten einer Komponenten-Requisite) das Ziel sowohl erhalten kann, wenn es ein Objekt ist, als auch wenn es ein Array ist JSON.stringify:

let myTarget = JSON.parse(JSON.stringify(myProxy))

Dieser Ansatz funktioniert auch mit Array-Zielen Object.assign({}, myProxy) Funktioniert nur, wenn das Ziel ein Objekt ist.

Aber ich bin ein Neuling in Sachen JavaScript-Proxys und meine Kenntnisse sind begrenzt. Möglicherweise verstehe ich die Einschränkungen und Vorbehalte dieses Ansatzes nicht. Trotzdem hilft es vielleicht jemandem!

Wie die anderen Antworten bereits sagten a Proxy erhält Falle kann eine elegante Lösung sein.

const IDENTITY = Symbol('proxy_target_identity')
const handler = {
  get: (target, property, receiver) => {
    if (property === IDENTITY) {
      return target
    }
    return Reflect.get(target, property, receiver)
  }
}
function createProxy() {
    const myArray = [Math.random(), Math.random()];
    return new Proxy(myArray, handler);
}
const myProxy = createProxy();
const orignal_target = myProxy[IDENTITY]

Dieses Codebeispiel sollte ziemlich robust sein, da es:

• vermeidet Konflikte bei Eigenschaftsnamen durch die Verwendung von a Symbol
• deckt alle Get-Szenarien mit ab Reflect.get anstatt target[property]
• WARNUNG: Seien Sie vorsichtig bei der Prototypenvererbung – für den Fall, dass Ihr Proxy letztendlich als Prototyp verwendet wird not_itself_a_proxy[IDENTITY] Der Anruf wird nicht zurückgegeben not_itself_a_proxy sondern die „Identität“ des Prototyps!

Es gibt eine clevere Möglichkeit, dies zu tun: Sie können eine hinzufügen erhalten trap an den Proxy senden und ihn zurückgeben lassen Ziel bedingt. So..

let resolveMode = false;  // Switch that controls if getter returns target or prop. 

function resolve(obj) {
    resolveMode = true;  // Turn on our switch
    let target = obj.anything;  // This gets the target not the prop!
    resolveMode = false;  // Turn off the switch for the getter to behave normally
    return target;  // Return what we got!
}

function createProxy() {
    const myArray = [Math.random(), Math.random()];
    return new Proxy(myArray, {
        get: function(target, prop) {
            if (resolveMode) return target;  // This is where the magic happens!
            else return target[prop];        // This is normal behavior..
        }
    });
}

const myProxy = createProxy();
let target = resolve(myProxy);

Denken Sie daran, dass die Leistung des Objekts umso langsamer wird, je mehr Codezeilen Sie zu Traps hinzufügen. Hoffe das hilft.

Die anderen Antworten gaben einige gute Lösungen. Hier ist die Antwort von @Yuci für Klassen zusammengefasst. In diesem Fall ist es so einfach wie das Definieren einer Instanzvariablen mit einem speziellen Namen. Die Proxy-Get-Funktion gibt es zurück, ebenso wie das zugrunde liegende Ziel.

class Foo {
    constructor() {
        this.__target__ = this;
        return new Proxy(this, {
            get: function (target, name) {
                if (name in target) return target[name];
                // your code here
            }
        });
    }
}

let foo = new Foo();
let target = foo.__target__;
console.log('proxied Foo', foo);
console.log('recovered target', target, target.__target__.__target__);

Wie wäre es mit dem Hinzufügen der folgenden Get-Trap:

const handler = {
  get: (target, property, receiver) => {
    if (property === 'myTarget') {
      return target
    }
    return target[property]
  }
}

const myArray = [Math.random(), Math.random()];

function createProxy() {
//     const myArray = [Math.random(), Math.random()];
    return new Proxy(myArray, handler);
}

const myProxy = createProxy();

Und Sie können das Ziel des Proxys ermitteln myProxy.myTarget:

console.log(myProxy.myTarget) // [0.22089416118932403, 0.08429264462405173]
console.log(myArray === myProxy.myTarget) // true