การกำหนดตำแน่งของเลขทศนิยมใน Javascript

การกำหนดเลขนัยสำคัญหรือการกำหนดตำแหน่งของเลขทศนิยมใน JavaScript นั้นสามารถทำได้ง่ายมากโดยการใช้ toFixed() มาจากคำว่า Fixed point หรือภาษาไทยเรียกว่าจุดตรึง ซึ่ง toFixed() เป็น method ที่อยู่ใน Number.prototype นั่นก็หมายความว่า ตัวแปรที่มี type เป็น number(ใน JavaScript นั้น ไม่ว่าจะเป็นจำนวนเต็มหรือทศนิยมล้วนแล้วแต่มี type เป็น number ทั้งสิ้น) ล้วนแล้วแต่สามารถเรียก method toFixed() ขึ้นมาใช้งานได้ โดยใน toFixed() จะรับ argument มา 1 ตัว เป็นจำนวนทศนิยมที่ต้องการ

1
2
var pi = 3.14159265359;
pi.toFixed(2);

ผลลัพธ์ที่ได้จะออกมาเป็น 3.14 และถ้าเกิดเราเอาตัวเลขที่เป็นจำนวนเต็มมาเรียก method toFixed() จะเป็นการใส่ 0 เข้าไปเพิ่ม ยกตัวอย่างเช่น

1
2
var x = 10;
x.toFixed(2);

ผลลัพธ์ที่ได้จะออกมาเป็น 10.00 สิ่งที่สำคัญอีกอย่างก็คือสิ่งที่ได้ออกมาจาก toFixed() จะได้ผลลัพธืที่มี type เป็น string ไม่ใช้ number ดังนั้นถ้าเราเกิดไม่อยากได้ตัวเลข 0 เราก็สามารถตัด 0 ออกได้แบบนี้

1
2
var x = 10;
x.toFixed(2).replace('.00', '');

หรือถ้าจะให้ครอบคลุมมากขึ้นก็ต้องอาศัย regular expression เข้ามาช่วยในการตัด 0 ที่อยู่ด้านท้ายออก

1
2
var x = 1.3;
x.toFixed(4).replace(new RegExp('[.]?0*$'),'');

จากตัวอย่างจะเห็นว่า ค่าที่ได้จาก x.toFixed(4) จะได้เป็น 1.3000 เพราะเราส่ง 4 เข้าไปใน toFixed() หลังจากนั้นเราจะใช้ .replace แล้วส่ง regular expression เข้าไปเพื่อตัด 0 ออก ส่วน regular expression นี้ก็ไม่มีอะไรมากแค่ถ้ามีจุดอยู่ก่อนหน้า 0 ให้เอาจุดออกด้วย โดยใส่เป็น optional ซะ ไว้จะมาลง detail เรื่องการเขียน regular expression อีกที สำหรับวันนี้หวังว่าคงได้ประโยชน์กันไปบ้างไม่มากก็น้อย

การ casting ใน JavaScript ตอนที่ 3

หลังจากที่เราได้พูดถึงเรื่องของการใช้งาน prototype กันไปสองตอนแล้วใครที่ยังไม่ได้อ่านไปตามอ่านย้อนหลังได้ ส่วนในบทความนี้เราจะพูดถึงพดระเอกของเรานั่นคือ __proto__ ตัว __proto__ นี้จริงๆแล้วก็เป็น pointer ที่เป็นตัวกำหนดว่า object ของ JavaScript ของเรานั้นเป็นประเภทไหน หรือ เป็น class ไหนในภาษาอื่นๆ แต่อย่างที่เคยบอกกการทำงานของ JavaScript จะแตกต่างจากภาษาอื่นๆ ดังนั้นมันจะไม่ได้มีการ allocate memory ตอนสร้าง object เหมือนกับภาษาอื่นๆ แต่มันจะใช้การสร้าง context ขึ้นมาแทน เพราะ JavaScript ภาษาที่ทำงานแบบ context switching

