Auto-riferimenti negli oggetti letterali / inizializzatori

C'è un modo per far funzionare qualcosa come il seguente in JavaScript?

var foo = {
    a: 5,
    b: 6,
    c: this.a + this.b  // Doesn't work
};

Nella forma attuale, questo codice genera ovviamente un errore di riferimento poiché thisnon si riferisce a foo. Ma è Esiste un modo per avere valori in proprietà di un oggetto letterale dipendere da altri beni dichiarati in precedenza?

Bene, l'unica cosa di cui posso parlarti sono getter :

var foo = {
  a: 5,
  b: 6,
  get c() {
    return this.a + this.b;
  }
}

console.log(foo.c) // 11

Questa è un'estensione sintattica introdotta dalla specifica ECMAScript 5th Edition, la sintassi è supportata dalla maggior parte dei browser moderni (incluso IE9).

Potresti fare qualcosa del tipo:

var foo = {
   a: 5,
   b: 6,
   init: function() {
       this.c = this.a + this.b;
       return this;
   }
}.init();

Questa sarebbe una specie di inizializzazione una volta dell'oggetto.

Si noti che si sta effettivamente assegnando il valore restituito di init()a foo, quindi è necessario return this.

Manca la risposta ovvia e semplice, quindi per completezza:

Ma è Esiste un modo per avere valori in proprietà di un oggetto letterale dipendere da altri beni dichiarati in precedenza?

No. Tutte le soluzioni qui lo differiscono fino a quando l'oggetto non viene creato (in vari modi) e quindi assegna la terza proprietà. Il modo più semplice è semplicemente fare questo:

var foo = {
    a: 5,
    b: 6
};
foo.c = foo.a + foo.b;

Tutti gli altri sono solo modi più indiretti di fare la stessa cosa. (Felix's è particolarmente intelligente, ma richiede la creazione e la distruzione di una funzione temporanea, l'aggiunta di complessità; e lascia una proprietà aggiuntiva sull'oggetto o [se deletequella proprietà] influisce sulle prestazioni degli accessi alle proprietà successive su quell'oggetto.)

Se è necessario che siano tutti all'interno di un'espressione, è possibile farlo senza la proprietà temporanea:

var foo = function(o) {
    o.c = o.a + o.b;
    return o;
}({a: 5, b: 6});

O ovviamente, se devi farlo più di una volta:

function buildFoo(a, b) {
    var o = {a: a, b: b};
    o.c = o.a + o.b;
    return o;
}

quindi dove è necessario utilizzarlo:

var foo = buildFoo(5, 6);

Crea un'istanza di una funzione anonima:

var foo = new function () {
    this.a = 5;
    this.b = 6;
    this.c = this.a + this.b;
};

Ora in ES6 è possibile creare proprietà memorizzate nella cache. Al primo utilizzo la proprietà valuta una volta per diventare una normale proprietà statica. Risultato: la seconda volta che la funzione matematica viene saltata.

La magia è nel getter.

const foo = {
    a: 5,
    b: 6,
    get c() {
        delete this.c;
        return this.c = this.a + this.b
    }
};

Nella freccia getter thisraccoglie l' ambito lessicale circostante .

foo     // {a: 5, b: 6}
foo.c   // 11
foo     // {a: 5, b: 6 , c: 11}  

Qualche chiusura dovrebbe occuparsene;

var foo = function() {
    var a = 5;
    var b = 6;
    var c = a + b;

    return {
        a: a,
        b: b,
        c: c
    }
}();

Tutte le variabili dichiarate all'interno foosono private foo, come ci si aspetterebbe da qualsiasi dichiarazione di funzione e poiché sono tutte nell'ambito, hanno tutte accesso reciproco senza dover fare riferimento this, proprio come ci si aspetterebbe da una funzione. La differenza è che questa funzione restituisce un oggetto che espone le variabili private e le assegna l'oggetto foo. Alla fine, si restituisce solo l'interfaccia che si desidera esporre come oggetto con l' return {}istruzione.

