JavaScript: Як передавати об’єкт за значенням?

• Передаючи об'єкти як параметри, JavaScript передає їх за посиланням і ускладнює створення локальних копій об'єктів.

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

  oматимуть .fooі .bar.

• Це можна обійти шляхом клонування; простий приклад:

  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)

  oне матиме .fooабо .bar.

Питання

1. Чи є кращий спосіб передавати об'єкти за значенням, крім створення локальної копії / клону?

Не зовсім.

Залежно від того, що вам насправді потрібно, може бути одна можливість встановити oв якості прототипу нового об’єкта.

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

alert( o.foo ); // undefined

Тому будь-які властивості, до яких ви додаєте obj, не додаватимуться o. Будь-які властивості, додані до objтого ж імені властивості, як і властивість у o, затьмарять його o.

Звичайно, будь-які властивості, до яких oбуде додано, будуть доступні, objякщо вони не затінені, і всі об’єкти, що містяться oв ланцюжку прототипів, побачать ті самі оновлення o.

Крім того, якщо у objвас є властивість, на яку посилається інший об'єкт, наприклад на масив, вам потрібно буде впевнено затінити цей об'єкт перед тим, як додати до нього об’єкти, інакше ці учасники будуть додані до них objі будуть поділятися між усіма об'єктами, які є objв ланцюжку прототипів.

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

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

})(o);

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

Тут ви можете побачити , що , тому що ви не затінювати масив в bazна oз bazвласністю на obj, то o.bazмасив модифікується.

Тому натомість вам спочатку потрібно буде затінити його:

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

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

})(o);

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

Перевірте цю відповідь https://stackoverflow.com/a/5344074/746491 .

Коротше кажучи, JSON.parse(JSON.stringify(obj))це швидкий спосіб скопіювати ваші об'єкти, якщо ваші об'єкти можна серіалізувати в json.

Ось функція клонування, яка буде виконувати глибоку копію об’єкта:

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

Тепер ви можете використовувати так:

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

Використовуйте Object.assign()

Приклад:

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

Приклад чистішого, який робить те саме:

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

Ви трохи заплутані в тому, як працюють об’єкти в JavaScript. Посилання на об'єкт - це значення змінної. Несеризованого значення немає. Коли ви створюєте об'єкт, його структура зберігається в пам'яті, а змінна, якій вона була призначена, містить посилання на цю структуру.

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

JavaScript насправді просто передає значення ... це просто те, що передане значення може бути посиланням на щось.

Використовуй це

x = Object.create(x1);

xі x1буде двома різними об'єктами, зміна в xне змінитьсяx1

Javascript завжди передається за значенням. У цьому випадку це передавання копії посилання oв анонімну функцію. Код використовує копію посилання, але він мутує один об'єкт. Немає способу змусити javascript пройти мимо чогось іншого, крім значення.

У цьому випадку ви хочете передати копію основного об'єкта. Клонування об’єкта - це єдиний засіб. Для вашого методу клонування потрібно трохи оновити

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

Як розгляд для користувачів jQuery, існує також спосіб зробити це простим способом, використовуючи фреймворк. Ще один спосіб jQuery полегшує наше життя.

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

посилання:

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• і копатись до джерела .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

Насправді Javascript завжди передається за значенням . Але оскільки посилання на об’єкти є значеннями , об’єкти будуть поводитися так, як передаються посиланням .

Тож для того, щоб обійти це, оберіть об’єкт і проаналізуйте його назад, обидва використовуючи JSON. Дивіться приклад коду нижче:

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

використовувати obj2 = {... obj1} Тепер обидва об'єкти мають однакове значення бюста різного посилання

Мені потрібно було скопіювати об’єкт за значенням (не посиланням), і я знайшов цю сторінку корисною:

Який найефективніший спосіб глибокого клонування об’єкта в JavaScript? . Зокрема, клонування об’єкта із таким кодом Джона Ресіга:

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

З синтаксисом ES6:

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

Коли ви перейдете до цього, це просто химерний надмірно складний проксі, але, можливо, Catch-All Proxies міг би це зробити?

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

Якщо ви використовуєте lodash або npm, використовуйте функцію злиття lodash, щоб глибоко скопіювати всі властивості об’єкта в новий порожній об’єкт, наприклад:

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

https://lodash.com/docs#merge

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