JavaScript03_Object

หลังจากเราเริ่มคุ้นเคยกับ JavaScript กันแล้ว ในบทความนี้เราจะมาเรียนรู้ถึงสิ่งที่เรียกว่า Object กัน

Object ในภาษา JavaScript 

มีคำกล่าวว่า 

“Object คือราชาใน JavaScript ถ้าคุณเข้าใจเรื่อง Object คุณก็จะเข้าใจ JavaScript” 

คำกล่าวนี้ไม่ไกลเกินความจริงเลยครับ เพราะในภาษา JavaScript นั้น เกือบทุกสิ่งล้วนเป็น Object อย่างเช่น

• Booleans สามารถเป็น objects ได้ (ถ้า defined ด้วยคีย์เวิร์ด new)
• Numbers สามารถเป็น objects ได้ (ถ้า defined ด้วยคีย์เวิร์ด new)
• Strings สามารถเป็น objects ได้ (ถ้า defined ด้วยคีย์เวิร์ด new)
• Dates เป็น objects เสมอ
• Maths เป็น objects เสมอ
• Regular expressions เป็น objects เสมอ
• Arrays เป็น objects เสมอ
• Functions เป็น objects เสมอ
• Objects เป็น objects เสมอ
• และค่าทุกอย่างใน JavaScript ยกเว้น primitive ก็เป็น objects 

Object ในภาษา JavaScript คือตัวแปรที่สามารถเก็บค่าได้หลายค่า โดยเขียนอยู่ในรูปของคู่ name:value (เราใช้เครื่องหมาย colon ในการแยกชื่อและค่าของมัน) หลายๆคู่ คล้ายกับ Associative arrays ใน PHP, Dictionaries ใน Python, Hash tables ใน C, Hash maps ใน Java

ตัวอย่าง:

var student1 = {firstName:"Mary", age:18, school:"EPT"};

สำหรับ Object ใน JavaScript นั้นเราเรียกชื่อ(name)อีกอย่างว่า object property และสามารถเขียน object method ได้โดยนิยามฟังก์ชันให้กับ object property นี้ ขอให้ผู้อ่านลองดูตารางแสดง property ของตัวแปร student1 ต่อไปนี้เพื่อความเข้าใจมากขึ้น

การสร้าง JavaScript Object

ใน JavaScript เราสามารถสร้าง Object ได้ 3 วิธี ได้แก่

1. ใช้ Object Literal

วิธีนี้เป็นวิธีที่ง่ายที่สุดในการสร้าง Object ทำได้โดยการเขียนลิสต์ของคู่ name:value ไว้ในวงเล็บปีกกา

ตัวอย่าง:

var student = {firstName:"Mary", age:18, school:"EPT"};

2. ใช้คีย์เวิร์ด new

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

ตัวอย่าง:

var student = new Object();
student.firstName = "Mary"; 
student.age = 18;
student.school = "EPT";

3. ใช้ object constructor function

การสร้าง Object จากสองวิธีก่อนหน้านี้จะสร้างได้แค่ Object เดียวเท่านั้น แต่บางครั้งเราก็ต้องการสร้าง Object ชนิดเดียวกันหลายๆตัว(มี Property เหมือนกัน) คล้ายกับมีแบบแปลนที่เอาไปใช้สร้างบ้านได้ทั้งหมู่บ้านนั่นเอง ซึ่งเราสามารถทำได้โดยใช้สิ่งที่เรียกว่า object constructor function ดังตัวอย่างต่อไปนี้จะเป็นการสร้าง object constructor function ชื่อ Student() และสร้าง Object ชนิด Student ใหม่โดยการใช้คีย์เวิร์ด new

ตัวอย่าง:

function Student(first, age, school) {
  this.firstName = first;
  this.age = age;
  this.school = school;
}

var mary = new Student("Mary", 18, "EPT");
var bobby = new Student("Bobby", 19, "EPT");

เป็นอย่างไรบ้างครับ การสร้าง JavaScript Object ไม่ยากเกินไปใช่ไหมครับ ถ้าอยากอ่านรายละเอียดเพิ่มเติมก็อ่านได้ที่ [1] และ [2] 

บทความต่อไปเราจะมาเรียนรู้เกี่ยวกับ JavaScript Object Prototypes กันครับ

สุดท้ายนี้ถ้าผู้อ่านอยากเรียนรู้เรื่อง JavaScript และเรื่องเกี่ยวกับ Web Programming อย่างลึกซึ้งก็ขอแนะนำคอร์ส Web Programming ของทาง EPT ครับ สามารถดูรายละเอียดคอร์สได้โดยคลิกที่นี่ หรือติดต่อได้ที่ 085-350-7540

ที่มาและเว็บไซต์อ้างอิง

[1] https://www.w3schools.com/js/js_object_definition.asp
[2] https://www.w3schools.com/js/js_object_constructors.asp