เอาล่ะกลับเข้าประเด็นของเรา โดยปกติเวลาที่เรา log object มาดูใน console เราจะพบว่ามีสมาชิกที่ชื่อ __proto__ อยู่เสมอโดยที่ส่วนใหญ่จะเป็น Object เนื่องจากเป็น default เหมือนกับตัวอย่างในรูปถ้าเราสร้าง JSON Object ว่างๆขึ้นมา JavaScript จะสร้าง property ที่ชื่อ __proto__ ให้แล้วก็ชี้ไปยัง Object ดังรูป

default __proto__

หลังจากนี้คือหัวใจของบทความนี้คือ ถ้าเราต้องการให้ Object นั้นเปลี่ยนเป็นประเภทไหนก็ให้ ชี้ __proto__ ไปที่ prototype ตัวนั้น เช่นอยากให้ object a ที่เราสร้างขึ้นกลายเป็น stock ตามตัวอย่างในบทความที่แล้วก็ให้ทำการกำหนด __proto__ ให้ชี้ไปยัง ptototype ของ Stock ดังนี้

1
a.__proto__ = Stock.prototype

เพียงแค่นี้เราก็จะได้ a ที่มี method checkAvailable() กับ addProduct() ตามตัวอย่างในตอนที่ 2 แล้ว เราสามารถเรียกใช้ 2 method นี้ได้ เสมือนว่า ตัวแปร a นั้นถูก สร้างขึ้นมาจากการ new Stock(); ดังนั้นจึงเป็นการเปลี่ยน a จาก Object ธรรมดากลายเป็น Stock ตามตัวอย่าง

1
2
3
4
var a = {};
a.__proto__ = Stock.prototype
a.checkAvailable('P001');
a.addProduct('P0001', 20);

นี่คือหลักการ Casting ใน JavaScript หวังว่าคงจะทำให้ได้แนวคิดในการเอาไปประยุกต์ใช้งานอยู่พอสมควร

การ casting ใน JavaScript ตอนที่ 2

หลังจากบทความที่แล้วเราพูดถึงเรื่องของการใช้งาน prototype ในเบื้องต้นโดยในตอนนี้จะแนะนำการเอาไปใช้งานจริงๆ ว่าควรทำอย่างไร ซึ่งใน JavaScript จะมองทุกอย่างเป็น context(บริบท หรือมองว่าเป็นกล่องๆนึงก็ได้) ซึ่งในแต่ละ context สามารถที่จะนำไปผูกไว้ใน context ไหนก็ได้ โดย default จะเป็น window ดังนั้นถ้าเราจะพูดถึงเรื่องของการสร้าง class ใน JavaScript จะเป็นการสร้าง context ขึ้นมาใหม่ ดังนั้นถ้าเราต้องการสร้าง function ใน class หรือ context ที่เราต้องการ เราต้องใช้ keyword prototype

อันดับแรกเริ่มต้นโดยการสร้าง class หรือ context ขึ้นมาโดย การสร้าง function ธรรมดาขึ้นมา ดังนี้

1
2
3
function Stock(){
// constructor
}

สิ่งที่เราได้นอกจากจะเป็น context แล้วเสมือนว่าเราได้สร้าง constructor ขึ้นมาด้วย โดยถ้าเราใส่คำสั่งเข้าไปใน function จะถูกเรียกทำงานตอนเริ่มต้นสร้าง object การสร้าง object เขียนได้ดังนี้

1
var stock = new Stock();

หลังจากนี้ถ้าเราต้องการจะสร้าง method ของ class stock เราจะใช้การกำหนด function ให้กับ prototype ดังนี้

1
2
3
4
5
6
7
Stock.prototype.checkAvailable = function(product){
// do something
}

Stock.prototype.addProduct = function(product, qty){
// do something
}

หลังจากนี้เมื่อเราทำการ new Stock ขึ้นมาเราสามารถเรียกใช้ method ที่เรา add เข้าไปใน prototype ได้แบบนี้

1
2
3
var stock = new Stock();
stock.checkAvailable('P001');
stock.addProduct('P0001', 20);

