JavaScript: Jak przekazać obiekt przez wartość?

• Podczas przekazywania obiektów jako parametrów, JavaScript przekazuje je przez odniesienie i utrudnia tworzenie lokalnych kopii obiektów.

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

  obędzie mieć .fooi .bar.

• Można to obejść przez klonowanie; prosty przykład:

  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)
  

  onie będzie mieć .foolub .bar.

Pytanie

1. Czy istnieje lepszy sposób przekazywania obiektów według wartości, inny niż tworzenie lokalnej kopii / klonu?

Nie całkiem.

W zależności od tego, czego faktycznie potrzebujesz, jedną z możliwości może być ustawienie ojako prototyp nowego obiektu.

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

alert( o.foo ); // undefined

Więc żadne właściwości, do których dodasz obj, nie zostaną dodane o. Wszelkie właściwości dodane do właściwości objo tej samej nazwie, co właściwość w programie, obędą cieniały owłaściwość.

Oczywiście wszelkie właściwości dodane do obędą dostępne z poziomu, objjeśli nie są zasłonięte, a wszystkie obiekty, które mają ow łańcuchu prototypów, zobaczą te same aktualizacje o.

Ponadto, jeśli objma właściwość odwołującą się do innego obiektu, takiego jak Array, musisz upewnić się, że obiekt ten jest cieniowany przed dodaniem elementów do obiektu, w przeciwnym razie te elementy zostaną dodane obji będą współdzielone przez wszystkie obiekty, które mają objw łańcuchu prototypów.

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

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

})(o);

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

Tutaj możesz zobaczyć, że ponieważ nie przesłałeś Array at bazon oz bazwłaściwością włączoną obj, o.bazArray zostanie zmodyfikowany.

Zamiast tego musisz najpierw go prześledzić:

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

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

})(o);

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

Sprawdź tę odpowiedź https://stackoverflow.com/a/5344074/746491 .

Krótko mówiąc, JSON.parse(JSON.stringify(obj))jest to szybki sposób na skopiowanie obiektów, jeśli można je serializować do json.

Oto funkcja klonowania, która wykona głęboką kopię obiektu:

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

Teraz możesz użyć w ten sposób:

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

Posługiwać się Object.assign()

Przykład:

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

Bardziej przejrzysty przykład, który robi to samo:

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

Jesteś trochę zdezorientowany, jak działają obiekty w JavaScript. Odniesieniem do obiektu jest wartość zmiennej. Nie ma wartości nieserializowanej. Podczas tworzenia obiektu jego struktura jest przechowywana w pamięci, a zmienna, do której został przypisany, zawiera odniesienie do tej struktury.

Nawet jeśli to, o co pytasz, zostało dostarczone w jakimś łatwym, rodzimym języku, technicznie nadal byłoby to klonowanie.

JavaScript jest tak naprawdę wartością przekazaną ... po prostu przekazana wartość może być odniesieniem do czegoś.

Użyj tego

x = Object.create(x1);

xi x1będą dwoma różnymi obiektami, zmiana xnie ulegnie zmianiex1

JavaScript zawsze przekazuje wartość. W tym przypadku przekazuje kopię referencji odo funkcji anonimowej. Kod używa kopii odwołania, ale mutuje pojedynczy obiekt. Nie ma sposobu, aby javascript przeszedł przez cokolwiek innego niż wartość.

W tym przypadku to, co chcesz, to przekazanie kopii podstawowego obiektu. Klonowanie obiektu jest jedynym rozwiązaniem. Twoja metoda klonowania wymaga jednak nieco aktualizacji

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

Mając na uwadze użytkowników jQuery, istnieje również sposób na zrobienie tego w prosty sposób przy użyciu frameworka. Jeszcze jeden sposób, w jaki jQuery sprawia, że ​​nasze życie jest trochę łatwiejsze.

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

Bibliografia :

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• i zagłębić się w źródło. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

W rzeczywistości JavaScript jest zawsze przekazywany według wartości . Ale ponieważ odniesienia do obiektów są wartościami , obiekty będą zachowywać się tak, jakby były przekazywane przez odniesienie .

Aby obejść ten problem , określ obiekt na łańcuchy i przeanalizuj go z powrotem, oba przy użyciu formatu JSON. Zobacz przykład kodu poniżej:

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} Teraz oba obiekty mają tę samą wartość, a inne odniesienia

Musiałem skopiować obiekt według wartości (nie odniesienia) i ta strona była pomocna:

Jaki jest najbardziej efektywny sposób głębokiego klonowania obiektu w JavaScript? . W szczególności sklonowanie obiektu za pomocą następującego kodu autorstwa Johna Resiga:

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

Ze składnią ES6:

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

Kiedy się do tego sprowadzisz, jest to po prostu fantazyjny, zbyt skomplikowany serwer proxy, ale może Catch-All Proxies mógłby to zrobić?

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

Jeśli używasz lodash lub npm, użyj funkcji scalania lodash, aby głęboko skopiować wszystkie właściwości obiektu do nowego pustego obiektu, tak jak poniżej:

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

https://lodash.com/docs#merge

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