Deep clone object in JavaScript

สวัสดีครับ ไม่ได้เขียน Blog มานาน วันนี้เอาซะหน่อยเป็นเรื่องสั้นๆที่เกี่ยวกับการ Clone object ใน Javascript 

ปกติ Object ใน Javascript จะเป็น Referent type หมายความว่า เมื่อเราสร้าง Object ขึ้นมา มันจะสร้าง Reference variable ไว้ใน Stack memory และใช้ Variable ที่เราประกาศ ชี้ไปยัง data ที่อยู่ในหน่วยความจำส่วนของ Heap memory อีกที

เพื่อความเข้าใจมาดูตัวอย่างนี้ครับ

จากตัวอย่าง จะเห็นว่า obj1 และ Obj2 ชี้ไปยัง Object เดียวกัน ทําให้เมื่อเปลี่ยนแปลงข้อมูลที่อยู่ใน obj2 ส่งผลให้ obj1 เปลี่ยนแปลงตามไปด้วย

ถ้าหากว่าถ้าเราต้องการจะ Clone object ละ จะทําอย่างไร?

ในบทความนี้ผมจะเสนอวิธีการ Clone สองวิธีดังนี้

Clone object แบบที่1 ใช้ JSON.parse และ JSON.stringify

ลองรัน Code ได้ที่นี่ https://es6console.com/jnenhefu/

การทํางานคือจะแปลง Object เป็น Json String ก่อน แล้วก็แปลงกลับ เป็น Object อีกครั้ง

Clone object แบบที่2

ทดลองรันได้ที่นี่ https://jsfiddle.net/kr81zq67/3/

ทั้งสองแบบสามารถใช้งานได้เหมือนกัน แต่จะมีข้อแตกต่างคือ แบบที่1 จะไม่สามารถใช้กับ Object ที่มีข้อมูลเป็น Fuction ได้ ส่วนแบบที่2 สามารถใช้กับ Object ที่มีข้อมูลทุกประเภท

Comments