วัตถุ

ออบเจ็กต์คือประเภทข้อมูลที่แยกกันต่างหากในลักษณะเดียวกับประเภทข้อมูลพื้นฐาน โดยมีความแตกต่างที่สำคัญเพียง 1 ข้อ กล่าวคือออบเจ็กต์จะเปลี่ยนแปลงไม่ได้ ซึ่งต่างจากประเภทพื้นฐาน ออบเจ็กต์หนึ่งๆ อาจมีข้อมูลที่เชื่อมโยงกับตัวระบุ เช่น ตัวแปร แต่จะเก็บประเภทข้อมูลของ object ไว้โดยไม่คำนึงถึงข้อมูลที่มีอยู่

นอกเหนือจากค่าพื้นฐานแล้ว ค่า JavaScript ทั้งหมดเป็นออบเจ็กต์ อย่างไรก็ตาม ถึงแม้ลิเทอรัลพื้นฐานจะแสดงพฤติกรรมที่เหมือนออบเจ็กต์เนื่องจากการสืบทอดต้นแบบ แต่ก็ยังมีคำพูดที่ว่า JavaScript ประกอบด้วยออบเจ็กต์อย่างมีประสิทธิภาพ

ลิเทอรัลออบเจ็กต์คือวงเล็บปีกกาคู่หนึ่งล้อมรอบคู่คีย์-ค่า 0 รายการหรือมากกว่านั้นที่เรียกว่า "คุณสมบัติ" ซึ่งมีค่า JavaScript ใดก็ได้

{
    "myProperty" : true
}

คีย์ของพร็อพเพอร์ตี้อาจเป็นสัญลักษณ์หรือสตริงใดก็ได้ เช่นเดียวกับเมื่อกำหนดตัวระบุให้กับตัวแปร สตริงที่ใช้เป็นคีย์พร็อพเพอร์ตี้ควรสามารถคาดการณ์ได้และให้คำอธิบาย เช่น

let carAttributes = {
    "color" : "red"
};

carAttributes
> Object { color: "red" }

คีย์พร็อพเพอร์ตี้ต้องใช้ลิเทอรัลสตริงเดียว (') หรือแบบเครื่องหมายคำพูดคู่ (") ไม่ใช่เทมเพลตลิเทอรัล

let carAttributes = {
    `keyString` : false
};
> Uncaught SyntaxError: expected property name, got template literal

ค่าพร็อพเพอร์ตี้อาจเป็นข้อมูลประเภทใดก็ได้ คุณสมบัติของวัตถุสามารถประกอบด้วยวัตถุ ซึ่งมีคุณสมบัติของตนเองดังนี้

let myObject = {
    'key' : {
        'subkey' : true,
        'othersubkey' : false
    }
};

myObject;
> Object { key: Object { subkey: true, othersubkey: false } }

เมื่อค่าของพร็อพเพอร์ตี้เป็นฟังก์ชัน พร็อพเพอร์ตี้นั้นจะเรียกว่า "เมธอด"

const myObject = {
    "myProperty" : true,
    myMethod() {
        console.log( "This is a method." );
    }
}

myObject.myProperty;
> true

myObject.myMethod();
> "This is a method."

คุณยังสร้างออบเจ็กต์โดยใช้คีย์เวิร์ด new ได้อีกด้วย

let myObject = new Object();

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

{ "value" : 2 }
> Uncaught SyntaxError: unexpected token: ':'

({ "value" : 2 })
> Object { value: 2 }

let valObj = { "value" : 2 };

valObj;
> Object { value: 2 }

ผลลัพธ์ของการสร้างวัตถุโดยใช้ new Object() กับการสร้าง Object Literal นั้นไม่ต่างกับแบบพื้นฐาน เนื่องจากผลลัพธ์ในทั้ง 2 กรณีจะเป็นออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่รับช่วงมาจากต้นแบบ Object อย่างไรก็ตาม มีความแตกต่างในทางปฏิบัติอยู่อย่างหนึ่งระหว่างไวยากรณ์ทั้งสอง

คีย์เวิร์ด new ต้องกำหนดออบเจ็กต์ว่างที่จะเติมข้อมูลภายหลัง:

let myObject = new Object();

myObject.booleanValue = true;
myObject.stringValue = "My string.";

ระบบจะเติมข้อมูลออบเจ็กต์ลิเทอรัลเมื่อสร้างได้ดังนี้

let myObject = {
    'booleanValue' : true,
    'stringValue' : "My string."
};

แม้ว่าจะไม่ค่อยมีประโยชน์นัก แต่ก็อาจใช้ new Object() เพื่อเปลี่ยนค่าข้อมูลดั้งเดิมเป็นออบเจ็กต์ประเภทที่เกี่ยวข้องได้ เช่น ค่าที่แสดงผลโดยใช้คีย์เวิร์ด new ร่วมกับฟังก์ชันตัวสร้าง ตัวอย่างต่อไปนี้มีฟังก์ชันเทียบเท่ากับ new Number( 10 )

let myObject = new Object( 10 );

myObject;
> Number { 10 }

ค่า null และ undefined ทำให้เกิดออบเจ็กต์ว่าง ซึ่งมีการทำงานเหมือนกับการเรียกใช้ new Object() โดยไม่ต้องใส่อาร์กิวเมนต์

การส่ง Object Literal ไปยัง new Object() เนื่องจากอาร์กิวเมนต์จะส่งผ่าน Object Literal โดยไม่เปลี่ยนแปลง ดังนี้

let myObject = new Object( { myValue : 10 } );

myObject;
> Object { myValue: 10 }

เช่นเดียวกับการใช้ตัวสร้างสำหรับค่าพื้นฐาน การใช้ตัวสร้างสำหรับวัตถุไม่ค่อยมีประโยชน์อะไรมากกว่าการใช้สัญกรณ์การวาดวัตถุ แม้ว่าขณะสร้างออบเจ็กต์เปล่าเพื่อใส่ค่าในภายหลัง นักพัฒนาแอปก็มีแนวโน้มที่จะชอบรูปแบบตัวอักษรของออบเจ็กต์มากกว่าเพื่อความสะดวก

ทดสอบความเข้าใจ

สัญกรณ์ประเภทใดที่คุณสามารถใช้เพื่อตั้งค่าคุณสมบัติของวัตถุ

สัญลักษณ์จุด

เครื่องหมายวงเล็บ

สัญกรณ์ระยะเวลา

รูปแบบบรรทัด

ข้อใดต่อไปนี้คือไวยากรณ์ที่ถูกต้องสำหรับการรับค่าของ myProp

myObj["myProp"];

myObj{"myProp"};

myObj("myProp");