ประมาณนี้เดี๋ยวตอนสุดท้ายจะพูดถึง __proro__ ซักที เป็นอันจบเรื่องของ Casting ใน JavaScript โปรดติดตามตอนต่อไป

การ Casting ใน JavaScript ตอนที่ 1

จากที่ได้เขียนเรื่องของการ Casting บน PHP มาแล้ว ต่อไปเราจะพูดถึงเรื่องของ การ Casting ใน JavaScript ซึ่งจะเป็นเรื่องที่แตกต่างจากภาษาอื่นๆเป็นอย่างมาก โดยสิ่งที่เราจะเป็นจะต้องรู้จักมี 2 ตัว คือ prototype และ __proto__ บทความนี้จะพูดถึงเฉพาะ prototype ก่อนแล้วกัน

ตัวแรกที่จะต้องรู้จักคือ prototype เป็นคำศัพท์ที่ชวนสับสนที่สุดใน JavaScript แล้ว(ความเห็นส่วนตัว ^_^) แต่เอาเป็นว่าใน JavaScript นี้ไม่มีการประกาศ Class เหมือนภาษาอื่นๆ ทางเดียวที่จะบอกว่าใน Class นั้นมี method อะไรบ้างให้ใช้ prototype เอาเป็นแบบนี้แล้วกันง่ายๆ ส่วนถ้าจะเอาความหมายมันจะเป็นเรื่องของ การเอา function นั้นไปผูกกับ context ที่เราต้องการ ยกตัวอย่างเช่น

1
2
3
Array.prototype.newMethod = function(){
// do something new
}

จะเป็นการผูก function newMethod() เข้าไปไว้ใน class หรือ context ของ Array ซึ่งหมายความว่า ตัวแปรที่เป็น array ก็จะสามารถเรียกใช้งาน newMethod() ได้ เช่น

1
2
var a = [1,2,3,4];
a.newMethod();

ก็แล้วแต่ว่าข้างใน newMethod จะทำงานอะไรเราสามารถที่จะอ้างถึง array นั้นได้ด้วย keyword this เช่นถ้าเราอยากจะเอาสมาชิกทุกตัวใน Array นั้นมาแสดงใน console ก็สามารถทำได้ ดังนี้

1
2
3
4
5
6
7
Array.prototype.newMethod = function(){
for(idx in this){
console.log(this[idx]);
}
}
var a = [1,2,3,4];
a.newMethod();

ผลลัพธ์ที่ได้จะเป็นการเอาสามาชิกทุกตัวของ Array ไปแสดงผลใน console เดี๋ยวค่อยมาต่อเรื่องของ __proto__ ในตอนต่อไป

การใช้งาน classList ใน HTML5


หลังจากพักร้อนไปจากการเขียนบทความหลายเดือน วันนี้ได้ฤกษ์กลับมาเขียนอีกรอบวันนี้จะมาว่าในเรื่องของการใช้งาน classList ที่มากับ HTML5 อยู่ในหมวดของ Nuts and Bolts

ถ้าเรามีโจทย์ว่าต้องการทำการเพิ่มหรือลบ class ออกจาก element ใดๆ แน่นอนเราต้องนึกถึง methods addClass() หรือ removeClass() ใน jQuery แน่นอน ซึ่งถ้าเราใช้งาน jQuery อยู่ก็คงจะไม่มีปัญหาใดๆ แต่ถ้าในกรณีที่เราไม่ได้ใช้งาน jQuery เราอาจเลือกการใช้งาน classList แทนได้ ซึ่งการใช้งาน clasList ตัวนี้จะแตกต่างจากการใช้งาน jQuery เนื่องจากเป้น native JavaScript (ไม่ต้องใช้ library ใดๆ) แต่ก็แน่นอนการใช้งาน classList  จะไม่สามารถใช้งานได้ใน IE 6,7,8 แต่ถ้าในกรณีที่เราใช้งานบน mobile เราก็ไม่ต้องไปเรียกใช้ jQuery โดยเฉพาะพวกที่อยู่ค่าย Sencha Touch คงจะไม่ต้องไปเอา jquery เข้ามาเพื่อใช้งาน addClass() หรือ removeClass() อย่างเดียวแน่นอน