La funzione viene quindi eseguita alla fine con la ()quale viene valutato l'intero oggetto foo, tutte le variabili all'interno di un'istanza e l'oggetto di ritorno aggiunto come proprietà di foo().

Potresti farlo in questo modo

var a, b
var foo = {
    a: a = 5,
    b: b = 6,
    c: a + b
}

Questo metodo mi è stato utile quando ho dovuto fare riferimento all'oggetto su cui era stata inizialmente dichiarata una funzione. Di seguito è riportato un esempio minimo di come l'ho usato:

function createMyObject() {
    var count = 0, self
    return {
        a: self = {
            log: function() {
                console.log(count++)
                return self
            }
        }
    }
}

Definendo self come l'oggetto che contiene la funzione di stampa, si consente alla funzione di fare riferimento a quell'oggetto. Ciò significa che non sarà necessario "associare" la funzione di stampa a un oggetto se è necessario passarlo altrove.

Se invece lo utilizzassi thiscome illustrato di seguito

function createMyObject() {
    var count = 0
    return {
        a: {
            log: function() {
                console.log(count++)
                return this
            }
        }
    }
}

Quindi il seguente codice registrerà 0, 1, 2 e quindi darà un errore

var o = createMyObject()
var log = o.a.log
o.a.log().log() // this refers to the o.a object so the chaining works
log().log() // this refers to the window object so the chaining fails!

Utilizzando il metodo self si garantisce che print restituirà sempre lo stesso oggetto indipendentemente dal contesto in cui viene eseguita la funzione. Il codice sopra funzionerà bene e registrerà 0, 1, 2 e 3 quando si utilizza la versione di createMyObject().

Per il completamento, in ES6 abbiamo delle classi (supportate al momento della stesura di questo solo dai browser più recenti, ma disponibili in Babel, TypeScript e altri transpiler)

class Foo {
  constructor(){
    this.a = 5;
    this.b = 6;
    this.c = this.a + this.b;
  }  
}

const foo = new Foo();

Puoi farlo usando il modello del modulo. Proprio come:

var foo = function() {
  var that = {};

  that.a = 7;
  that.b = 6;

  that.c = function() {
    return that.a + that.b;
  }

  return that;
};
var fooObject = foo();
fooObject.c(); //13

Con questo modello è possibile creare un'istanza di più oggetti foo in base alle proprie esigenze.

http://jsfiddle.net/jPNxY/1/

Esistono diversi modi per ottenere questo risultato; questo è quello che vorrei usare:

function Obj() {
 this.a = 5;
 this.b = this.a + 1;
 // return this; // commented out because this happens automatically
}

var o = new Obj();
o.b; // === 6

solo per motivi di pensiero - posiziona le proprietà dell'oggetto fuori da una linea temporale:

var foo = {
    a: function(){return 5}(),
    b: function(){return 6}(),
    c: function(){return this.a + this.b}
}

console.log(foo.c())

ci sono anche risposte migliori sopra . Ecco come ho modificato il codice di esempio con cui ti sei interrogato.

AGGIORNARE:

var foo = {
    get a(){return 5},
    get b(){return 6},
    get c(){return this.a + this.b}
}
// console.log(foo.c);

Creare una nuova funzione sul tuo oggetto letteralmente e invocare un costruttore sembra un radicale allontanamento dal problema originale ed è superfluo.

Non è possibile fare riferimento a una proprietà di pari livello durante l'inizializzazione letterale dell'oggetto.

var x = { a: 1, b: 2, c: a + b } // not defined 
var y = { a: 1, b: 2, c: y.a + y.b } // not defined 

Segue la soluzione più semplice per le proprietà calcolate (nessun heap, nessuna funzione, nessun costruttore):

var x = { a: 1, b: 2 };

x.c = x.a + x.b; // apply computed property

Le altre risposte pubblicate qui sono migliori ma ecco un'alternativa che:

