Object Oriented JavaScript

โดยปกติเราสามารถเขียน JavaScript ได้ 2 รูปแบบ ดังนี้ คือ

1. แบบProcedural

function sayHelloWorld(name){
    alert('Hello '+name);
}

sayHelloWorld('Peter');

2. แบบ Object Oriented

var World = function(){
     this.sayHello = function(name){
        alert('Hello '+name);
    }
}

var world = new World();
world.sayHello('Peter');

การเขียนในรูปแบบของ Object Oriented เหมาะสำหรับการเขียน Application ที่มีความซับซ้อนขึ้นมาหน่อย จะสังเกตุว่าการสร้าง Class ในภาษา JavaScript จะดูแปลกๆหน่อย เพราะสร้างขึ้นมาจาก Function ประโยชน์ของการเขียน JavaScript ในแบบ Object Oriented คือสามารถดูแลแก้ไขได้ง่าย รองรับการ Encapsulate โดยการสร้าง Property และ Method ช่วยป้องกันปัญหา Global Pollution เพราะเราสามารถประกาศตัวแปรให้อยู่เฉพาะใน Scope ของ Class เท่านั้น

ในภาษา JavaScript ไม่มี Private หรือ Public directive ให้ใช้เหมือนในภาษาอื่นๆ แต่เราสามารถจำลองการสร้าง private variable ได้โดยการประกาศ local variable ไว้ภายใน Class สำหรับ variable ตัวไหนที่เราต้องการให้สามารถ access ได้แบบ Public เราก็สามารถประการให้เป็น property ไปซะ อย่างเช่น

var World = function(){
    var counter = 10;
     this.color = 'red';
     this.sayHello = function(name){
        alert('Hello '+name);
    }
}

จากตัวอย่าง เราจะไม่สามารถ access ตัวแปรที่ชื่อว่า counter ได้จากภายนอก Class เนื่องจากเป็น Local Variable ที่มองเห็นได้เฉพาะภายใน Scope ของ Class เท่านั้น แต่สำหรับตัวแปรที่ชื่อว่า this.color และ method ที่ชื่อว่า this.sayHello() นั้น ถือว่าเป็นตัวแปรประเภท Public ซึ่งเราสามารถ access ได้จากภายนอก Class โดย access ผ่าน instance ของ Class อย่างเช่น

var world = new World();
world.color = 'blue';
world.sayHello('Peter');

จากตัวอย่าง เราสร้าง instance ขึ้นมาจาก Class World โดยเก็บ instance ที่สร้างขึ้นมาไว้ในตัวแปรที่ชื่อว่า world จากนั้นเราก็จะสามารถเรียกใช้งาน property และ method ที่อยู่ภายใน Class World ได้ทั้งหมด แต่เราจะไม่สามารถ access ตัวแปรที่ชื่อว่า counter ได้ เนื่องจากเป็น local variable ที่มองเห็นได้เฉพาะภายใน Class เท่านั้น สำหรับการเรียกใช้งาน property และ method ภายใน Class สามารถทำได้ โดยเรียกใช้งานผ่านตัวแปรที่ชื่อว่า this ซึ่งใช้แทน instance ของ class นั้นๆ

หากดูเผินๆ เหมือนกับว่าภาษา JavaScript สามารถทำ inheritance ได้ แต่แท้ที่จริงแล้วภาษา JavaScript ไม่มีความสามารถในการทำ inheritance โดยตรง แต่จำลองการทำ inheritance ผ่านกระบวนการ copy คุณสมบัติจาก Object ตัวอื่นมาไว้ใน prototype ของตัวเอง และอาศัยการค้นหา method ที่ประกาศเอาไว้ใน prototype chain ดังตัวอย่างต่อไปนี้

World = function(){
    this.sayHello = function(){
        alert('say hello');
    }
}

MyClass = function(x){
    this.x = x;
}

MyClass.prototype = new World();

var obj = new MyClass(10);
obj.sayHello();

