: คลาส
>> จาก 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 หรือก็คือการแชร์เมธอดร่วมกันนั่นเองครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น