Самопосилання в об'єктних літералах / ініціалізаторах

Чи є якийсь спосіб, щоб щось на зразок наступного працювало в JavaScript?

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

У поточній формі цей код очевидно thisвидає помилку посилання, оскільки не посилається foo. Але чи є спосіб, щоб значення властивостей об'єкта літералу залежали від інших оголошених раніше властивостей?

Ну, єдине, про що я можу вам сказати, - це гетьер :

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

console.log(foo.c) // 11

Це синтаксичне розширення, запроваджене специфікацією 5-го видання ECMAScript, синтаксис підтримується більшістю сучасних браузерів (включаючи IE9).

Ви можете зробити щось на кшталт:

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

Це була б якась одноразова ініціалізація об'єкта.

Зверніть увагу , що ви на самому справі привласнення значення, що повертається init()до foo, тому ви повинні return this.

Очевидна, проста відповідь відсутня, тому для повноти:

Але чи є спосіб, щоб значення властивостей об'єкта літералу залежали від інших оголошених раніше властивостей?

Ні. Усі рішення тут відкладають його до тих пір, поки об'єкт не буде створений (різними способами), а потім призначить третє властивість. Найпростіший спосіб це просто зробити це:

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

Усі інші - це просто більш непрямі способи зробити те саме. (Фелікс особливо розумний, але вимагає створення та знищення тимчасової функції, додаючи складності; або залишає додаткову властивість на об'єкті, або [якщо ви є deleteцією властивістю] впливає на виконання наступних доступів до власності на цьому об'єкті.)

Якщо вам потрібно, щоб усі були в одному виразі, ви можете зробити це без тимчасового властивості:

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

Або звичайно, якщо вам потрібно зробити це не один раз:

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

то де вам це потрібно використовувати:

var foo = buildFoo(5, 6);

Просто створити анонімну функцію:

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

Тепер у ES6 ви можете створювати ліниві кешовані властивості. При першому використанні властивість оцінюється один раз, щоб стати нормальною статичною властивістю. Результат: Вдруге пропускається математична функція накладних витрат.

Магія в геттері.

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

У стрілку геттер thisнабирає навколишнє лексичне поле .

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

Деяке закриття має вирішити це;

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

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

Усі змінні, задекларовані всередині, fooє приватними foo, як і можна було б очікувати при будь-якому оголошенні функції, і тому що вони всі в області дії, всі вони мають доступ один до одного, не вимагаючи посилань this, так, як ви очікували з функцією. Різниця полягає в тому, що ця функція повертає об'єкт, який відкриває приватні змінні та призначає цьому об'єкту foo. Зрештою, ви повертаєте просто інтерфейс, який хочете викрити як об’єкт із return {}заявою.

Потім функція виконується в кінці, завдяки ()чому оцінюється весь об'єкт foo, всі змінні в межах інстанції та повертається об'єкт додається як властивості foo().

Ви могли це зробити так

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

Цей метод виявився корисним для мене, коли мені довелося посилатися на об'єкт, на якому спочатку було оголошено функцію. Нижче наведено мінімальний приклад того, як я ним користувався:

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

Визначаючи self як об'єкт, що містить функцію print, ви дозволяєте функції посилатися на цей об’єкт. Це означає, що вам не доведеться «прив’язувати» функцію друку до об’єкта, якщо вам потрібно передати його десь в іншому місці.

Якщо ви замість цього використовуєте, thisяк показано нижче

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

Тоді наступний код увійде до 0, 1, 2 і потім видасть помилку

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!

Використовуючи метод self, ви гарантуєте, що друк завжди поверне той самий об'єкт незалежно від контексту, в якому виконується функція. Код, наведений вище, буде виконуватись добре і входитиме 0, 1, 2 і 3 при використанні самовиробничої версії createMyObject().

Для завершення в ES6 у нас є класи (підтримуються на момент написання цього лише останніми браузерами, але доступні в Babel, TypeScript та інших транспіляторах)

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

const foo = new Foo();

Ви можете зробити це за допомогою шаблону модуля. Так як:

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

За допомогою цього шаблону ви можете створити кілька об'єктів foo відповідно до ваших потреб.

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

Є кілька способів досягти цього; ось що я б використав:

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

просто заради думки - розміщуйте властивості об’єкта поза часовою шкалою:

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

console.log(foo.c())