จากในตัวอย่าง เราจะเห็นได้ว่า MyClass ทำการสืบทอดคุณสมบัติมาจาก World ทำให้ MyClass สามารถเรียกใช้งาน sayHello() (ซึ่ง implement เอาไว้ใน World) ได้ หากเราลอง debug object ผ่าน Firebug ดู เราก็จะเห็นว่า method ที่ inherit มา ถูก copy มาไว้ที่ _prototype ซึ่งทำให้ class ของเราสามารถเรียกใช้งานได้ ซึ่งดูคล้ายกับการ inherit แต่ที่จริงแล้วเป็นการ copy

Simple JavaScript Inheritance

สำหรับอันนี้เป็นบทความเกี่ยวกับการใช้งาน inheritance ในภาษา JavaScript ที่มีชื่อว่า "Simple JavaScript Inheritance" เขียนโดย John Resig (เป็นคนที่่พัฒนา jQuery) มีเทคนิคหลายอย่างที่น่าศึกษาครับ สำหรับผู้ที่สนใจสามารถเข้าไปอ่านบทความได้ที่นี่ครับ http://ejohn.org/blog/simple-javascript-inheritance/

แหล่งที่่มา: http://ejohn.org/blog/simple-javascript-inheritance/

JavaScript OOP - Inheritance in JavaScript

เกมส์ที่ชื่อว่า Destroy All Human (ถ้าหากว่าใครเคยเล่น) คือ ในเกมส์เราจะเล่นเป็น Alien ซึ่งเราสามารถปลอมตัวเป็นมนุษย์โดยจับตัวมาแล้วเข้าสิงได้ ซึ่ง สำหรับการ ineritance ใน JavaScript ก็คล้ายๆกัน คือ ถ้าชอบ Object ตัวไหน ก็สามารถเอา Prototype ตัวเองไปจิ้มเข้าที่ Object ตัวนั้น ตัวเองก็จะสามารถกลายไปเป็น Object ตัวนั้นได้ ถ้ายังจำได้ ในบทความครั้งก่อนผมพูดถึ่งเรื่องการสร้าง Object ใน JavaScript ไว้ว่า Object ที่ถูกสร้างขึ้นโดยคำสั่ง new จะมี prototype property เหมือนกับ prototype property ของ Constructor การที่จะเข้าใจในเรื่องของการ inheritance ในภาษา JavaScript เราจะต้องเข้าใจวิธีการทำงานของ prototype ก่อน

ทุกๆครั้งที่เราเรียกใช้งาน property ของ object JavaScript จะทำการ Check ค่า property ดังกล่าวภายในตัว object เองก่อน ถ้าหากไม่พบ ก็จะไปหาต่อที่ prototype property ของ Object นั้นๆ ถ้ายังไม่พบอีก ก็จะไปหาต่อที่ Object ที่มีการ reference ไว้ใน prototype property (prototype ในภาษา JavaScript สามารถ reference ไปยัง Object อื่นได้ สำหรับในกรณีที่ต้องการใช้ Object นั้นเป็น prototype) ซึ่งกระบวนการค้นหาดังกล่าวจะทำไปเรื่อยๆจนกว่าจะพบ หรือไม่ก็สิ้นสุด prototype chain

หากเราเข้าใจหลักการทำงานของ Prototype Chain แล้ว เราก็จะสามารถเข้าใจเรื่อง inheritance ใน JavaScript ได้ไม่ยาก ซึ่งวิธีการ inheritance ใน JavaScript สามารถทำได้โดยการกำหนดให้ prototype property ของ Object มีค่าเท่ากับ new Instance ของ Object ที่ต้องการ inherit ดังตัวอย่างต่อไปนี้

จากในตัวอย่าง ให้สังเกตุว่าเรากำหนดให้ BankAccount ทำการ inherit จาก Account โดยกำหนดให้ BankAccount.prototype มีค่าเท่ากับ new Account(0,0) (New Instance ของ Account) ส่วนใน Constructor ของ BankAccount เราสั่งให้มีการเรียก Constructor ของ Parent Class (ซึ่งในที่นี้คือ Account) ให้สังเกตุว่าเราเรียกโดยใช้คำสั่ง call ของ JavaScript เพื่อสั่งให้ Constructor ของ Account ทำงาน โดยส่ง this (invoking object) เป็นค่า parameter ตัวแรก ส่วน amount และ lowest เป็นค่าที่ส่งให้ ตามที่กำหนดไว้ใน Account Constructor