การใช้งาน classList จะประกอบไปด้วย method ต่างๆ ดังนี้

1
2
3
4
5
6
7
8
{
length: {number}, /* จำนวนของ class ที่ add เข้ามาใน element นั้น */
add: function() { [native code] }, /* เพิ่ม class ให้กับ element */
contains: function() { [native code] }, /* ตรวจสอบว่า element มีการ add class นั้นเข้ามาหรือไม่ */
item: function() { [native code] }, /* reference ถึง class โดย index */
remove: function() { [native code] }, /* remove class ออกจาก element */
toggle: function() { [native code] } /* ทำการ toggle class */
}

ซึ่งในตัวอย่างที่เขียนในรูปนี้จะเป็นการเขียนแบบยาวเพื่อให้เห็นการใช้งาน method ต่างๆของ classList ซึ่งเราสามารถเขียน สั้นๆเพียงบรรทัดเดียวได้ ดังนี้

1
2
3
4
5
document.querySelector('div').onclick = function(){

this.classList.toggle('active');

}

ใครที่เคยใช้ jQuery อยู่แล้วน่าจะหยิบไปใช้ได้เลยเพราะเหมือนกันมากๆ

ลองเข้าไปดู sourcecode ได้ที่ http://jsfiddle.net/irobust/hVbUp/

มาพูดถึง Pattern ในการสร้าง object ใน JavaScript

ในการสร้าง object ใน JavaScript โดยปกติทั่วไปเราจะเขียน code แบบนี้

