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. ローカルコピー/クローンを作成する以外に、値でオブジェクトを渡すより良い方法はありますか？

あんまり。

あなたが実際に必要なものに応じて、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'

ここでは、bazon 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そしてx12つの異なるオブジェクト、変更になる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

use obj2 = {... obj1}これで、両方のオブジェクトに同じ値のバストの異なる参照があります

オブジェクトを値で（参照ではなく）コピーする必要があり、このページが役に立ちました。

JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか？。特に、John Resigによる次のコードでオブジェクトを複製します。

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

ES6構文の場合：

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

簡単に言えば、それは単なる複雑すぎる複雑なプロキシですが、Catch-Allプロキシがそれを実行できるのでしょうか？

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のmerge関数を使用して、次のように、オブジェクトのすべてのプロパティを新しい空のオブジェクトにディープコピーします。

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

https://lodash.com/docs#merge

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