JavaScript OOP - Create an Object

JavaScript เป็นภาษาในลักษณะที่เรียกว่า Object Based Language หรือบางครั้งก็เรียกกันว่า Prototype Based Language (เพราะไม่มีการ Class) เราสามารถสร้าง Object ได้โดยวิธีการเพิ่ม properties เข้าไป ซึ่ง properties ในที่นี้ อาจจะเป็น data หรือ function ก็ได้ ซึ่งทำให้ JavaScript เป็นภาษาที่มีความยืดหยุ่นสูง เพราะสามารถเพิ่ม property, method หรือแม้กระทั่งเปลี่ยน binding ของ method ได้ในขณะ Run Time สำหรับวิธีการ define Class ใน JavaScript สามารถทำได้โดยใช้การสร้าง Constructor Function ตามตัวอย่างดังต่อไปนี้

สังเกตุว่าเราจะตั้งชื่อ Constructor ตามชื่อ Class ที่เราต้องการ และการ initialize ข้อมูลภายใน Class เราจะทำผ่านตัวแปรที่ชื่อว่า this  ส่วน method ที่เราสร้างขึ้น เราจะกำหนดผ่าน prototype ให้สังเกตุว่าเราจะไม่กำหนดผ่าน this เพราะการกำหนดผ่าน this จะทำให้เกิดการ binding method reference ใหม่ทุกครั้งที่มีการสร้าง instance ซึ่งนอกจากจะเสียเวลาแล้ว ยังสิ้นเปลือง memory โดยไม่จำเป็น (เพราะ method ที่ assign ผ่าน this แบบนี้ จะมี reference ที่แตกต่างกันในแต่ละ instance ซึ่งจะต่างจาก method ที่ assign ผ่าน prototype ซึ่งทุกๆ method ในแต่ละ instance จะมี reference เดียวกัน) สำหรับการนำ Object ไปใช้งาน สามารถทำได้ดังต่อไปนี้

จากตัวอย่างข้างต้น เมื่อเราทำการเรียก Constructor Function ด้วย new สิ่งที่เกิดขึ้นก็คือ JavaScript จะทำการกำหนด property ที่ชื่อว่า prototype ของ object ที่สร้างขึ้นมาใหม่ เข้ากับ prototype ของ Constructor ที่เราสร้างขึ้นก่อนหน้า ทำให้ Object ที่สร้างขึ้นมาใหม่ มี properties เดียวกันกับที่กำหนดไว้ใน Constructor หรือถ้าจะให้เข้าใจง่ายขึ้นมาหน่อยก็คือ instance ของ Class ที่สร้างขึ้นโดยคำสั่ง new จะมี property เหมือนกับที่กำหนดไว้ใน prototype ของ Constructor นั่นเอง

ก่อนที่จะจบบทความนี้ อยากให้สังเกตุว่า Function ค่อนข้างเป็นสิ่งที่มีบทบาทสำคัญในภาษา JavaScript อย่างที่เรามักจะเห็นกันตามหนังสือหรือในบทความ ที่มักจะเรียก Function ใน JavaScript ว่า First Class Citizen ซึ่งในที่นี้มีความหมายว่า JavaScript มองเห็น Function เป็น Object ตัวหนึ่ง ที่สามารถ Create ได้ในขณะ Run Time, สามารถใช้เป็น Parameter ได้, สามารถถูก Return ออกจาก Function ได้ หรือสามารถ Assign ให้ Variable ก็ทำได้

แหล่งที่มา

1. http://devedge-temp.mozilla.org/viewsource/2001/oop-javascript/
2. http://en.wikipedia.org/wiki/First-class_citizen