วัตถุ JavaScript
วัตถุ คุณสมบัติ และวิธีการในชีวิตจริง
ในชีวิตจริง รถยนต์คือสิ่งของ
รถยนต์มีคุณสมบัติอย่างเช่น น้ำหนักและสี และวิธีการต่างๆ เช่น การสตาร์ทและหยุด:
| วัตถุ | คุณสมบัติ | วิธีการ |
|---|---|---|
|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = ขาว |
car.start() car.drive() car.brake() รถหยุด() |
รถทุกคันมีคุณสมบัติ เหมือนกัน แต่มูลค่า ทรัพย์สิน แตกต่างกันไปในแต่ละคัน
รถทุกคันมีวิธีการเหมือนกันแต่วิธีการจะดำเนินการ ในเวลาที่ต่างกัน
วัตถุ JavaScript
คุณได้เรียนรู้แล้วว่าตัวแปร JavaScript เป็นที่เก็บค่าข้อมูล
รหัสนี้กำหนดค่าอย่างง่าย (Fiat) ให้กับตัวแปรชื่อ car:
let car = "Fiat";
วัตถุก็เป็นตัวแปรเช่นกัน แต่วัตถุสามารถมีค่าได้มากมาย
รหัสนี้กำหนดค่าจำนวนมาก (Fiat, 500, สีขาว) ให้กับ ตัวแปร ชื่อ car:
const car = {type:"Fiat", model:"500", color:"white"};
ค่าจะถูกเขียนเป็น คู่ ของชื่อ:ค่า (ชื่อและค่าคั่นด้วยเครื่องหมายทวิภาค)
เป็นเรื่องปกติที่จะประกาศวัตถุด้วยคำสำคัญconst
เรียนรู้เพิ่มเติมเกี่ยวกับการใช้constกับอ็อบเจ็กต์ในบท: JS Const
คำจำกัดความของวัตถุ
คุณกำหนด (และสร้าง) วัตถุ JavaScript ด้วยตัวอักษรวัตถุ:
ตัวอย่าง
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
การเว้นวรรคและการขึ้นบรรทัดใหม่ไม่สำคัญ คำจำกัดความของวัตถุสามารถขยายได้หลายบรรทัด:
ตัวอย่าง
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
คุณสมบัติของวัตถุ
ชื่อ:ค่าคู่ในวัตถุ JavaScript เรียกว่าคุณสมบัติ :
| คุณสมบัติ | มูลค่าทรัพย์สิน |
|---|---|
| ชื่อจริง | จอห์น |
| นามสกุล | โด่ |
| อายุ | 50 |
| สีตา | สีฟ้า |
การเข้าถึงคุณสมบัติของวัตถุ
คุณสามารถเข้าถึงคุณสมบัติของวัตถุได้สองวิธี:
objectName.propertyName
หรือ
objectName["propertyName"]
ตัวอย่าง1
person.lastName;
ตัวอย่าง2
person["lastName"];
ออบเจ็ก ต์ JavaScript เป็นคอนเทนเนอร์สำหรับค่าที่มีชื่อ ซึ่ง เรียกว่าคุณสมบัติ
วิธีการวัตถุ
วัตถุยังสามารถมีวิธีการ
เมธอดคือการกระทำที่สามารถทำได้กับออบเจ็กต์
เมธอดถูกเก็บไว้ในคุณสมบัติเป็นนิยามของ ฟังก์ชัน
| คุณสมบัติ | มูลค่าทรัพย์สิน |
|---|---|
| ชื่อจริง | จอห์น |
| นามสกุล | โด่ |
| อายุ | 50 |
| สีตา | สีฟ้า |
| ชื่อเต็ม | function() {ส่งคืน this.firstName + " " + this.lastName;} |
วิธีการคือฟังก์ชันที่เก็บไว้เป็นคุณสมบัติ
ตัวอย่าง
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
คีย์เวิร์ดนี้ _
ในนิยามฟังก์ชันthisหมายถึง "เจ้าของ" ของฟังก์ชัน
ในตัวอย่างข้างต้นthisเป็นวัตถุบุคคลที่ "เป็นเจ้าของ"
fullNameฟังก์ชัน
กล่าวอีกนัยหนึ่งthis.firstNameหมายถึงfirstNameคุณสมบัติของวัตถุนี้
อ่านเพิ่มเติมเกี่ยวกับthisคำหลักที่JS คำหลักนี้
การเข้าถึงวิธีการอ็อบเจ็กต์
คุณเข้าถึงวิธีการอ็อบเจ็กต์ด้วยไวยากรณ์ต่อไปนี้:
objectName.methodName()
ตัวอย่าง
name = person.fullName();
หากคุณเข้าถึงเมธอดโดยไม่มี () วงเล็บจะคืนค่าฟังก์ชัน definition :
ตัวอย่าง
name = person.fullName;
อย่าประกาศสตริง ตัวเลข และบูลีนเป็นวัตถุ!
เมื่อมีการประกาศตัวแปร JavaScript ด้วยคีย์เวิร์ด " new" ตัวแปรจะถูกสร้างขึ้นเป็นอ็อบเจ็กต์:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
หลีกเลี่ยงString, Number, และBooleanวัตถุ มันทำให้โค้ดของคุณซับซ้อนและทำให้ความเร็วในการดำเนินการช้าลง
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับวัตถุในภายหลังในบทช่วยสอนนี้