วันเสาร์ที่ 2 สิงหาคม พ.ศ. 2557

ภาษา JavaScript ฉบับผู้เริ่มต้น part 15-1

: ออบเจ็กต์

>> ในที่สุดก็มาถึงเรื่องท้ายๆของภาษาจาวาสคริปต์แล้ว (แม้ว่าจะข้ามไปบางเรื่อง เช่น Regular Expression และ DOM) ใครที่ศึกษาแบบผู้เริ่มต้นอย่างผมแล้วมาถึงนี่ได้ เราก็ควรให้กำลังใจซึ่งกันและกันนะครับ เยี่ยมมาก หากเราสามารถผ่านเรื่องนี้ไปได้ เรื่องที่ว่าเข้าใจยากกว่านี้ก็จะไม่ยากอีกต่อไป

>> ในภาษาอื่นเช่น จาวา แนวคิดของออบเจ็กต์ (object) และคลาส (class) จะแข็งแรงกว่านี้มาก มีความเป็น OOP มากกว่า จาวานิยามคำว่าออบเจ็กต์คือกลุ่มของแอตทริบิวต์ (attributes) กับเมธอด (methods) ที่มีความสัมพันธ์ต่อกันในเชิงของความหมาย ยกตัวอย่างเช่น ออบเจ็กต์ปากกา ก็คือปากกา จะต้องประกอบไปด้วยอะไรบ้างที่จำเป็นในขณะนั้น อาจได้แก่ หมึกปากกา ไส้ปากกา ปลอกปากกา จะต้องนำมาเขียนได้ มีโอกาสที่หมึกจะหมดหรืออื่นๆตามความเหมาะสม แล้วจาวาสคริปต์ล่ะ นิยามคำว่าออบเจ็กต์อย่างไร?

>> จาวาสคริปต์นิยามคำว่าออบเจ็กต์คือกลุ่มของพร็อพเพอร์ตี้ (properties) หรือก็คือคุณสมบัติที่เกี่ยวข้องกัน เพื่อให้มันง่ายต่อการเรียกใช้ มาถึงตรงนี้อาจสับสนว่าแล้วแอตทริบิวต์กับพร็อพเพอร์ตี้นี้มันเหมือนหรือต่างกันอย่างไร แท้จริงแล้วมันแทบไม่ต่างกันเลย ในเมื่อจาวาสคริปต์ของเราทำงานกับ DOM (ประดาแท็ก HTML ทั้งหลาย) จึงเรียกรายละเอียดของแท็กใดๆว่า แอตทริบิวต์ เช่น แท็กลิงค์

<a href="www.google.co.th">go to google</a>

มีรายละเอียดหรือแอตทริบิวต์ชื่อ href เป็นต้น แต่พอเราเข้าถึงแท็กดังกล่าวนี้ด้วยจาวาสคริปต์ (อาจโดย getElementByID) และต้องการกำหนดค่า URL ใหม่ เจ้า href นี้จะถูกเรียกในสภาพแวดล้อมของจาวาสคริปต์ว่า พร็อพเพอร์ตี้

>> สมมติว่าผมมี username กับ password ของสองเว็บไซต์เป็นอย่างนี้
- www.hotmail.com
username: pros
password: admin

- www.gmail.com
username: panda
password: unlockme

>> ผมสามารถนำมันทั้งสองมาสร้างเป็นอาร์เรย์ได้
var account1 = [ "www.hotmail.com", "pros", "admin" ];
var account2 = [ "www.gmail.com", "panda", "unlockme" ];

>> เวลาที่ผมต้องการเรียกใช้ก็ได้ว่า
document.write( account1[0] ); //ผลลัพธ์คือ www.hotmail.com
document.write( account2[2] ); //ผลลัพธ์คือ unlockme

>> ตัวอย่างข้างต้นคือออบเจ็กต์ของอาร์เรย์ แต่เรากำลังพูดถึงออบเจ็กต์ที่เราสามารถสร้างได้ด้วยตัวเอง เป็นออบเจ็กต์ที่สื่อความหมายถึงสิ่งนั้นเท่านั้นจริงๆ จึงได้ว่า
var account1 = {
addressName: "www.hotmail.com",
username: "pros",
password: "admin"
};

var account2 = {
addressName: "www.gmail.com",
username: "panda",
password: "unlockme"
};

>> เวลาจะเรียกใช้งานก็ว่า
document.write( account1.addressName ); //ผลลัพธ์คือ www.hotmail.com
document.write( account2.password ); //ผลลัพธ์คือ unlockme

>> หรือจะเรียกใช้แบบนี้ก็ได้ เราเรียกวิธีนี้ว่า Associative Array
document.write( account1[ "addressName"] );
document.write( account2[ "password" ] );

>> ตบท้ายด้วยการวนลูปแบบ for-in เพื่อดึงพร็อพเพอร์ตี้ออกมาดูหรือกำหนดค่าใหม่ครับ
for( var pName in account1 ) {
document.write( pName + " : " + account1[ pName ] + "<br/>" );
}

ผลลัพธ์คือ
addressName : www.hotmail.com
username : pros
password : admin

>> เมื่อรู้จักกับออบเจ็กต์ของภาษาจาวาสคริปต์กันแล้ว โอกาสหน้าเรามารู้จักกับคลาสบ้าง บอกให้เลยว่าจาวาสคริปต์ใช้ฟังก์ชันในการนิยามคลาสครับ

>> อ่านเพิ่มเติมเกี่ยวกับออบเจ็กต์ของภาษาจาวาสคริปต์
http://www.w3schools.com/js/js_objects.asp

ไม่มีความคิดเห็น:

แสดงความคิดเห็น