โคลนนิ่ง
การโคลนในจาวาสคริปต์ไม่ได้เป็นเพียงแค่การคัดลอกคุณสมบัติของอ็อบเจ็กต์ไปยังอ็อบเจกต์อื่นเพื่อหลีกเลี่ยงการสร้างอ็อบเจ็กต์ที่มีอยู่แล้ว
มีสองสามวิธีในการโคลนวัตถุจาวาสคริปต์
1) วนซ้ำแต่ละคุณสมบัติและคัดลอกไปยังวัตถุใหม่
2) ใช้วิธี JSON
3) การใช้เมธอด object.assign()
มาคุยกันทีละวิธี
a) วนซ้ำแต่ละคุณสมบัติและคัดลอกไปยังวัตถุใหม่
นี่เป็นวิธีการแบบเก่าในการโคลนวัตถุ javascript ซึ่งแต่ละคุณสมบัติจะถูกทำซ้ำและคัดลอกไปยังวัตถุใหม่ เป็นวิธีการง่ายๆ แต่ไม่ค่อยมีใครใช้
ตัวอย่าง
<html>
<body>
<p id="cloning-1"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
for (let pro in sourceObject) {
if (sourceObject.hasOwnProperty(pro)) {
requiredObj[pro] = sourceObject[pro];
}
}
document.getElementById("cloning-1").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html> ผลลัพธ์
targetObject name = salman, age = 23, salary = 25000
b) วิธี JSON
เป็นวิธีการสมัยใหม่วิธีหนึ่งในการโคลนวัตถุ JavaScript ในวิธีนี้ วัตถุต้นทางต้องปลอดภัยจาก JSON
ตัวอย่าง
<html>
<body>
<p id="cloning-2"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = JSON.parse(JSON.stringify(sourceObject));
document.getElementById("cloning-2").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html> ผลลัพธ์
targetObject name = salman, age = 23, salary = 25000
c) Object.assign()
นี่เป็นวิธีการขั้นสูงที่ใช้บ่อยมากในปัจจุบันเพื่อโคลนออบเจกต์จาวาสคริปต์ เมธอดนี้คัดลอกแบบตื้นเท่านั้น ซึ่งหมายความว่าคุณสมบัติที่ซ้อนกันจะยังคงถูกคัดลอกโดยการอ้างอิง
ตัวอย่าง
<html>
<body>
<p id="cloning-3"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = Object.assign({}, sourceObject);
document.getElementById("cloning-3").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary;
</script>
</body>
</html> ผลลัพธ์
targetObject name = salman, age = 23, salary = 25000
