Referensi-sendiri dalam literal objek / inisialisasi

Apakah ada cara untuk mendapatkan sesuatu seperti berikut ini berfungsi di JavaScript?

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

Dalam bentuk saat ini, kode ini jelas melempar kesalahan referensi karena thistidak merujuk foo. Tetapi apakah ada cara untuk memiliki nilai dalam properti literal objek tergantung pada properti lain yang dinyatakan sebelumnya?

Ya, satu-satunya hal yang bisa saya ceritakan adalah pengambil :

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

console.log(foo.c) // 11

Ini adalah ekstensi sintaksis yang diperkenalkan oleh Spesifikasi ECMAScript Edisi 5, sintaksinya didukung oleh sebagian besar browser modern (termasuk IE9).

Anda dapat melakukan sesuatu seperti:

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

Ini akan menjadi semacam inisialisasi satu kali objek.

Perhatikan bahwa Anda benar-benar menetapkan nilai kembali dari init()ke foo, karena itu Anda harus return this.

Jawaban yang jelas dan sederhana tidak ada, jadi untuk kelengkapan:

Tetapi apakah ada cara untuk memiliki nilai dalam properti literal objek tergantung pada properti lain yang dinyatakan sebelumnya?

Tidak. Semua solusi di sini menundanya sampai setelah objek dibuat (dengan berbagai cara) dan kemudian menetapkan properti ketiga. Cara paling sederhana adalah dengan melakukan ini:

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

