ความแตกต่างหลักระหว่างออบเจ็กต์ที่สร้างด้วย Object Literal และ Constructor Function

ออบเจ็กต์ที่สร้างด้วย Object Literal เป็น Singleton หมายความว่าเมื่อมีการเปลี่ยนแปลงออบเจ็กต์ มันจะส่งผลต่อออบเจ็กต์ทั้งหมดในสคริปต์ ในขณะที่ออบเจ็กต์ที่สร้างด้วย Constructor Function การเปลี่ยนแปลงจะไม่ส่งผลต่อออบเจ็กต์อื่นๆ ในสคริปต์

1) ออบเจ็กต์ที่สร้างด้วย Object Literal

เนื่องจากเป็น Singleton การเปลี่ยนแปลงออบเจ็กต์จะคงอยู่ตลอดสคริปต์ การเปลี่ยนแปลงในอินสแตนซ์หนึ่งจะส่งผลต่อทุกอินสแตนซ์ของออบเจ็กต์

ในตัวอย่างด้านล่าง ทั้งออบเจ็กต์ student และ newStudent แสดง name (Ravi) เดียวกันในตอนแรก แต่เมื่อเปลี่ยน name ของ newStudent (โดยคง student ไว้เดิม) ทั้งสองออบเจ็กต์จะแสดง name ที่เปลี่ยนแล้ว (Kumar)

ตัวอย่าง

<html> <body> <script> 
    var student = { 
        name: "Ravi" 
    } 
    var newStudent = student; 
    document.write("Before change"); 
    document.write("<br>"); 
    document.write("student name = " + student.name); 
    document.write("<br>"); 
    document.write("new student name = " + newStudent.name); 
    document.write("<br>"); 
    newStudent.name = "kumar"; 
    document.write("After change"); 
    document.write("<br>"); 
    document.write("student name = " + student.name); 
    document.write("<br>"); 
    document.write("new student name = " + newStudent.name); 
</script> </body> </html>

ผลลัพธ์

Before change student name = Ravi new student name = Ravi After change student name = kumar new student name = kumar

2) ออบเจ็กต์ที่สร้างด้วย Constructor Function

ออบเจ็กต์ที่กำหนดด้วย Function Constructor ช่วยให้คุณมีหลายอินสแตนซ์ของออบเจ็กต์นั้นได้ การเปลี่ยนแปลงในอินสแตนซ์หนึ่งจะไม่ส่งผลต่ออินสแตนซ์อื่นๆ

ในตัวอย่างด้านล่าง แม้ name ของ newStudent จะถูกเปลี่ยน แต่ name ของ student ยังคงเดิม ทั้งสองออบเจ็กต์แสดง name ที่ต่างกันตามที่แสดงในผลลัพธ์

ตัวอย่าง

<html> <body> <script> 
    var stu = function() { 
        this.name = "Ravi" 
    } 
    var newStudent = new stu(); 
    var student = new stu(); 
    document.write("Before change"); 
    document.write("<br>"); 
    document.write("student name = " + student.name); 
    document.write("<br>"); 
    document.write("new student name = " + newStudent.name); 
    document.write("<br>"); 
    newStudent.name = "kumar"; 
    document.write("After change"); 
    document.write("<br>"); 
    document.write("student name = " + student.name); 
    document.write("<br>"); 
    document.write("new student name = " + newStudent.name); 
</script> </body> </html>

ผลลัพธ์

Before change student name = Ravi new student name = Ravi After change student name = Ravi new student name = kumar