вище є і відповіді . Ось як я змінив приклад коду, з яким ви допитали.

ОНОВЛЕННЯ:

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

Створення нової функції на об'єкті буквально та виклик конструктора здається радикальним відходом від початкової проблеми, і це непотрібно.

Ви не можете посилатись на властивість братів під час буквеної ініціалізації об'єкта.

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

Наступне найпростіше рішення для обчислених властивостей (немає купи, ніяких функцій, немає конструктора):

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

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

Інші відповіді, розміщені тут, краще, але ось альтернатива:

• Встановлює значення при ініціалізації (не отримувач, ні похідне тощо)
• Не вимагає будь-якого типу init()або коду поза літеральним об'єктом
• Це об'єкт буквально, а не фабрична функція чи інший механізм створення об'єктів.
• Не повинно впливати на продуктивність (крім випадків ініціалізації)

Самостійне виконання анонімних функцій та зберігання вікон

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

Замовлення гарантоване ( barраніше baz).

Це, windowзвичайно, забруднює , але я не можу уявити, щоб хтось писав сценарій, який window.tempповинен бути наполегливим. Можливо, tempMyAppякщо ти параноїк.

Це також некрасиво, але іноді корисно. Наприклад, коли ви використовуєте API з жорсткими умовами ініціалізації і не відчуваєте, як рефакторинг, тому масштабування правильне.

І сухо, звичайно.

Ключ до всього цього - ОБЛАСТЬ .

Вам потрібно інкапсулювати "батьківський" (батьківський об'єкт) властивості, який ви хочете визначити як його власний об'єкт, що створюється, а потім ви можете зробити посилання на властивості братів, використовуючи ключове слово this

Дуже дуже важливо пам’ятати, що якщо ви посилаєтесь на це, thisперш ніж це робити, тоді thisбуде посилатися на зовнішню сферу ... яка буде windowоб'єктом.

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

якщо ваш об’єкт записаний як функція, яка повертає об'єкт, і ви використовуєте ES6 object-attribute 'method', то це можливо:

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

Я використовую наступний код як альтернативу, і він працює. І змінна може бути також масивом. (@ Фаусто Р.)

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]

Ось акуратний спосіб ES6:

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

Я використовую це, щоб зробити щось подібне:

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

Як щодо цього рішення це також буде працювати з вкладеними об'єктами з масивом

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

Накидання опції, оскільки я не бачив цього точного сценарію. Якщо ви не хочете cоновлюватись під час aабо bоновлення, ES6 IIFE працює добре.

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

Для моїх потреб у мене є об'єкт, який відноситься до масиву, який в кінцевому підсумку буде використаний у циклі, тому я хочу лише один раз обчислити деяку загальну настройку, так що це:

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

Оскільки мені потрібно встановити властивість indexOfSelectedTierі мені потрібно використовувати це значення при встановленні hasUpperTierSelectionвластивості, я спочатку обчислюю це значення і передаю його як параметр IIFE

Іншим підходом було б спочатку оголосити об'єкт перед призначенням властивостей йому:

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

З цим ви можете використовувати ім'я змінної об'єкта для доступу до вже призначених значень.
Найкраще для config.jsфайлу.

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

Це майже ідентично відповіді @ slicedtoad, але не використовує функції.

Примітка. Це рішення використовує Typescript (ви можете використовувати ванільний JS, до якого 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();

Тут використовували вирази класу, щоб отримати вкладений інтерфейс буквального інтерфейсу, який ми хотіли б. Це наступне найкраще, що IMHO може мати посилання на властивості об'єкта під час створення.

Головне, що слід зазначити, під час використання цього рішення ви маєте такий самий інтерфейс, який ви мали б з об’єкта-літералу. А синтаксис досить близький до самого буквеного об’єкта (проти використання функції тощо).

Порівняйте наступне

Я запропонував рішення

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

Рішення, якби об'єктні літерали були б достатніми

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

Ще один приклад

Тут у цьому класі ви можете поєднати кілька відносних шляхів між собою, що неможливо з об'єктом буквально.

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

Якщо ви хочете використовувати рідний JS, інші відповіді пропонують хороші рішення.

Але якщо ви готові писати об'єкти, що самі посилаються на зразок:

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

Я написав бібліотеку npm під назвою " self-referenced-object", яка підтримує цей синтаксис і повертає нативний об'єкт.