Semua yang lain hanyalah cara tidak langsung untuk melakukan hal yang sama. (Felix's sangat pintar, tetapi membutuhkan membuat dan menghancurkan fungsi sementara, menambah kompleksitas; dan baik meninggalkan properti tambahan pada objek atau [jika Anda deleteproperti itu] berdampak pada kinerja akses properti selanjutnya pada objek itu.)

Jika Anda membutuhkan semuanya dalam satu ekspresi, Anda dapat melakukannya tanpa properti sementara:

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

Atau tentu saja, jika Anda perlu melakukan ini lebih dari sekali:

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

maka di mana Anda perlu menggunakannya:

var foo = buildFoo(5, 6);

Cukup instantiate fungsi anonim:

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

Sekarang di ES6 Anda dapat membuat properti cache malas. Pada penggunaan pertama properti mengevaluasi sekali untuk menjadi properti statis normal. Hasil: Kedua kalinya overhead fungsi matematika dilewati.

Keajaiban ada di pengambil.

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

Pada pengambil panah thismengambil lingkup leksikal sekitarnya .

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

Beberapa penutupan harus berurusan dengan ini;

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

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

Semua variabel yang dideklarasikan di dalamnya fooadalah milik pribadi foo, seperti yang Anda harapkan dengan deklarasi fungsi apa pun dan karena semuanya ada dalam ruang lingkup, semuanya memiliki akses satu sama lain tanpa perlu merujuk kethis , sama seperti yang Anda harapkan dengan suatu fungsi. Perbedaannya adalah bahwa fungsi ini mengembalikan objek yang memperlihatkan variabel pribadi dan menetapkan objek itu foo. Pada akhirnya, Anda mengembalikan hanya antarmuka yang ingin Anda tampilkan sebagai objek dengan return {}pernyataan.

Fungsi ini kemudian dieksekusi di akhir dengan ()yang menyebabkan seluruh objek foo dievaluasi, semua variabel dalam instantiated dan objek kembali ditambahkan sebagai properti foo().

Anda bisa melakukannya seperti ini

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

Metode itu telah terbukti bermanfaat bagi saya ketika saya harus merujuk ke objek yang awalnya dideklarasikan fungsi. Berikut ini adalah contoh minimal bagaimana saya menggunakannya:

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

Dengan mendefinisikan diri sebagai objek yang berisi fungsi cetak Anda mengizinkan fungsi untuk merujuk ke objek itu. Ini berarti Anda tidak perlu 'mengikat' fungsi cetak ke objek jika Anda harus meneruskannya di tempat lain.

Jika Anda mau, gunakan thisseperti yang diilustrasikan di bawah ini

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

Kemudian kode berikut akan mencatat 0, 1, 2 dan kemudian memberikan kesalahan

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!

Dengan menggunakan metode mandiri Anda menjamin bahwa pencetakan akan selalu mengembalikan objek yang sama terlepas dari konteks di mana fungsi dijalankan. Kode di atas akan berjalan dengan baik dan log 0, 1, 2 dan 3 saat menggunakan versi self createMyObject().

Untuk penyelesaiannya, di ES6 kami memiliki kelas (didukung pada saat penulisan ini hanya oleh browser terbaru, tetapi tersedia dalam Babel, TypeScript dan transpiler lainnya)

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

const foo = new Foo();

Anda dapat melakukannya menggunakan pola modul. Seperti:

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

Dengan pola ini Anda dapat instantiate beberapa objek foo sesuai dengan kebutuhan Anda.

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

Ada beberapa cara untuk mencapai ini; inilah yang akan saya gunakan:

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

hanya demi pemikiran - letakkan properti objek di luar garis waktu:

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

console.log(foo.c())

ada jawaban yang lebih baik di atas juga . Ini adalah bagaimana saya mengubah kode contoh yang Anda tanyakan.

MEMPERBARUI:

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

Menciptakan fungsi baru pada objek Anda secara literal dan menggunakan konstruktor tampaknya merupakan perubahan radikal dari masalah awal, dan itu tidak perlu.

Anda tidak bisa merujuk properti saudara selama inisialisasi objek literal.

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

Solusi paling sederhana untuk properti yang dihitung mengikuti (tanpa tumpukan, tanpa fungsi, tanpa konstruktor):

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

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

Jawaban lain yang diposting di sini lebih baik tetapi inilah alternatifnya:

• Menetapkan nilai saat inisialisasi (bukan pengambil, atau diturunkan, dll)
• Tidak memerlukan jenis init()atau kode apa pun di luar objek literal
• Merupakan objek literal dan bukan fungsi pabrik atau mekanik pembuatan objek lainnya.
• Seharusnya tidak memiliki dampak kinerja (kecuali pada inisialisasi)

Fungsi anonim yang dijalankan sendiri dan penyimpanan jendela

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

Pesanan dijamin ( barsebelum baz).

Tentu windowsaja itu mencemari , tetapi saya tidak bisa membayangkan seseorang menulis naskah yang window.tempharus gigih. Mungkin tempMyAppjika Anda paranoid.

Ini juga jelek tapi kadang berguna. Contohnya adalah ketika Anda menggunakan API dengan kondisi inisialisasi yang kaku dan tidak merasa ingin refactoring sehingga pelingkupannya benar.

Dan itu kering, tentu saja.

Kunci dari semua ini adalah RUANG LINGKUP .

Anda perlu merangkum "parent" (objek induk) dari properti yang ingin Anda tetapkan sebagai objek instantiated sendiri, dan kemudian Anda bisa membuat referensi ke properti saudara menggunakan kata kunci this

Sangat, sangat penting untuk diingat bahwa jika Anda merujuk thistanpa terlebih dahulu melakukannya, maka thisakan merujuk pada lingkup luar ... yang akan menjadi windowobjek.

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

jika objek Anda ditulis sebagai fungsi yang mengembalikan objek, DAN Anda menggunakan ES6 objek-atribut 'metode', maka itu mungkin:

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

Saya menggunakan kode berikut sebagai alternatif, dan berfungsi. Dan variabel dapat berupa array juga. (@ 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]

Inilah cara ES6 yang rapi:

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

Saya menggunakannya untuk melakukan sesuatu seperti ini:

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

Bagaimana dengan solusi ini ini akan bekerja dengan objek bersarang dengan array juga

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

Melempar opsi karena saya tidak melihat skenario persis ini tertutup. Jika Anda tidak ingin cmemperbarui kapan aatau bmemperbarui, maka ES6 IIFE berfungsi dengan baik.

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

Untuk kebutuhan saya, saya memiliki objek yang berhubungan dengan array yang akhirnya akan digunakan dalam satu lingkaran, jadi saya hanya ingin menghitung beberapa pengaturan umum sekali, jadi inilah yang saya miliki:

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

Karena saya perlu mengatur properti untuk indexOfSelectedTierdan saya perlu menggunakan nilai itu ketika mengatur hasUpperTierSelectionproperti, saya menghitung nilai itu terlebih dahulu dan meneruskannya sebagai param ke IIFE

Pendekatan lain adalah dengan mendeklarasikan objek terlebih dahulu sebelum menetapkan properti ke dalamnya:

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

Dengan itu, Anda bisa menggunakan nama variabel objek untuk mengakses nilai yang sudah ditetapkan.
Terbaik untuk config.jsfile.

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

Ini hampir identik dengan jawaban @ slicedtoad, tetapi tidak menggunakan fungsi.

Catatan: Solusi ini menggunakan Typescript (Anda dapat menggunakan vanilla JS yang dikompilasi oleh TS jika diperlukan)

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

Di sini kami menggunakan ekspresi kelas untuk mendapatkan antarmuka literal objek bersarang yang kami inginkan. Ini adalah hal terbaik IMHO berikutnya untuk dapat mereferensikan properti suatu objek selama pembuatan.

Hal utama yang perlu diperhatikan adalah saat menggunakan solusi ini, Anda memiliki antarmuka yang sama persis seperti yang Anda miliki dari objek literal. Dan sintaksnya cukup dekat dengan objek literal itu sendiri (vs menggunakan fungsi, dll).

Bandingkan yang berikut ini

Solusi yang saya usulkan

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

Solusi jika objek literal sudah mencukupi

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

Contoh lain

Di sini di kelas ini, Anda dapat menggabungkan beberapa jalur relatif di antara mereka sendiri, yang tidak mungkin dengan objek 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';
        };
    }
}

Jika Anda ingin menggunakan JS asli, jawaban lain memberikan solusi yang baik.

Tetapi jika Anda bersedia menulis objek referensi diri seperti:

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

Saya menulis perpustakaan npm bernama self-referenced-object yang mendukung sintaks itu dan mengembalikan objek asli.