Odnośniki do siebie w literałach obiektowych / inicjalizatorach

Czy jest jakiś sposób, aby uzyskać coś takiego do pracy w JavaScript?

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

W obecnej formie ten kod generuje błąd referencyjny, ponieważ thisnie odnosi się do foo. Ale czy jest jakiś sposób, aby wartości we właściwościach literału obiektu zależały od innych właściwości zadeklarowanych wcześniej?

Cóż, jedyne, o czym mogę ci powiedzieć, to getter :

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

console.log(foo.c) // 11

Jest to rozszerzenie składniowe wprowadzone przez specyfikację ECMAScript 5. edycji, składnia jest obsługiwana przez większość współczesnych przeglądarek (w tym IE9).

Możesz zrobić coś takiego:

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

Byłaby to pewnego rodzaju jednorazowa inicjalizacja obiektu.

Zauważ, że faktycznie przypisujesz wartość zwracaną init()do foo, dlatego musisz return this.

Brakuje oczywistej, prostej odpowiedzi, więc dla kompletności:

Ale czy jest jakiś sposób, aby wartości we właściwościach literału obiektu zależały od innych właściwości zadeklarowanych wcześniej?

Nie. Wszystkie rozwiązania tutaj odraczają go do momentu utworzenia obiektu (na różne sposoby), a następnie przypisują trzecią właściwość. Najprostszym sposobem jest po prostu to zrobić:

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

