JavaScript: Bagaimana cara melewatkan objek dengan nilai?

• Saat mengirimkan objek sebagai parameter, JavaScript meneruskannya dengan referensi dan mempersulit pembuatan salinan lokal objek.

  var o = {};
  (function(x){
      var obj = x;
      obj.foo = 'foo';
      obj.bar = 'bar';
  })(o)
  

  oakan memiliki .foodan .bar.

• Ini mungkin untuk menyiasatinya dengan kloning; contoh sederhana:

  var o = {};
  
  function Clone(x) {
     for(p in x)
     this[p] = (typeof(x[p]) == 'object')? new Clone(x[p]) : x[p];
  }
  
  (function(x){
      var obj = new Clone(x);
      obj.foo = 'foo';
      obj.bar = 'bar';
  })(o)

  otidak akan memiliki .fooatau .bar.

Pertanyaan

1. Apakah ada cara yang lebih baik untuk melewatkan objek berdasarkan nilai, selain membuat salinan / klon lokal?

Tidak juga.

Bergantung pada apa yang sebenarnya Anda butuhkan, satu kemungkinan mungkin ditetapkan osebagai prototipe objek baru.

var o = {};
(function(x){
    var obj = Object.create( x );
    obj.foo = 'foo';
    obj.bar = 'bar';
})(o);

alert( o.foo ); // undefined

Jadi properti apa pun yang Anda tambahkan objtidak akan ditambahkan o. Setiap properti yang ditambahkan ke objdengan nama properti yang sama dengan properti di oakan membayangi oproperti.

Tentu saja, setiap properti yang ditambahkan ke oakan tersedia objjika tidak dibayangi, dan semua objek yang ada odi rantai prototipe akan melihat pembaruan yang sama untuk o.

Selain itu, jika objmemiliki properti yang mereferensikan objek lain, seperti Array, Anda harus memastikan untuk membayangi objek tersebut sebelum menambahkan anggota ke objek, jika tidak, anggota tersebut akan ditambahkan obj, dan akan dibagikan di antara semua objek yang miliki objdalam rantai prototipe.

var o = {
    baz: []
};
(function(x){
    var obj = Object.create( x );

    obj.baz.push( 'new value' );

})(o);

alert( o.baz[0] );  // 'new_value'

Di sini Anda dapat melihat bahwa karena Anda tidak bayangan Array di bazatas odengan bazproperti pada obj, yang o.bazArray akan diubah.

Jadi, Anda harus membayangi terlebih dahulu:

var o = {
    baz: []
};
(function(x){
    var obj = Object.create( x );

    obj.baz = [];
    obj.baz.push( 'new value' );

})(o);

alert( o.baz[0] );  // undefined

Lihat jawaban ini https://stackoverflow.com/a/5344074/746491 .

Singkatnya, JSON.parse(JSON.stringify(obj))ini adalah cara cepat untuk menyalin objek Anda, jika objek Anda dapat diserialkan ke json.

Berikut adalah fungsi clone yang akan melakukan deep copy objek:

function clone(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;

    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);

    return temp;
}

Sekarang Anda bisa menggunakan seperti ini:

(function(x){
    var obj = clone(x);
    obj.foo = 'foo';
    obj.bar = 'bar';
})(o)

Menggunakan Object.assign()

Contoh:

var a = {some: object};
var b = new Object;
Object.assign(b, a);
// b now equals a, but not by association.

Contoh lebih bersih yang melakukan hal yang sama:

var a = {some: object};
var b = Object.assign({}, a);
// Once again, b now equals a.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Anda sedikit bingung tentang cara kerja objek di JavaScript. Referensi objek adalah nilai variabel. Tidak ada nilai unserialized. Saat Anda membuat objek, strukturnya disimpan dalam memori dan variabel yang ditetapkan untuk menyimpan referensi ke struktur itu.

Bahkan jika apa yang Anda tanyakan diberikan dengan cara yang mudah, konstruksi bahasa asli secara teknis masih merupakan kloning.

JavaScript benar-benar hanya nilai lewat ... hanya saja nilai yang diteruskan mungkin merujuk pada sesuatu.

