วันนี้เราพูดกันถึงเรื่อง Design Pattern ที่เกี่ยวข้องกับ
: หมู หมา แมว งู และนก
>> การเขียนโปรแกรมด้วยหลักการ OOP มักมาคู่กับการออกแบบคลาสเสมอ ซึ่งถือเป็นปัญหาสำคัญของผู้เขียนโปรแกรมที่อิงตามหลักการนี้แทบทุกคน ไม่เราก็เขาต้องมีคำถามหรือคำตอบทำนองว่า เอาล่ะวะ ได้ล่ะ หรือ เอาประมาณนี้ หรือ หื้อ~โอเคแบบนี้ ไม่กับตัวเองก็กับเพื่อนร่วมทีม
>> การเขียนโปรแกรมจับหลักการดีอย่างไร สำหรับผม ดีที่มั่นใจ ดีที่อุ่นใจได้ว่ากลวิธีที่เราหรือเขาได้ออกแบบมานี้สามารถนำมาประยุกต์แก้ปัญหาและจัดระบบงานได้ในเวลาขณะนั้น ทำให้โค้ดที่เขียนหรือคลาสที่สร้างขึ้นมีคุณภาพ อย่างน้อยก็ในระดับที่ตัวเราเองพอใจ
>> ปัญหาที่อยากแชร์ในโพสต์นี้ก็คือ สมมติเกมของเรามีสัตว์อยู่สามตัว ได้แก่ หมู หมา แมว เราต้องเขียนโปรแกรมเข้าไปควบคุมลักษณะการเดินของมัน คือให้มันส่ายขาดุ๊กดิ๊ก เดินดิ้นยุ๊กยิ๊กๆไปมา จะออกแบบคลาสของเจ้าสัตว์สามตัวนี้อย่างไร
>> งานนี้สมชายยกมือตอบทันที ให้มีคลาส (Concrete Class) ชื่อ หมู หมา แมว (สีเขียว) แต่ละคลาสมีเมธอดหรือพฤติกรรมการเดินสี่ขาของใครของมันไง ตามรูปที่ 1)
>> ปรากฏว่าเมื่อสมชายสร้างคลาส หมู หมา แมว ตามที่เขาคิด เขาก็ได้รู้ว่า โอ๊ะโอ๋! โค้ดที่เขียนลักษณะการเดินสี่ขามันซ้ำกันทั้งสามคลาสเลยนี่นะ ประเด็นคือเขียนโค้ดซ้ำ
>> ดังนั้นสมชายคิดใหม่ สร้าง Abstract Class ขึ้นมาแล้วกัน (สีส้ม) จับเอาสิ่งที่ซ้ำกันไปไว้ที่คลาสนามธรรมนั้น (Abstract Class คือคลาสที่เตรียมขึ้นเพื่อใช้ในการสืบทอดเท่านั้น) แล้วให้คลาส หมู หมา แมว เดิมทั้งสามไปสืบทอดมาอีกต่อหนึ่ง โดยตั้งชื่อคลาสนามธรรมว่า สัตว์ ดังรูปที่ 2) ทีนี้โค้ดของเขาก็ไม่ซ้ำอีกแล้ว
>> และโดยหลักการทั่วไป กลุ่มคลาสใดๆที่มีเมธอดหรือพฤติกรรมซ้ำกัน เมธอดหรือพฤติกรรมเหล่านั้นมักถูกบัญญัติให้เป็นข้อตกลงหรือกติกาที่ใช้ Interface (สีฟ้า) เข้ามากำหนดก่อน หลังจากนั้นจึงให้คลาสใดๆที่ใช้ข้อตกลงหรือกติกานี้มา implement อีกทีหนึ่ง ในที่นี้สมชายให้คลาสนามธรรมที่ชื่อ สัตว์ ไป implement เจ้า Interface ที่เขาได้สร้างและตั้งชื่อว่า สัตว์ เช่นกัน ตามรูปที่ 3) เรียกได้ว่าจัดมาเต็มองค์ประกอบ
>> สัตว์ทั้งสามตัวของสมชายเคลื่อนไหวด้วยการเดินสี่ขาได้เป็นอย่างดี หัวหน้าของเขาพอใจในผลงานมาก หลังจากขายเกมนี้ไปแล้วไม่นาน สมชายก็ได้รับคำร้องขอให้เพิ่มสัตว์อีกสองตัวเข้าไปในเกม นั่นคือ งู กับ นก
>> ครั้นอีตาสมชายจะให้งูกับนกเดินสี่ขาเหมือน หมู หมา แมว มันก็ได้นะ แต่ว่า... งูที่ไหนมีขา? แล้วนกก็ไม่เคยมีสี่ขา? สมชายงานงอก เพราะจะยกเซตเดิมมาหากินไม่ได้แล้ว ดังรูปที่ 4)
>> สมชายจึงสร้างคลาสนามธรรม (Abstract Class) ขึ้นมาใหม่ ให้เป็นของงูและนกตามที่เขาต้องการ ตามรูปที่ 5) แน่นอนว่าเขาไม่ลืมที่จะบัญญัติข้อตกลงที่ว่า งูกับนกเป็นสัตว์ชนิดหนึ่ง ดังนั้นจึงมี Interface เปล่าๆเพิ่มเข้ามาด้วย
>> และเพื่อให้งานใหม่นี้เข้ากับงานเก่าได้ เขาจึงตัดสินใจเปลี่ยนชื่อคลาสนามธรรมที่เป็นของ หมู หมา แมว ให้สอดคล้องกับคลาสนามธรรมใหม่ที่เป็นของงูและนก ได้ตามรูปที่ 6) สมชายส่งงานแบบจัดเต็มเหมือนเคย งูกับนกที่เพิ่มเข้ามาภายหลังจึงสามารถทำงานกับ หมู หมา แมว กลายเป็นเกมที่สนุก + มีเพื่อนใหม่เพิ่มเข้ามาได้เรื่อยๆ เรียกได้ว่าเป็นภาคเสริมที่สร้างความฮือฮาเป็นอย่างยิ่ง
>> งานนี้สมชายรับทรัพย์กลับบ้านพาสาวเที่ยวสบายใจแฮ สวัสดีครับ
*** ประโยชน์ทั้งหมดที่ได้รับ ยกให้กับพี่ชายที่ทำงานหนักคนหนึ่ง นับถือๆ
: ทำไมเครื่องที่มีหน่วยความจำเยอะ จึงทำงานได้เร็วกว่า?
อย่างที่เราทราบกันไปแล้วว่า หนึ่งหน้าที่เราเห็นของ app บนโทรศัพท์ android นั้นคือหนึ่ง activity ที่มี activity life-cycle เป็นของตัวเอง
- รูปที่ ๑ ได้แสดงให้เห็นว่า เมื่อเริ่มต้น app ใดๆจะเกิดการสร้าง process ขึ้นมาก่อน จากนั้นเริ่ม thread ของมัน เพื่อทำงานประมวลผลใดๆตามวัตถุประสงค์ของ app (สมมติชื่อว่า process A)
- รุปที่ ๒ ได้แสดงให้เห็นว่า android มีกระบวนการจัดการลำดับเหตุการณ์หรือประวัติ ในที่นี้ขอเรียกว่าปม history
- รูปที่ ๓ เกิดต่อเนื่องจากรูปที่ ๑ และ ๒ เริ่มจากสร้างหน้า activity1 ขึ้นมา เก็บประวัติการใช้ข้อมูลลง history1 หน้าดังกล่าวนี้ก็จะแสดงเป็นหน้าแรกของ app ตัวที่เรากำลังสนใจอยู่
เมื่อใดก็ตามที่เกิดการเปลี่ยนหน้า ย่อมเกิดการสร้างหน้าใหม่ขึ้นในครั้งแรก (first time) และเกิด activity ใหม่เช่นกัน
- รูปที่ ๓ นอกจากหน้าที่หนึ่งแล้ว สมมติเป็นเมนูเล่นเกม พอเราเลือกเมนูใดๆ เจ้า app ก็จะแสดงหน้าถัดไป ซึ่งก็จะสร้างปม history2 และ activity2 ตอนนี้เราจะมีทั้งหน้าแรก (activity1) และหน้าที่สอง (activity2) เก็บไว้ในหน่วยความจำ โดยหากว่าหน่วยความจำของเครื่องเราเพียงพอ ทั้งสอง activity ก็จะคงอยู่ต่อไป
- รูปที่ ๔ ในกรณีที่มีหน่วยความจำไม่มาก ก็จะเป็นโชคร้ายของ activity1 หรือหน้าแรกที่จะต้องถูกทำลายไปก่อน การทำลายในที่นี้ก็คือการคืนหน่วยความจำให้ระบบหรือก็คือตัวเครื่อง เพื่อที่ระบบจะนำไปใช้สอยอย่างอื่น (โดยปกติระบบของ android ทำงานส่วนนี้ให้อัตโนมัติ แต่อาจไม่สะใจผู้สร้าง app ที่อยากควบคุมหน่วยความจำเอง)
- รูปที่ ๕ เป็นเหตุการณ์ที่ app ปัจจุบันไปเรียก app อื่นให้ทำงานต่อจากมัน ซึ่งหากว่าหน่วยความจำของเครื่องไม่พอแล้วล่ะก็ เจ้า activity1 และ activity2 ก็จะถูกจัดการ เหลือไว้เพียงปม history เท่านั้น
ภายหลังหากมีการกดปุ่มย้อนกลับ ระบบ android ก็จะเข้าไปอ่านข้อมูลใน history นั้นๆเพื่อนำมันมาใช้กับ activity ของ history ปมดังกล่าว (ในที่นี้คือ history2 จะถูกอ่านและสร้าง activity2 อีกครั้ง หากกดปุ่มย้อนกลับอีก จึงเป็นคราวของ history1 และ activity1)
- รูปสุดท้าย รูปที่ ๖ หน่วยความจำเหลือน้อยมากจริงๆ ก็เป็นได้ว่าทั้ง app อาจถูกทำลายลงไป เพื่อที่ app ใหม่ซึ่งถูกเรียกในปัจจุบันนี้จะได้ใช้หน่วยความจำที่ว่านี้แทนครับ
ทราบอย่างนี้แล้ว เครื่องที่มีหน่วยความจำมากจึงราคาสูง เพราะประสิทธิภาพทั้งหมดก็เพื่อความราบรื่นและรวดเร็วนั่นเอง
คืนนี้สวัสดีครับ
: Android activity life-cycle
รูปนี้นำมาจาก www.edureka.in แล้วเพิ่มเติมส่วนที่กำลังมุ่งเน้นลงไป ใครที่หัดเขียน Android ใหม่ๆควรจะทำความรู้จักกับ Android activity life-cycle ให้ดีนะครับ เพราะมันคือกิจกรรมพื้นฐานที่เกิดขึ้นตลอดเวลาตั้งแต่เปิดแอพ (open application) ไปจวบกระทั่งปิดแอพ (destroy application) เลยทีเดียว
เราเรียกแต่ละหน้าของแอพว่า activity หรือกิจกรรม และกำหนดให้ว่าหนึ่งหน้านั้นคือหนึ่งกิจกรรม (1:1)
แต่ละกิจกรรม (activity) จะมีสถานะ (state) ที่อยู่ในสภาวะสมมติ หลักๆดังนี้ครับ
- starting
- running
- paused
- stopped
- destroyed
สภาวะสถานะสมมติดังกล่าวเกิดขึ้นอันเนื่องมาจากพฤติกรรมของคลาส (ที่เป็นลูกของคลาส Activity) เกิดการกระทำต่างๆนานา โดยทั่วไปแล้วดังนี้
- เมื่อเปิดเกมคุกกี้รัน (สมมติๆ) จะเกิด onCreate() >> onStart() >> onResume() จากนั้นจะเข้าสู่สถานะ running เมนูต่างๆจะปรากฏให้เห็น
- ขณะที่เล่นเกมอยู่ในสถานะ running จู่ๆแบตเตอรี่จะหมด เกิดกล่องแจ้งเตือนพลังงานเหลือน้อยเต็มที เจ้ากล่องที่ว่าจะบังคับให้ onPause() เข้าสู่สถานะ paused เกมจะถูกกล่องบังไว้ชั่วคราว (บังแค่กลางจอ) พอจอที่ว่าถูกปิดลง (เราปิดเองหรือเสียบไฟเลี้ยงมัน) จะเกิด onResume() เพื่อกลับไปยังสถานะ running ใหม่ เล่นเกมต่อได้เลย
- เล่นไปสักพักชักเบื่อ จึงกดปุ่มตรงกลางของโทรศัพท์ จะเกิด onPause() ทำให้อยู่ในสถานะ paused ตามด้วย onSaveInstaceState() เพื่อบันทึกการเล่นล่าสุด ก่อนจะ onStop() เพื่อยุติการเล่น (แต่หน่วยความจำของเกมในเครื่องยังคงอยู่) และเข้าสู่สถานะ stopped ในที่สุด
- ทีนี้ไม่มีอะไรทำ พลันเกิดอาการกระสันอยากเล่นเกมต่อจากที่ค้างไว้ ก็กดไอคอนมัน ทำให้เกิด onRestart() >> onStart() >> onResume() เข้าสู่สถานะ running เล่นเพลินไปสามวัน (เวอร์)
- กระทั่งกดปุ่มที่สาม (ปุ้มย้อนกลับ) จะทำให้เกิด onPause() อยู่ในสถานะ paused หยุดชั่วคราว onSaveInstanceSate() บันทึกค่า และ onStop() ยุติ จากนั้นเข้าสู่สถานะ stopped
- หรือแบตเตอรี่หมด (อุต๊ะ!) จะทำให้เกิด onPause() อยู่ในสถานะ paused และเข้าสู่สถานะ destroyed ทันที
(อ่าว!ไม่ save ที่เล่นมาสามวันหายหมด เพราะหน่วยความจำจะคืนให้ระบบหมดสิ้น เสียใจด้วยนะ อิอิ)
สรุป หัวใจของเรื่องนี้ก็คือวงจรชีวิตของเหล่าสถานะ (state) ที่ดำเนินอยู่ตลอดเวลาตั้งแต่เกิดจนตาย แต่ละกิจกรรม (activity) มีเหล่าสถานะเป็นของตัวเอง และแต่ละแอพประกอบไปด้วยหนึ่งหรือหลายกิจกรรม (ประกอบไปด้วยหนึ่งหน้าหรือหลายหน้า) ทั้งนี้ยังคงมีพฤติกรรม (onCreate(), onStart() ฯลฯ) อีกมากมายซึ่งคงจะได้ศึกษาต่อไป
โพสต์นี้ลาแล้วครับ สวัสดี
: Prototype กับการสืบทอด
>> part สุดท้ายของเรื่อง ออบเจ็กต์ & คลาส ว่ากันด้วยพร็อพเพอร์ตี้ที่ชื่อ prototype (เขียนอย่างนี้เลย) ซึ่งมีชนิดเป็น Prototype (โปรดอย่าได้สับสนนะครับ ชนิดมันคือ Prototype และมันชื่อ prototype) เจ้าพร็อพเพอร์ตี้นี้มีสมบัติในการแชร์พื้นที่ใช้ร่วมกันในทุกๆออบเจ็กต์ที่สร้างมาจากคลาสเดียวกัน ยกตัวอย่างจากคลาส MyMath ของ part ก่อน
function MyMath(x, y) {
this.x = x;
this.y = y;
}
ทีนี้พอเราต้องการสร้างเมธอดไว้ใน prototype ก็ให้เรียกชื่อคลาสนั้นมาเขียนต่ออย่างนี้ (เขียนไว้นอกคลาสเลยนะ)
MyMath.prototype.getSummation = function() {
return this.x + this.y;
}
จะสังเกตได้ว่า เราไม่ได้สร้างเมธอดไว้ในคลาสอีกแล้ว เมธอด getSummation นี้จึงไม่ได้เป็นของออบเจ็กต์ตัวใดตัวหนึ่งภายหลังจากถูก new แต่จะเป็นของทุกๆออบเจ็กต์ที่ถูก new จากคลาส MyMath หรือก็คือจากคลาสเดียวกันครับ กล่าวได้ว่ามันถูกแชร์ใช้ร่วมกันนั่นเอง ทดสอบโดยเพิ่มโค้ดต่อไปนี้เข้าไป
MyMath.prototype.getSummation = function() {
document.write( "getSummation is a Prototype<br/>" );
return this.x + this.y;
}
จากนั้นสร้างออบเจ็กต์มาสองตัว
var point1 = new MyMath(10, 20);
var point2 = new MyMath(100, 20);
point1.getSummation();
point2.getSummation();
ผลลัพธ์ที่ได้คือ
getSummation is a Prototype
getSummation is a Prototype
>> หลักการนี้คล้ายคลึงกับเรื่อง static ของจาวาแต่ไม่ใช่หรอกนะ มันเป็นเรื่องของการสืบทอดล้วนๆ (Inheritance) เพราะทุกคลาสที่ถูกสร้างขึ้นในภาษาจาวาสคริปต์ จะมีพร็อพเพอร์ตี้ชื่อ prototype มาให้เสมอ ดังนั้นทุกคลาสที่ถูกสร้างขึ้นจึงเป็นลูก (is a sub-class) ของคลาสชื่อ Object ครับ
>> ข้อดีของการสืบทอดคือการนำทรัพยากรใดๆที่มีอยู่แล้วมาใช้ใหม่ คลาสลูกที่สืบทอดสมบัติจากพ่อแม่จะมีทุกอย่างที่พ่อแม่มี ทำให้เราสามารถเขียนพฤติกรรมหรือการกระทำของเมธอดในคลาสลูกเพิ่มเติมหรือทดแทนของเดิม (override) ซึ่งเป็นของพ่อแม่ได้อีกด้วย
>> ตัวอย่างต่อไปนี้แสดงการ override เมธอดที่ชื่อ greet ของคลาส Person โดยคลาส Employee ขั้นตอนแรกให้สร้างคลาส Person ขึ้นมาก่อน
var Person = function() {
this.canTalk = true;
this.greet = function() {
if (this.canTalk) {
console.log("Hi, I'm " + this.name);
}
};
};
จากนั้นสร้างคลาส Employee
var Employee = function(name, title) {
this.name = name;
this.title = title;
this.greet = function() {
if (this.canTalk) {
console.log("Hi, I'm " + this.name + ", the " + this.title);
}
};
};
จากนั้น override เมธอด greet ของคลาส Person ด้วยการใช้พร็อพเพอร์ตี้ prototype
Employee.prototype = new Person();
ทดสอบ
var bob = new Employee('Bob', 'Builder');
bob.greet();
ผลลัพธ์คือ
Hi, I'm Bob, the Builder
>> หวังว่าจะไม่ยากจนเกินไป ใครเข้าใจได้แสดงว่ามีพื้นฐานและรู้หลักการ Object-oriented พอสมควร ใครที่ไม่เข้าใจก็ไม่ต้องกังวลไปนะครับ เรื่องนี้เป็นเรื่องเฉพาะที่เน้นหนักในการ design ค่อยๆเรียนรู้กันไป สวัสดีครับ
>> อ่านเพิ่มเติมได้ที่
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
*** หมายเหตุ
คำสั่ง console.log แสดงผลลัพธ์ทาง console ของบราวเซอร์นะครับ กด F12 จึงจะเห็น แต่ถ้าไม่เข้าใจมันจะเปลี่ยนเป็น document.write แทนก็ได้
: คลาส
>> จาก part ที่แล้ว เราสร้างออบเจ็กต์ได้แล้ว คราวนี้เราจะสร้างสิ่งที่เรียกว่า 'คลาส' ครับ คลาสคืออะไร?
ตอบ จาวาสคริปต์เป็นภาษาเชิงวัตถุก็จริง (Object-oriented) แต่เป็นแบบ Prototype-based ครับไม่ใช่ Class-based กล่าวคือ เธอไม่ได้มีคลาสเป็นจริงเป็นจังและชัดเจนเหมือนภาษาจาวาหรือภาษาซีชาร์ป เธอมีฟังก์ชันรูปแบบหนึ่งที่เธอเรียกว่า Constructor Function เป็นตัวกำหนดโครงสร้างของออบเจ็กต์ มันเสมือนเป็นคลาสหรือเรียกว่าเทมเพลต (Template) ของเธอ
>> อะไรคือ Constructor Function?
ตอบ ก็ฟังก์ชันของภาษาจาวาสคริปต์ที่เราได้เรียนรู้ผ่านมานั่นแหละจ๊ะ สมมติเรามีข้อมูลตามนี้ (ตัวอย่างจาก part ก่อน)
- www.hotmail.com
username: pros
password: admin
เราสามารถนำมาสร้างเป็นคลาสได้ดังนี้
function Account( addressName, username, password ) {
this.addressName = addressName;
this.username = username;
this.password = password;
}
เมื่อมีคลาสหรือเทมเพลตที่เป็นโครงสร้างของออบเจ็กต์แล้ว ต่อไปก็เอามาใช้ เริ่มจากการประกาศตัวแปรออบเจ็กต์
var myAccount = new Account( "www.hotmail.com", "pros", "admin" );
ตอนเรียกใช้งานก็ว่า
document.write( myAccount.addressName ); ผลลัพธ์คือ www.hotmail.com
document.write( myAccount.username ); ผลลัพธ์คือ pros
document.write( myAccount.password ); ผลลัพธ์คือ admin
เมื่อมีหลายบัญชีก็สามารถ new เพิ่มได้ตามใจอยาก
var myAccount2 = new Account("www.gmail.com", "panda", "unlockme");
var myAccount3 = new Account("www.facebook.com", "Natcha", "lovely");
>> เราสามารถเพิ่มฟังก์ชันเข้าไปในคลาสได้ ตามทฤษฎีของหลักการเชิงวัตถุ เราจะเรียกฟังก์ชันที่มีความสัมพันธ์กับคลาสซึ่งเป็นส่วนหนึ่งที่ใช้อธิบายการกระทำของคลาสนั้นๆว่า เมธอด
>> สมมติว่าเราต้องการสร้างคลาสเกี่ยวกับการคำนวณไว้ใช้เอง และอยากตั้งชื่อว่า my math ให้สามารถคำนวนการบวก-ลบตัวเลขสองจำนวนได้ เราก็จะเอาชื่อนี้มาเขียนเป็น constructor function ได้ดังนี้
function MyMath(x, y) {
this.x = x;
this.y = y;
}
***หมายเหตุ คีย์คำว่า this ใช้กับเรื่องนี้โดยเฉพาะ มันหมายความว่า this.x เป็นชื่อตัวแปรของคลาส MyMath ส่วน x เฉยๆเป็นพารามิเตอร์คอยรับค่าที่ส่งเข้ามา สรุปได้ว่า this.x กับ x เฉยๆคนละหน้าที่กัน คนละความหมายกัน จึงไม่ใช่ตัวแปรตัวเดียวกัน
มันสามารถบวกได้ใช้ไหม ตั้งชื่อเมธอดว่า getSummation แล้วเขียนเพิ่มเข้าไปสิ
function MyMath(x, y) {
this.x = x;
this.y = y;
this.getSummation = function() {
return this.x + this.y;
}
}
มันสามารถลบได้ด้วยใช่ไหม ตั้งชื่อเมธอดว่า getSubtraction แล้วเขียนเพิ่มเข้าไป
function MyMath(x, y) {
this.x = x;
this.y = y;
this.getSummation = function() {
return this.x + this.y;
}
this.getSubtraction = function() {
return this.x - this.y;
}
}
ทีนี้ก็เอาไปใช้งาน
var point = new MyMath( 10, 20 );
document.write( point.getSummation() ); ผลลัพธ์คือ 30
document.write( point.getSubtraction() ); ผลลัพธ์คือ -10
>> อา...พอแล้วสำหรับ part ย่อยนี้ ต่อไปจะนำเสนอเรื่องสุดท้ายของคลาส ที่เกี่ยวกับการใช้พื้นที่หรือหน่วยความจำร่วมกันผ่านการสร้างเมธอดที่เรียกว่า prototype method หรือก็คือการแชร์เมธอดร่วมกันนั่นเองครับ
: ออบเจ็กต์
>> ในที่สุดก็มาถึงเรื่องท้ายๆของภาษาจาวาสคริปต์แล้ว (แม้ว่าจะข้ามไปบางเรื่อง เช่น 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