• Imposta il valore all'inizializzazione (non un getter, o derivato, ecc.)
• Non richiede alcun tipo di init() o codice al di fuori dell'oggetto letterale
• È un oggetto letterale e non una funzione di fabbrica o un altro meccanico di creazione di oggetti.
• Non dovrebbe avere alcun impatto sulle prestazioni (tranne all'inizializzazione)

Funzioni anonime autoeseguenti e archiviazione delle finestre

var foo = {
    bar:(function(){
        window.temp = "qwert";
        return window.temp;
    })(),
    baz: window.temp
};

L'ordine è garantito ( barprimabaz ).

windowNaturalmente inquina , ma non riesco a immaginare qualcuno che scriva una sceneggiatura che richiede window.tempdi essere persistente. Può esseretempMyApp se sei paranoico.

È anche brutto ma a volte utile. Un esempio è quando si utilizza un'API con condizioni di inizializzazione rigide e non si desidera effettuare il refactoring, pertanto l'ambito è corretto.

Ed è asciutto, ovviamente.

La chiave di tutto questo è SCOPE .

È necessario incapsulare "parent" (oggetto parent) della proprietà che si desidera definire come proprio oggetto istanziato, quindi è possibile fare riferimento a proprietà di pari livello usando la parola chiave this

È molto, molto importante ricordare che se ti riferisci thissenza prima farlo, allora thissi riferirà all'ambito esterno ... che sarà l' windowoggetto.

var x = 9   //this is really window.x
var bar = {
  x: 1,
  y: 2,
  foo: new function(){
    this.a = 5, //assign value
    this.b = 6,
    this.c = this.a + this.b;  // 11
  },
  z: this.x   // 9 (not 1 as you might expect, b/c *this* refers `window` object)
};

se il tuo oggetto è scritto come una funzione che restituisce un oggetto, E usi 'metodi' di attributo oggetto ES6, allora è possibile:

const module = (state) => ({
  a: 1,
  oneThing() {
    state.b = state.b + this.a
  },
  anotherThing() {
    this.oneThing();
    state.c = state.b + this.a
  },
});

const store = {b: 10};
const root = module(store);

root.oneThing();
console.log(store);

root.anotherThing();
console.log(store);

console.log(root, Object.keys(root), root.prototype);

Uso il seguente codice come alternativa e funziona. E anche la variabile può essere array. (@ Fausto R.)

var foo = {
  a: 5,
  b: 6,
  c: function() {
    return this.a + this.b;
  },

  d: [10,20,30],
  e: function(x) {
    this.d.push(x);
    return this.d;
  }
};
foo.c(); // 11
foo.e(40); // foo.d = [10,20,30,40]

Ecco un bel modo ES6:

var foo = (o => ({
    ...o,
    c: o.a + o.b
  }))({
    a: 5,
    b: 6
  });
  
console.log(foo);

Lo uso per fare qualcosa del genere:

const constants = Object.freeze(
  (_ => ({
    ..._,
    flag_data: {
      [_.a_flag]: 'foo',
      [_.b_flag]: 'bar',
      [_.c_flag]: 'oof'
    }
  }))({
    a_flag: 5,
    b_flag: 6,
    c_flag: 7,
  })
);

console.log(constants.flag_data[constants.b_flag]);

Che ne dici di questa soluzione funzionerà anche con oggetti nidificati con array

      Object.prototype.assignOwnProVal
     = function (to,from){ 
            function compose(obj,string){ 
                var parts = string.split('.'); 
                var newObj = obj[parts[0]]; 
                if(parts[1]){ 
                    parts.splice(0,1);
                    var newString = parts.join('.'); 
                    return compose(newObj,newString); 
                } 
                return newObj; 
            } 
            this[to] = compose(this,from);
     } 
     var obj = { name : 'Gaurav', temp : 
                  {id : [10,20], city:
                        {street:'Brunswick'}} } 
     obj.assignOwnProVal('street','temp.city.street'); 
     obj.assignOwnProVal('myid','temp.id.1');

Lanciare un'opzione poiché non ho visto questo scenario esatto coperto. Se non vuoi essere caggiornato quando ao baggiorna, allora un ES6 IIFE funziona bene.

var foo = ((a,b) => ({
    a,
    b,
    c: a + b
}))(a,b);

Per le mie esigenze, ho un oggetto relativo a un array che finirà per essere utilizzato in un ciclo, quindi voglio solo calcolare una configurazione comune una volta, quindi questo è quello che ho:

  let processingState = ((indexOfSelectedTier) => ({
      selectedTier,
      indexOfSelectedTier,
      hasUpperTierSelection: tiers.slice(0,indexOfSelectedTier)
                             .some(t => pendingSelectedFiltersState[t.name]),
  }))(tiers.indexOf(selectedTier));

Dato che devo impostare una proprietà per indexOfSelectedTiere devo usare quel valore quando imposto la hasUpperTierSelectionproprietà, calcolo prima quel valore e lo passo come parametro all'IIFE

Un altro approccio sarebbe quello di dichiarare l'oggetto prima di assegnare le proprietà al suo interno:

const foo = {};
foo.a = 5;
foo.b = 6;
foo.c = foo.a + foo.b;  // Does work
foo.getSum = () => foo.a + foo.b + foo.c;  // foo.getSum() === 22

Con ciò, è possibile utilizzare il nome della variabile oggetto per accedere ai valori già assegnati.
Ideale per config.jsfile.

var x = {
    a: (window.secreta = 5),
    b: (window.secretb = 6),
    c: window.secreta + window.secretb
};

Questo è quasi identico alla risposta di @ slicedtoad, ma non usa una funzione.

Nota: questa soluzione utilizza Typescript (è possibile utilizzare il JS vanilla che TS compila se necessario)

class asd {
    def = new class {
        ads= 'asd';
        qwe= this.ads + '123';
    };

    // this method is just to check/test this solution 
    check(){
        console.log(this.def.qwe);
    }
}

// these two lines are just to check
let instance = new asd();
instance.check();

Qui usavamo le espressioni di classe per ottenere l'interfaccia letterale dell'oggetto nidificato che avremmo voluto. Questa è la prossima cosa migliore per IMHO di poter fare riferimento alle proprietà di un oggetto durante la creazione.

La cosa principale da notare è che durante l'utilizzo di questa soluzione, hai esattamente la stessa interfaccia che avresti avuto da un oggetto letterale. E la sintassi è abbastanza vicina a un oggetto letterale stesso (rispetto all'utilizzo di una funzione, ecc.).

