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

นอกจากนี้หากobjมีคุณสมบัติที่อ้างอิงออบเจ็กต์อื่นเช่น Array คุณจะต้องแน่ใจว่าได้เงาวัตถุนั้นก่อนที่จะเพิ่มสมาชิกลงในวัตถุมิฉะนั้นสมาชิกเหล่านั้นจะถูกเพิ่มเข้าไป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 เป็นเพียงค่า pass-by-value ... เพียงแค่ว่าค่าที่ส่งผ่านไปอาจเป็นการอ้างอิงถึงบางสิ่ง

ใช้สิ่งนี้

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 } Will มีค่าเหมือนกัน แต่การอ้างอิงต่างกัน

ฉันต้องการคัดลอกวัตถุตามค่า (ไม่อ้างอิง) และฉันพบว่าหน้านี้มีประโยชน์:

วิธีใดที่มีประสิทธิภาพที่สุดในการโคลนวัตถุใน 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ใช้ฟังก์ชัน merge ของ lodash เพื่อคัดลอกคุณสมบัติทั้งหมดของวัตถุไปยังวัตถุว่างใหม่โดยละเอียดดังนี้:

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

https://lodash.com/docs#merge

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