¿Cómo obtener el destino de un proxy de JavaScript?

Cómo acceder al destino (que es myArray) de myProxy ¿aquí?

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

const myProxy = createProxy();

Si está utilizando Vue 3 y está tratando con Proxies, Vue proporciona algunos métodos para ayudar con esto:

import { isProxy, toRaw } from 'vue';

Usando estos, puede verificar si un objeto es un proxy con isProxypor ejemplo:

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

Y puede extraer los datos sin procesar usando toRaw:

const rawObjectOrArray = toRaw(reactiveObjectOrArray)

Más información sobre aRaw y esProxy

Puede hacer una copia de los datos devueltos por el proxy usando Object.assign():

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

Esto funcionará para todos propiedades propias enumerables existente en el proxy/objetivo.

Descubrí que (usando Vue.js donde a veces están involucrados objetos Proxy, por ejemplo, cuando veo un accesorio de componente) puedo obtener el objetivo tanto si es un Objeto como si es una Matriz usando JSON.stringify:

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

Este enfoque también funciona con objetivos de matriz, mientras que Object.assign({}, myProxy) funciona solo si el objetivo es un objeto.

Pero soy muy nuevo en los proxies de JavaScript y mi conocimiento es limitado. Puede que no entienda las limitaciones y advertencias de este enfoque. Sin embargo, ¡tal vez ayude a alguien!

Como las otras respuestas ya dijeron un proxy obtener trampa puede ser una solución elegante.

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]

Este ejemplo de código debería ser bastante robusto ya que:

• evita conflictos de nombres de propiedades mediante el uso de un Symbol
• cubre todos los escenarios de obtención mediante el uso Reflect.get en lugar de target[property]
• ADVERTENCIA: tenga cuidado con la herencia de prototipos: en caso de que su proxy termine siendo utilizado como prototipo, el not_itself_a_proxy[IDENTITY] la llamada no regresa not_itself_a_proxy sino la “identidad” del prototipo!

Hay una forma inteligente de hacer esto: puede agregar un conseguir trap al proxy y hacer que devuelva el objetivo condicionalmente Al igual que..

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);

Recuerde que cuantas más líneas de código agregue a las trampas, más lento será el rendimiento del objeto. Espero que esto ayude.

Las otras respuestas dieron algunas buenas soluciones. Aquí está la respuesta de @Yuci resumida para las clases, en cuyo caso, es tan simple como definir una variable de instancia de algún nombre especial. La función de obtención del proxy lo devuelve, al igual que el objetivo subyacente.

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__);

¿Qué tal agregar la siguiente trampa de obtención:

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();

Y puede obtener el objetivo del proxy por myProxy.myTarget:

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