Auto-referências em literais / inicializadores de objetos

Existe alguma maneira de obter algo como o seguinte para trabalhar em JavaScript?

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

No formulário atual, esse código obviamente gera um erro de referência, pois thisnão se refere a foo. Mas é Existe alguma maneira de ter valores nas propriedades de um objeto de literais dependem de outras propriedades declarado anteriormente?

Bem, a única coisa que posso lhe dizer é getter :

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

console.log(foo.c) // 11

Essa é uma extensão sintática introduzida pela especificação do ECMAScript 5th Edition. A sintaxe é suportada pela maioria dos navegadores modernos (incluindo o IE9).

Você poderia fazer algo como:

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

Isso seria algum tipo de inicialização única do objeto.

Observe que você está realmente atribuindo o valor de retorno de init()para foo, portanto, você precisa return this.

A resposta óbvia e simples está faltando, portanto, para ser completo:

Mas é Existe alguma maneira de ter valores nas propriedades de um objeto de literais dependem de outras propriedades declarado anteriormente?

Não. Todas as soluções aqui adiam para depois que o objeto é criado (de várias maneiras) e depois atribuem a terceira propriedade. A maneira mais simples é fazer isso:

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

Todos os outros são apenas maneiras mais indiretas de fazer a mesma coisa. (O Felix's é particularmente inteligente, mas requer a criação e destruição de uma função temporária, adicionando complexidade; e deixa uma propriedade extra no objeto ou [se você tiver deleteessa propriedade] afeta o desempenho dos acessos subsequentes à propriedade nesse objeto.)

Se você precisar que tudo esteja dentro de uma expressão, poderá fazer isso sem a propriedade temporária:

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

Ou, é claro, se você precisar fazer isso mais de uma vez:

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

então onde você precisa usá-lo:

var foo = buildFoo(5, 6);

Instancie simplesmente uma função anônima:

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

Agora no ES6, você pode criar propriedades em cache lento. No primeiro uso, a propriedade avalia uma vez para se tornar uma propriedade estática normal. Resultado: na segunda vez que a sobrecarga da função matemática é ignorada.

A mágica está no caos.

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

Na seta, o captador thispega o escopo lexical circundante .

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

Algum fechamento deve lidar com isso;

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

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

Todas as variáveis ​​declaradas em foosão privadas foo, como seria de esperar em qualquer declaração de função e, como todas elas estão no escopo, todas elas têm acesso uma à outra sem precisar se referir this, da mesma forma que você esperaria com uma função. A diferença é que essa função retorna um objeto que expõe as variáveis ​​privadas e atribui esse objeto foo. No final, você retorna apenas a interface que deseja expor como um objeto com a return {}instrução

A função é então executada no final com a ()qual faz com que todo o objeto foo seja avaliado, todas as variáveis ​​em instanciadas e o objeto de retorno adicionados como propriedades de foo().

Você poderia fazer assim

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

Esse método se mostrou útil quando tive que me referir ao objeto em que uma função foi originalmente declarada. A seguir, é apresentado um exemplo mínimo de como eu o usei:

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

Ao definir self como o objeto que contém a função de impressão, você permite que a função se refira a esse objeto. Isso significa que você não precisará 'vincular' a função de impressão a um objeto se precisar passá-la para outro lugar.

Se preferir, use thiscomo ilustrado abaixo

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

Em seguida, o código a seguir registrará 0, 1, 2 e, em seguida, dará um erro

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!

Ao usar o método self, você garante que a impressão sempre retornará o mesmo objeto, independentemente do contexto em que a função é executada. O código acima funcionará perfeitamente e registrará 0, 1, 2 e 3 ao usar a versão própria do createMyObject().

Para concluir, no ES6, temos aulas (suportadas no momento em que escrevemos isso apenas pelos navegadores mais recentes, mas disponíveis no Babel, TypeScript e outros transpilers)

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

const foo = new Foo();

Você pode fazer isso usando o padrão do módulo. Assim como:

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

Com esse padrão, você pode instanciar vários objetos foo de acordo com sua necessidade.

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

Existem várias maneiras de conseguir isso; isto é o que eu usaria:

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

apenas por uma questão de pensamento - coloque as propriedades do objeto fora de uma linha do tempo:

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

console.log(foo.c())

também existem respostas melhores acima . Foi assim que modifiquei o código de exemplo que você questionou.

ATUALIZAR:

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

Criar nova função no literal do seu objeto e chamar um construtor parece um desvio radical do problema original e é desnecessário.

Você não pode fazer referência a uma propriedade irmão durante a inicialização literal do objeto.

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

A solução mais simples para propriedades calculadas é a seguir (sem heap, sem funções, sem construtor):

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

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

As outras respostas postadas aqui são melhores, mas aqui está uma alternativa que:

• Define o valor na inicialização (não é um getter, ou derivado, etc.)
• Não requer nenhum tipo init()ou código fora do literal do objeto
• É um objeto literal e não uma função de fábrica ou outro mecanismo de criação de objetos.
• Não deve ter nenhum impacto no desempenho (exceto na inicialização)

Funções anônimas auto-executáveis ​​e armazenamento de janela

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

O pedido é garantido ( barantes baz).

Polui window, é claro, mas não consigo imaginar alguém escrevendo um script que exija window.temppersistência. Talvez tempMyAppse você é paranóico.

Também é feio, mas ocasionalmente útil. Um exemplo é quando você está usando uma API com condições rígidas de inicialização e não deseja refatorar, para que o escopo esteja correto.

E está seco, é claro.

A chave para tudo isso é o escopo .

Você precisa encapsular o "pai" (objeto pai) da propriedade que deseja definir como seu próprio objeto instanciado e, em seguida, pode fazer referências às propriedades dos irmãos usando a palavra-chave this

É muito, muito importante lembrar que, se você se referir thissem fazê-lo primeiro, thisse referirá ao escopo externo ... que será o windowobjeto.

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 seu objeto é escrito como uma função que retorna um objeto E você usa os métodos de atributo de objeto do ES6, é possível:

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

Eu uso o seguinte código como alternativa e funciona. E a variável também pode ser matriz. (@ 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]

Aqui está uma maneira elegante do ES6:

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

Eu o uso para fazer algo assim:

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

Que tal essa solução também funcionará com objetos aninhados com matriz

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

Jogando em uma opção desde que eu não vi esse cenário exato coberto. Se você não deseja catualizar quando aou batualizar, um ES6 IIFE funciona bem.

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

Para minhas necessidades, eu tenho um objeto que se relaciona com uma matriz que acabará sendo usada em um loop, então eu só quero calcular algumas configurações comuns uma vez, então é isso que eu tenho:

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

Como eu preciso definir uma propriedade para indexOfSelectedTiere preciso usar esse valor ao definir a hasUpperTierSelectionpropriedade, eu calculo esse valor primeiro e o passo como parâmetro para o IIFE

Outra abordagem seria declarar o objeto primeiro antes de atribuir propriedades a ele:

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

Com isso, você pode usar o nome da variável do objeto para acessar os valores já atribuídos.
Melhor para config.jsarquivo.

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

Isso é quase idêntico à resposta do @ slicedtoad, mas não usa uma função.

Nota: Esta solução usa o Typecript (você pode usar o vanilla JS que o TS compila, se necessário)

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

Aqui estavam usando expressões de classe para obter a interface literal do objeto aninhado que desejaríamos. Esta é a próxima melhor coisa que o IMHO pode fazer para referenciar as propriedades de um objeto durante a criação.

O principal a notar é que, ao usar esta solução, você tem exatamente a mesma interface que teria de um literal de objeto. E a sintaxe está bem próxima do literal de um objeto (vs usando uma função, etc).

Compare o seguinte

Solução que propus

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

Solução se os literais do objeto fossem suficientes

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

Outro exemplo

Aqui nesta classe, você pode combinar vários caminhos relativos entre si, o que não é possível com um objeto literal.

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 você deseja usar JS nativo, as outras respostas fornecem boas soluções.

Mas se você estiver disposto a escrever objetos de referência própria como:

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

Eu escrevi uma biblioteca npm chamada objeto auto-referenciado que suporta essa sintaxe e retorna um objeto nativo.