Wszystkie inne są po prostu bardziej pośrednimi sposobami na zrobienie tego samego. (Felix's jest szczególnie sprytny, ale wymaga utworzenia i zniszczenia funkcji tymczasowej, zwiększenia złożoności; albo pozostawia dodatkową właściwość na obiekcie, albo [jeśli deleteta właściwość] wpływa na wydajność dostępu do kolejnych właściwości na tym obiekcie).

Jeśli potrzebujesz, aby wszystkie znajdowały się w jednym wyrażeniu, możesz to zrobić bez właściwości tymczasowej:

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

Lub oczywiście, jeśli musisz to zrobić więcej niż raz:

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

następnie, gdzie musisz go użyć:

var foo = buildFoo(5, 6);

Po prostu utwórz instancję anonimowej funkcji:

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

Teraz w ES6 możesz tworzyć leniwe właściwości buforowane. Przy pierwszym użyciu właściwość ocenia raz, aby stać się normalną właściwością statyczną. Wynik: za drugim razem pomijany jest narzut funkcji matematycznych.

Magia jest w getterze.

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

W pobocznym strzale thispobiera otaczający zakres leksykalny .

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

Niektóre zamknięcie powinno sobie z tym poradzić;

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

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

Wszystkie zmienne zadeklarowane wewnątrz foosą prywatne foo, jak można się spodziewać w przypadku każdej deklaracji funkcji, a ponieważ wszystkie są w zakresie, wszystkie mają dostęp do siebie bez potrzeby odwoływania się this, tak jak można by się spodziewać po funkcji. Różnica polega na tym, że ta funkcja zwraca obiekt, który ujawnia zmienne prywatne i przypisuje ten obiekt do foo. Na koniec zwracasz tylko interfejs, który chcesz udostępnić jako obiekt z return {}instrukcją.

Funkcja jest następnie wykonywana na końcu, ()co powoduje, że cały obiekt foo jest oceniany, wszystkie zmienne w instancji i zwracany obiekt są dodawane jako właściwości foo().

Możesz to zrobić w ten sposób

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

Ta metoda okazała się przydatna, gdy musiałem odwoływać się do obiektu, na którym pierwotnie zadeklarowano funkcję. Poniżej znajduje się minimalny przykład tego, jak go użyłem:

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

Definiując self jako obiekt zawierający funkcję drukowania, pozwalasz funkcji odwoływać się do tego obiektu. Oznacza to, że nie musisz „wiązać” funkcji drukowania z obiektem, jeśli musisz przekazać go gdzie indziej.

Jeśli wolisz, użyj tego, thisjak pokazano poniżej

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

Następnie poniższy kod zarejestruje 0, 1, 2, a następnie wyświetli błąd

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!

Korzystając z metody self, gwarantujesz, że druk zawsze zwróci ten sam obiekt, niezależnie od kontekstu, w którym funkcja jest uruchomiona. Powyższy kod będzie działał dobrze i logował się 0, 1, 2 i 3, gdy używasz własnej wersji createMyObject().

Na zakończenie w ES6 mamy klasy (obsługiwane w momencie pisania tego tylko w najnowszych przeglądarkach, ale dostępne w Babel, TypeScript i innych transpilerach)

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

const foo = new Foo();

Możesz to zrobić przy użyciu wzorca modułu. Tak jak:

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

Za pomocą tego wzorca można utworzyć kilka obiektów Foo zgodnie z potrzebami.

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

Istnieje kilka sposobów na osiągnięcie tego; właśnie tego użyłbym:

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

tylko ze względu na przemyślenie - umieść właściwości obiektu poza osią czasu:

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

console.log(foo.c())

są też lepsze odpowiedzi powyżej . W ten sposób zmodyfikowałem przykładowy kod, który przesłuchałeś.

AKTUALIZACJA:

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

Tworzenie nowej funkcji dosłownie na obiekcie i wywoływanie konstruktora wydaje się radykalnym odejściem od pierwotnego problemu i jest niepotrzebne.

Nie można odwoływać się do właściwości rodzeństwa podczas inicjalizacji dosłowności obiektu.

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

Oto najprostsze rozwiązanie dla obliczonych właściwości (bez stosu, bez funkcji, bez konstruktora):

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

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

Inne zamieszczone tutaj odpowiedzi są lepsze, ale oto alternatywa:

• Ustawia wartość przy inicjalizacji (nie pobiera, nie wyprowadza itp.)
• Nie wymaga żadnego typu init()ani kodu poza literałem obiektu
• To dosłowny obiekt, a nie funkcja fabryczna lub inna mechanika tworzenia obiektów.
• Nie powinien mieć żadnego wpływu na wydajność (oprócz inicjalizacji)

Samoczynne anonimowe funkcje i pamięć okien

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

Zamówienie jest gwarantowane ( barwcześniej baz).

To windowoczywiście zanieczyszcza , ale nie wyobrażam sobie, żeby ktoś pisał scenariusz wymagający window.tempwytrwałości. Może tempMyAppjeśli jesteś paranoikiem.

Jest to również brzydkie, ale czasami przydatne. Przykładem jest użycie interfejsu API ze sztywnymi warunkami inicjalizacji i nie masz ochoty na refaktoryzację, więc zakres jest poprawny.

I oczywiście jest sucho.

Kluczem do tego wszystkiego jest ZAKRES .

Musisz obudować „obiekt nadrzędny” (obiekt nadrzędny) właściwości, którą chcesz zdefiniować jako własny obiekt instancji, a następnie możesz odwoływać się do właściwości rodzeństwa za pomocą słowa kluczowego this

Bardzo, bardzo ważne jest, aby pamiętać, że jeśli odwołujesz się do tego thisbez uprzedniego, to thisodniesiesz się do zewnętrznego zakresu ... który będzie windowobiektem.

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

jeśli twój obiekt jest zapisany jako funkcja, która zwraca obiekt, ORAZ używasz „metod” atrybut-obiektu ES6, możliwe jest:

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

Używam następującego kodu jako alternatywy i działa. Zmienna może być również tablicą. (@ 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]

Oto schludny sposób ES6:

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

Używam go do robienia czegoś takiego:

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

Co powiesz na to rozwiązanie, które będzie działać również z zagnieżdżonymi obiektami z tablicą

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

Wrzucam opcję, ponieważ nie widziałem dokładnie tego scenariusza. Jeśli nie chcesz caktualizować aani baktualizować, ES6 IIFE działa dobrze.

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

Na moje potrzeby mam obiekt, który odnosi się do tablicy, która ostatecznie zostanie użyta w pętli, więc chcę tylko raz obliczyć niektóre typowe ustawienia, więc mam to:

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

Ponieważ muszę ustawić właściwość indexOfSelectedTieri muszę użyć tej wartości podczas ustawiania hasUpperTierSelectionwłaściwości, najpierw obliczam tę wartość i przekazuję ją jako parametr do IIFE

Innym podejściem byłoby zadeklarowanie obiektu przed przypisaniem do niego właściwości:

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

Dzięki temu możesz użyć nazwy zmiennej obiektowej, aby uzyskać dostęp do już przypisanych wartości.
Najlepsze do config.jspliku.

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

Jest to prawie identyczne z odpowiedzią @ slicedtoad, ale nie używa funkcji.

Uwaga: w tym rozwiązaniu jest używany Typescript (w razie potrzeby można użyć waniliowego JS, do którego kompiluje TS)

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

Tutaj używaliśmy wyrażeń klas, aby uzyskać interfejs dosłowny zagnieżdżony obiekt, który chcielibyśmy. Jest to kolejna najlepsza rzecz IMHO, aby móc odwoływać się do właściwości obiektu podczas tworzenia.

Najważniejszą rzeczą do odnotowania jest to, że podczas korzystania z tego rozwiązania masz dokładnie taki sam interfejs, jak w przypadku literału obiektu. A składnia jest bardzo zbliżona do samego dosłowności obiektu (vs przy użyciu funkcji itp.).

Porównaj następujące

Rozwiązanie, które zaproponowałem

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

Rozwiązanie, jeśli dosłowne byłyby literały obiektowe

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

Inny przykład

Tutaj, w tej klasie, możesz łączyć ze sobą wiele ścieżek względnych, co nie jest możliwe w przypadku literału obiektu.

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

Jeśli chcesz korzystać z natywnego JS, inne odpowiedzi dostarczają dobrych rozwiązań.

Ale jeśli chcesz pisać obiekty z odnośnikami, takie jak:

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

Napisałem bibliotekę npm o nazwie self-referenced-object, która obsługuje tę składnię i zwraca obiekt macierzysty.