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모든 개체는 .oo

또한 objArray와 같은 다른 개체를 참조하는 속성이있는 경우 개체에 구성원을 추가하기 전에 해당 개체를 그림자로 처리해야합니다. 그렇지 않으면 해당 구성원이에 추가되고 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 익명 함수로 합니다. 코드는 참조 사본을 사용하고 있지만 단일 객체를 변경하고 있습니다. 가치 이외의 다른 것으로 자바 스크립트를 전달하는 방법은 없습니다.

이 경우 원하는 것은 기본 개체의 복사본을 전달하는 것입니다. 개체를 복제하는 것이 유일한 방법입니다. 복제 방법에는 약간의 업데이트가 필요합니다.

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는 항상 value로 전달됩니다 . 그러나 객체 참조는 값 이기 때문에 객체는 참조 로 전달되는 것처럼 작동합니다 .

따라서이 문제를 살펴 보려면 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 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