1
2
3
4
5
6
7
var obj = {
     name    : 'สมจิตร',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

ซึ่งจริงๆก็มีการเขียนได้ 2 แบบ แต่เอาเป็นแบบนี้แบบเดียวก่อนแล้วกันเดี๋ยวค่อยเอามาเขียนถึงอีกทีนึง ก็คงจะไม่เป็นปัญหาอะไรถ้าเรามี object แค่ตัวเดียวแต่ปัญหาจะเกิดขึ้นทันทีถ้าเรามี object มากกว่า 1 ตัว เช่นถ้าประกาศ obj ไว้ 2 ตัวแบบนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var somjit= {
     name    : 'สมจิตร',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

var somjai= {
     name    : 'สมใจ',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

ซึ่งจะเห็นว่าทั้งสองตัวนั้นเป็น object ที่เป็นประเภทเดียวกันหรือมี class เดียวกันนั่นเอง code ของทั้ง 2 object นี้จะซ้ำซ้อนกันทำให้การแก้ไขนั้นจะทำได้ลำบาก ถ้าเป็นในภาษาอื่นๆทั่วไปจะไม่เกิดปัญหานี้เพราะเราจะไม่สามารถสร้าง object ขึ้นมาโดยตรงได้เราต้องสร้าง class ขึ้นมาก่อน แต่ในภาษาของ JavaScript นั้นไม่มีการประกาศ class เหมือนในภาษาอื่นๆ ดังนั้นการจะ define class ขึ้นมาจำเป็นต้องเขียนเป็น function ซึ่งมีวิธีการเขียนได้ 2 วิธีคือ แบบแรกจะเขียนเป็น function แล้วค่อย new object ขึ้นมาใช้งานแบบนี้

1
2
3
4
5
6
7
function Person(name, surName){ // parameter นี่จะอารมณ์เดียวกับ constructor
     this.name = name;
     this.surName = surName;
     this.greet = function(){
        console.log('สวัสดี!');
     };
}

เวลาใช้งานก็จะต้องเขียนแบบนี้

1
2
3
4
5
var obj  = new Person('สมจิตร', 'ใจดี'); // จะใส่ parameter หรือไม่ก็ได้
obj.greet();

var obj2 = new Person('สมใจ', 'ใจดี'); 
obj2.greet();

จะเห็นว่าเราสามารถที่จะ new Person (ที่มองเสมือนว่าเป็น class) ไปได้เรื่่อยๆ code ก็จะสั้นลงเยอะมาก

ส่วนอีกวิธีนึงเราก็จะทำการสร้าง function เหมือนกัน แต่เป็น function ที่ return ผลลัพธ์ออกมาเป็น object ถ้ายังงงหรือสงสัยให้ลองหาอ่านเกี่ยวกับ Factory Pattern ใน Design Pattern ทั่วๆไปเพิ่มเติม โดยหลักการสั้นๆของ Factory Pattern จะเป็นเหมือนโรงงานผลิต object โดยเขียน code แบบนี้

1
2
3
4
5
6
7
8
9
10
// ถ้าเจอชื่อ createObject หรือ getInstance ให้รู้ได้เลยว่า Factory Pattern ชัวร์
var createObject = function(name, surName){ 
    return {
        name  : name,
        surName : surName,
        greet : function(){
            console.log('สวัสดี!');
        }
    };
};

เวลาสร้าง object ขึ้นมาใช้งานก็เขียนประมาณนี้

1
2
3
4
var obj  = createObject('สมจิตร', 'ใจดี');
obj.greet();
var obj2 = createObject('สมใจ', 'ใจดี');
obj2.greet();

ทั้งสองแบบนี้เป็นตัวอย่างของการสร้าง object ใน javaScript ที่ค่อนข้างจะเป็นมาตรฐานซักหน่อยเขียนแล้วอ่านง่าย แล้วก็ค่อยดูเป็น Object Oriented ซักหน่อย

รู้จักกับตัวแปรแบบ Primitive และ Reference Type ใน JavaScript ตอนที่ 2

จากที่เขียนบทความเกี่ยวกับ Primitive Type และ Reference Type ใน JavaScript ไปในตอนที่แล้วก็ยังมีประเด็นอีกเล็กน้อยที่อาจยังไม่ได้พูดถึงเลยเพิ่งมาเขียนเพราะขี้เกียจ ^_^

ใน primitive type ก็มีบ้างครั้งที่มันจะแปลงร่างกลายเป็น Object โดยที่เราไม่รู้ตัว ซึ่งโดยปกติแล้วมันจะไม่ทำอย่างนั้น ต้องบอกก่อนว่าการที่เราประกาศตัวแปรชนิดที่เป็นตัวเลขเราสามารถประกาศเป็น Object ได้ด้วยคำสั่ง

1
var num = 10;

หรือ

1
var num = new Number(10);

ซึ่งสองคำสั่งนี้ให้ผลลัพธ์เหมือนกันคือ  10 แต่เป็น 10 คนละแบบอย่าเพิ่งรีบงง สิ่งที่แตกต่างกันคือแบบแรกจะเป็น 10 ที่เป็น Primitive Type ของ JavaScript เราจะไม่สามารกำหนด property ให้กับมันได้เช่น เราจะสั่ง

1
num.prop = 'test';

แบบนี้ไม่ได้ แต่ถ้าเราประกาศตัวแปรแบบที่สองคือใช้ new Number() คำว่า number ต้องเป็น N ใหญ่ด้วยนะอย่าลืม ซึ่งการประกาศตัวแปรแบบนี้มันจะมี type เป็น Object เราสามารถทดสอบได้ว่าตัวแปรที่เราได้มานั้นเป็น number ที่เป็น Primitive Type หรือว่า เป็น Object ที่เป็น Reference Type โดยการใช้คำสั่ง

1
typeof(num)

เราอาจทำการ log ดูโดยใช้คำสั่ง console.log ก็ได้ จะทำให้เรารู้ว่าชนิดของ num นั้นเป็นอะไรกันแน่ ซึ่งถ้าเป็น Object เราจะสามารถกำหนด property อะไรให้มันก็ได้ เพราะฉะนั้นเราจะสั่ง num.prop = ‘test’ ได้หรือเพิ่ม method ที่ทำงานเฉพาะกับตัวเลขนี้ก็ได้ แต่คงไม่มีใครทำเพราะมันดูไม่ค่อยมีประโยชน์เท่าไหร่แต่ที่พยายามเขียนขึ้นมาเพราะว่าเราจะได้เข้าใจว่าการที่เราสั่ง

1
"IRobust".length

ตัวแปร JavaScript จะทำการแปลง “IRobust” ที่เป็น string แบบ primitive type ไปเป็น Object ที่เป็น Reference Type ตอน run-time หลังจากนั้นก็จะแปลงกลับมาเป็น string ที่เป็น Primitive Type ตามเดิม

 

 

รู้จักกับตัวแปรแบบ Primitive และ Reference type ใน JavaScript

ตัวแปรใน JavaScirpt จะถูกแบ่งออกเป็น 2 ประเภทใหญ่ๆคือ primitive type และ reference type ซึ่งในแต่ละประเภทจะมีความแตกต่างกันที่ต้องทำความเข้าใจอยู่พอสมควรถึงแม้ว่าใน JavaScript เราจะไม่ต้องทำการระบุ data type ก็ตาม

Primitive Type ถ้าแปลตามความหมายคือตัวแปรที่เป็นพื้นฐานซึ่งจะประกอบไปด้วย

  1. Number    -> ข้อมูลที่เป็นตัวเลขทั้งหมด
  2. String      -> ข้อมูลที่เป็นข้อความ รวมทั้ง ‘1234’
  3. Boolean   -> ข้อมูลที่เป็น true หรือ false
  4. undefined -> ถ้าเราประกาศตัวแปรขึ้นมาโดยที่ยังไม่ได้กำหนดค่าจะเป็นข้อมูลชนิดนี้
  5. null          -> เป็นประเภทของข้อมูลที่ยังไม่แน่ใจว่าจะมีหรือไม่มี

ซึ่งลักษณะของ primitive type จะเป็นข้อมูลพื้นฐาน พูดง่ายๆก็คือข้อมูลใน JavaScript ถ้าไม่เป็น ข้อมูลที่เป็น primitive type ก็จะเป็นข้อมูลที่เกิดจากข้อมูลที่เป็น primitive type นี้ผสมกัน

Reference Type เป็นประเภทของข้อมูลที่เกิดจากการผสมกันของ primitive type ซึ่งจะประกอบไปด้วย

  1. Object
  2. Array
  3. Function
  4. Date
  5. RegExp

ข้อมูลประเภทที่เป็น reference จะเป็นข้อมูลที่แตกต่างออกไปจากข้อมูลประเภท primitive ซึ่งการใช้งาน reference type จะต้องทำการ instantiate ด้วย คำสั่ง new ทั้งหมดยกเว้น function และ Array ซึ่งจริงๆแล้ว Array ก็ต้องทำการ new เหมือนกันแต่สามารถเขียนสั้นๆได้เป็น

1
var arr = [];

หรือ

1
var arr = Array;

แต่สุดท้ายจะต้องถูกแปลงเป็น

1
var arr = new Array();

ดังนั้นจะมีเฉพาะ function ตัวเดียวเท่านั้นที่แตกต่างจากชาวบ้านเค้า เพราะ ภาษา JavaScript เป็น context switching คือการเปลี่ยน context ไปมา ซึ่งการ instantiate หรือการใช้คำสั่ง new จะไม่ได้ทำการจองพื้นที่ในหน่วยความจำและสร้าง reference เหมือนกับภาษาอื่น แต่จะเป็นการสร้าง reference ไปยัง function ที่เป็น context ตัวนึงเหมือนกัน ดังนั้นจึงสรุปว่า function เป็น context อยู่แล้วเลยไม่ต้อง new

รู้จักกับตัวแปรใน JavaScript

ใน JavaScript อย่างที่เรารู้ๆกันอยู่ว่าเราจะประกาศตัวแปรหรือไม่ก็ได้ ซึ่งตาม best practice ทั่วๆไปก็ต้องแนะนำให้ประกาศไว้อยู่แล้วเพื่อให้ code นั้น maintain ได้ง่าย แต่นอกจากเหตุผลนี้แล้วจริงๆแล้วการประกาศตัวแปรและไม่ประกาศมีความแตกต่างกันอย่างมากคือ ถ้าเราประกาศตัวแปร ตัวแปรนั้นจะถูกผูกติดกับ context หรือบริบทของมัน หมายถึง ถ้าอยู่นอกสุดก็จะผูกติดอยู่กับ window object

1
var variable;

ถ้าอยู่ใน function ก็จะผูกติดอยู่กับ function ที่ตัวแปรนั้นอาศัยอยู่

1
2
3
function foo(){
   var variable;
}

หรือ

1
2
3
var foo = function(){
   var variable;
}

และในกรณีที่เราไม่ได้ทำการประกาศตัวแปร อยู่ๆก็มีการใช้งานตัวแปรนั้นเลยมันจะออกไปอยู่ใน global scope ซึ่งถือว่าเป็น scope ที่ใหญ่ที่สุด ไม่ว่าใครก็สามารถเรียกใช้งานตัวแปรที่อยู่ใน global scope นี้ได้ ฟังดูอาจเหมือนว่าเป็นข้อดีแต่จริงๆแล้วไม่ใช้ เพราะการ maintain จะยากขึ้น ลองคิดดูว่าเราจะหาที่มาของตัวแปรจากตรงไหน ไม่ว่าจะเป็นการเขียนโปรแกรมด้วยภาษาใดๆก็แล้วแต่ พยายามที่จะใช้งานตัวแปรที่เป็น global ให้น้อยที่สุด แม้แต่ php เองก็แนะนำว่าไม่ควรใช้ตัวแปรประเภท global

1
global $variable;

หรือ

1
$GLOBALS['variable'];

เพราะมันทำให้เกิด dependencies ซึ่งจะทำให้ code ของเรา reuse ได้ยาก ในทางเดียวกัน javascript ก็เช่นเดียวกัน นอกจาก code จะแก้ไขได้ยากแล้วยังมีโอกาสที่ code เราจะตั้งชื่อตัวแปรซ้ำกันได้อีกด้วยเนื่องจากมันไม่ได้ผูกติดอยู่กับ window object ทำให้หลายๆ window สามารถเรียกใช้งานตัวแปรนี้ได้

การใช้งาน __noSuchMethod__ ใน javascript

ก่อนหน้านี้เคยแนะนำการใช้งาน __call() method ใน php มาแล้ว วันนี้จะเอา function __noSuchMethod__ มาแนะนำหลักการทำงานเหมือนกับการใช้งาน __call() ใน php เลย คือถ้ามีการเรียก method ที่ยังไม่ได้มีการสร้างไว้ มันก็จะเข้ามาทำงานใน method นี้ อย่างเช่นในตัวอย่างในรูปข้างล่างเราทำการเรียก method foo ซึ่งไม่ได้มีอยู่จริง ทำให้เข้าไปทำงานใน method ที่ชื่อว่า __noSuchMethod__ แทน และใน method นี้จะรับ parameter 2 ตัว คือตัวแรกจะเป็นชื่อ function ที่เรียก เช่นในตัวอย่างเราเรียก method foo ตัวแปรตัวแรกเราจะได้ค่าเป็น foo และตัวที่สองเป็น arguments ที่ส่งเข้ามาจะถูกส่งเข้ามาเป็น array

หลังจากพูดถึงความน่าสนใจของการใช้งาน __noSuchMethod__ ไปเรียบร้อยแล้ว ก็จะบอกข่าวร้ายว่าปัจจุบันยังใช้งานได้แค่ Firefox เท่านั้น (มาทำให้อยากแล้วจากไป ^_^) ส่วน webkit ยังไม่ support แต่เห็นมีข่าวว่ามีการบรรจุเข้าไปในแผนพัฒนา หวังว่าคงจะเอามาใช้งานได้ในเร็วๆนี้ แล้วก็ยังไม่ได้ลองใน opera และ IE เลยยังไม่รู้ว่าเป็นยังไง ฝากเอาไปทดลองกันดูละกัน ได้ผลยังไงก็บอกกันด้วยนะครับ

สามารถเข้าไปทดลอง code ได้ที่นี่ (เปิดด้วย Firefox เท่านั้น)
http://jsfiddle.net/irobust/LBxBw/