Confronta quanto segue

Soluzione che ho proposto

class asd {
    def = new class {
        ads= 'asd';
        qwe= this.ads + '123';
    };

Soluzione se i letterali oggetto fossero sufficienti

var asd = {
    def : {
        ads:'asd',
        qwe: this.ads + '123';, //ILLEGAL CODE; just to show ideal scenario
    }
}

Un altro esempio

Qui in questa classe, puoi combinare più percorsi relativi tra loro, il che non è possibile con un oggetto letterale.

class CONSTANT {
    static readonly PATH = new class {
        /** private visibility because these relative paths don't make sense for direct access, they're only useful to path class
         *
         */
        private readonly RELATIVE = new class {
            readonly AFTER_EFFECTS_TEMPLATE_BINARY_VERSION: fs.PathLike = '\\assets\\aep-template\\src\\video-template.aep';
            readonly AFTER_EFFECTS_TEMPLATE_XML_VERSION: fs.PathLike = '\\assets\\aep-template\\intermediates\\video-template.aepx';
            readonly RELATIVE_PATH_TO_AFTER_EFFECTS: fs.PathLike = '\\Adobe\\Adobe After Effects CC 2018\\Support Files\\AfterFX.exe';
            readonly OUTPUT_DIRECTORY_NAME: fs.PathLike = '\\output';
            readonly INPUT_DIRECTORY_NAME: fs.PathLike = '\\input';
            readonly ASSETS_DIRECTORY_NAME: fs.PathLike = '\\assets';
        };
    }
}

Se si desidera utilizzare JS nativo, le altre risposte forniscono buone soluzioni.

Ma se sei disposto a scrivere oggetti autoreferenziali come:

{ 
  a: ...,
  b: "${this.a + this.a}",
}

Ho scritto una libreria npm denominata oggetto autoreferenziato che supporta tale sintassi e restituisce un oggetto nativo.