การ 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__ ในตอนต่อไป