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

: 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 แทนก็ได้