รู้เบื้องต้นเกี่ยวกับการโคลนนิ่งลึกของวัตถุจาวาสคริปต์

ฉันไม่รู้ว่ามันเริ่มต้นเมื่อใด แต่มีคำใหม่ปรากฏขึ้นในวงกลมส่วนหน้า: การโคลนนิ่งความลึกของวัตถุ มันดูสูงมาก แต่ไม่ใช่เรื่องใหม่ คุณอาจใช้มันในการพัฒนาโครงการที่แท้จริงของเรา แต่เนื่องจากความลึกซึ้งของตัวละครจีนบางสิ่งที่เรียบง่ายบางอย่างกลายเป็นเรื่องลึกลับโดยการปรับเปลี่ยนเล็กน้อยโดยคำศัพท์มืออาชีพที่ดูเหมือนจะเป็นมืออาชีพ

ก่อนอื่นทำไมคุณต้องโคลนวัตถุลึกลงไป? โปรดอนุญาตให้ฉันคาดเดา: บางครั้งคุณคิดว่าเอกสารวัตถุในตัวของ JS นั้นยาวเกินไปจากนั้นคุณอาจทำสิ่งนี้:

การคัดลอกรหัสมีดังนี้:

var d = เอกสาร;

d.by = function (id) {

return d.getElementById (ID);

-

d.by ('id'). innerhtml = 'hello sentsin';

รหัสด้านบนช่วยลดความซับซ้อนของ document.getElementById และยังเพิ่มวิธีการสมาชิกโดยสมาชิกเอกสารต้นฉบับ คุณสามารถตรวจสอบการตัดสินของคุณผ่านค่าสถานะที่ส่งคืนโดย document.hasownproperty ('โดย') ลองดูตัวอย่างต่อไปนี้

การคัดลอกรหัสมีดังนี้:

var person = {ชื่อ: 'xianxin', อาชีพ: 'การพัฒนาส่วนหน้า', สถานที่: 'Hangzhou'};

var newperson = บุคคล;

newPerson.age = '24';

console.log (บุคคล);

// ผลลัพธ์: {ชื่อ: 'Xianxin', อาชีพ: 'การพัฒนาส่วนหน้า', สถานที่: 'Hangzhou', อายุ: 24}

จะเห็นได้ว่าเมื่อวัตถุถูกส่งผ่านไปยังตัวแปรใหม่มันเป็นเพียงนามแฝงของวัตถุ ซึ่งหมายความว่าค่าคีย์วัตถุดั้งเดิมจะเปลี่ยนผ่านการดำเนินการของนามแฝง แต่ปัญหาคือบางครั้งเราต้องการให้ Newperson เป็นอิสระจากบุคคลอย่างสมบูรณ์และไม่มีความสัมพันธ์ในการซิงโครไนซ์ระหว่างกันดังนั้นเราต้องสร้างสำเนาโปรดดูตัวอย่าง:

การคัดลอกรหัสมีดังนี้:

var cloneobj = ฟังก์ชั่น (obj) {

var str, newobj = obj.constructor === อาร์เรย์? -

if (typeof obj! == 'object') {

กลับ;

} อื่นถ้า (window.json) {

str = json.stringify (obj), // object serialized

newobj = json.parse (str); //คืนค่า

} อื่น {

สำหรับ (var i ใน obj) {

newobj [i] = typeof obj [i] === 'วัตถุ'?

Cloneobj (obj [i]): obj [i];

-

-

คืน Newobj;

-

//ทดสอบ

var obj = {a: 0, b: 1, c: 2};

var arr = [0, 1, 2];

// ดำเนินการโคลนลึก

var newobj = cloneobj (obj);

var newarr = cloneobj (arr);

// ลบการลบสมาชิกของวัตถุใหม่โคลน

ลบ newobj.a;

Newarr.splice (0,1);

console.log (obj, arr, newobj, newarr);

// ผลลัพธ์: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

นี่คือการโคลนนิ่งวัตถุที่เรียกว่า แต่มีบางสิ่งที่ต้องอธิบาย วัตถุ JSON และวิธีการของสมาชิก stringify และแยกวิเคราะห์ในรหัสเป็นของข้อกำหนด ECMAScript5 พวกเขามีหน้าที่รับผิดชอบในการแปลงวัตถุ (รวมถึงวัตถุอาร์เรย์) เป็นสตริงและกู้คืนพวกเขาจึงตระหนักถึงการคัดลอกวัตถุอย่างลึกซึ้ง ดังนั้นสำหรับเบราว์เซอร์ระดับต่ำ (เช่นเช่น) หากคุณคัดลอกอาร์เรย์คุณสามารถใช้ newobj.concat (OBJ) และวัตถุธรรมดาสามารถระบุและกำหนดค่าได้