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