JavaScript Note #1 : เขียนเทียบกับ Java

ผมเป็นคนเขียน javascript ไม่เป็นเลย ถ้าแค่เขียนแบบงูๆ ปลาๆ เช่น เขียนกับ jQuery ก็พอได้ (ทำแบบนี้ใน zk บ่อย) แต่ตอนนี้มีงานที่ต้องอาศัย javascript แล้ว ไม่รู้มันจริงๆ จังๆ ก็คงไม่ได้ซะด้วย เลยนั่งคิดว่าจะทำยังไงดีน้อ เอาวะเขียนเทียบกับภาษาที่ตัวเองถนัดสุด สำหรับผมมันก็คือ java นั้นเอง

เรื่องของ class

เนื่องจากใน javascript มันไม่มี keyword class ให้เห็นเลย ทุกอย่างเป็น function เพราะฉะนั้น javascript จะใช้วิธีทำ function constructor เอา เมื่อลองเขียนกับ java ที่มันเป็น class-base ต้องขึ้น class ก่อนเลยจะได้ประมาณนี้

javascript
javascript (compile from coffeescript)
java



function Employee() {
    this.name = "";
    this.dept = "general";
}


var Employee;

Employee = (function() {

  function Employee() {
    this.name = "";
    this.dept = "general";
  }

  return Employee;

})();


class Employee {
    private String name;
    private String dept;
   
    public Employee() {
         this.name = "";
         this.dept = "general";
    }
}

เนื่องจากว่า javascript เป็น dynamic typing มันเลยไม่ต้องกำหนด type ก่อนและมันไม่มีเรื่องของการเข้าถึง (access modifier) เลยไม่ต้องกำหนดเหมือน java ส่วนการสร้าง instance นั้นก็จะทำได้เหมือนกับ java เลยโดยการใช้ keyword "new" และที่น่าสนใจอีกเรื่อง ซึ่งอาจารย์ชาญวิทย์ แก้วกสิ (@chanwit) เป็นคนแนะนำมาโดยการใช้ coffeescript compile ให้ได้ javascript ก็ทำให้รู้ว่าเราสามารถเขียน javascript แล้ว new object ได้หน้าตาเหมือนกันก็ได้

source coffeescript:

class Employee 
  constructor: ->
    @name = ""
    @dept = "general"

การ inheritance และ subclass

การทำ inheritance ใน javascript นั้นเป็นแบบ prototype base โดยทุก class function (เค้าเรียกอย่างนี้หรือป่าว) จะมี property ชื่อ prototype โดยเราจะทำการกำหนด object ให้กับ property prototype เพื่อบอกให้รู้ว่า extends มาจาก class อะไร (ใน javascript  นั้นเราจะใช้ทุกอย่างเป็น object ทั้งหมด) แต่ใน java ซึ่งเป็น class base นั้นจะใช่ keyword extends แทน 

javascript
java



function WorkerBee(name, dept, projects) {
  this.base = Employee;
  this.base(name, dept);
  this.projects = projects || [];
}
WorkerBee.prototype = new Employee;



class WorkerBee extends Employee {
  private String[] projects;
  public WorkerBee(String name, String dept, 
           String[] projects) {
    super(name, dept);
    this.projects = projects;
  }
}

สังเกตได้ว่าจากข้างโค้ด java ข้างบนจะเห็นว่าผมได้สั่ง super เพื่อที่จะส่งค่าพวกนี้ไปให้ class แม่ ใน javascript นั้นจะใช้ตัวแปรนึงเก็บ function ของ class แม่เอาไว้แล้วก็ส่งค่าไปให้ตามนั้น [เอาไว้แค่นี้ก่อนเดี๋ยวจะกลับมาแก้]