Gunakan ini

x = Object.create(x1);

xdan x1akan menjadi dua objek yang berbeda, perubahan xtidak akan berubahx1

Javascript selalu melewati nilai. Dalam hal ini, ia meneruskan salinan referensi oke fungsi anonim. Kode menggunakan salinan referensi tetapi mengubah satu objek. Tidak ada cara untuk membuat javascript melewati apapun selain nilai.

Dalam hal ini, yang Anda inginkan adalah meneruskan salinan objek yang mendasarinya. Mengkloning objek adalah satu-satunya jalan keluar. Metode klon Anda membutuhkan sedikit pembaruan

function ShallowCopy(o) {
  var copy = Object.create(o);
  for (prop in o) {
    if (o.hasOwnProperty(prop)) {
      copy[prop] = o[prop];
    }
  }
  return copy;
}

Sebagai pertimbangan bagi pengguna jQuery, ada juga cara untuk melakukannya dengan cara sederhana menggunakan kerangka kerja. Cara lain jQuery membuat hidup kita sedikit lebih mudah.

var oShallowCopy = jQuery.extend({}, o);
var oDeepCopy    = jQuery.extend(true, {}, o); 

referensi :

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• dan untuk menggali sumbernya .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

Sebenarnya, Javascript selalu melewati nilai . Tetapi karena referensi objek adalah nilai , objek akan berperilaku seperti diteruskan oleh referensi .

Jadi untuk berjalan di sekitar ini, string objek dan parsing kembali, keduanya menggunakan JSON. Lihat contoh kode di bawah ini:

var person = { Name: 'John', Age: '21', Gender: 'Male' };

var holder = JSON.stringify(person);
// value of holder is "{"Name":"John","Age":"21","Gender":"Male"}"
// note that holder is a new string object

var person_copy = JSON.parse(holder);
// value of person_copy is { Name: 'John', Age: '21', Gender: 'Male' };
// person and person_copy now have the same properties and data
// but are referencing two different objects

use obj2 = {... obj1} Sekarang kedua objek memiliki nilai yang sama dengan referensi yang berbeda

Saya perlu menyalin objek berdasarkan nilai (bukan referensi) dan menurut saya halaman ini berguna:

Apa cara paling efisien untuk mengkloning objek dalam JavaScript? . Secara khusus, mengkloning objek dengan kode berikut oleh John Resig:

//Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Dengan sintaks ES6:

let obj = Object.assign({}, o);

Ketika Anda menyimpulkannya, itu hanya proxy yang terlalu rumit, tapi mungkin Catch-All Proxies bisa melakukannya?

var o = {
    a: 'a',
    b: 'b',
    func: function() { return 'func'; }
};

var proxy = Proxy.create(handlerMaker(o), o);

(function(x){
    var obj = x;
    console.log(x.a);
    console.log(x.b);
    obj.foo = 'foo';
    obj.bar = 'bar';
})(proxy);

console.log(o.foo);

function handlerMaker(obj) {
  return {
   getOwnPropertyDescriptor: function(name) {
     var desc = Object.getOwnPropertyDescriptor(obj, name);
     // a trapping proxy's properties must always be configurable
     if (desc !== undefined) { desc.configurable = true; }
     return desc;
   },
   getPropertyDescriptor:  function(name) {
     var desc = Object.getOwnPropertyDescriptor(obj, name); // not in ES5
     // a trapping proxy's properties must always be configurable
     if (desc !== undefined) { desc.configurable = true; }
     return desc;
   },
   getOwnPropertyNames: function() {
     return Object.getOwnPropertyNames(obj);
   },
   getPropertyNames: function() {
     return Object.getPropertyNames(obj);                // not in ES5
   },
   defineProperty: function(name, desc) {

   },
   delete:       function(name) { return delete obj[name]; },   
   fix:          function() {}
  };
}

Jika Anda menggunakan lodash atau npm, gunakan fungsi gabungan lodash untuk menyalin semua properti objek ke objek kosong baru seperti:

var objectCopy = lodash.merge({}, originalObject);

https://lodash.com/docs#merge

https://www.npmjs.com/package/lodash.merge