JavaScript: Closure

Closure คือ คุณสมบัติของ function ที่จะปิดภายใต้การดำเนินการใดๆระหว่าง function กล่าวคือ เป็นลักษณะที่ยังคงไว้ซึ่ง context ของ function เดิม เมื่อผ่านการดำเนินการใดๆแล้วของ function นี้

ดังนั้นเราจึงใช้ คุณสมบัติของ Closure เพื่อปกป้อง property value ของ object ได้ ใช้เพื่อถ่ายถอดลักษณะ function ของ object เดิมไว้ในขณะที่  function ของ object มีการดำเนินการต่อเนื่องกันไปได้

ตัวอย่างการใช้เมื่อเรากำหนด function ใช้แสดงแทน basket ใน super market เพื่อหยิบของที่ต้องการซื้อ (ใช้ชื่อตัวเล็กนำหน้าเพื่อแทน function ตอนประกาศใช้งานไม่ต้องใส่ new นำหน้า)

var basket = function (custID, seq) {

var me = this;
var order = [];

// custID ถูกปกป้องให้เข้าถึงได้โดย function getCustID เท่านั้น

me.getCustID = function () {

return custID;

};

// สามารถสั่ง print รายการ order ทั้งหมดที่ซื้อใส่ตะกล้านี้ได้

me.printOrder = function () {

order.forEach(function (order) {

console.log(order.orderItemID + “, QTY = ” + order.quantity);

});

};

me.buyItem = function (productID, quantity) {

var newOrderItem = {

productID: productID,
quantity: quantity,
orderItemID: custID + ‘-‘ + productID + ‘-‘ + seq

};

order.push(newOrderItem);

// seq จะถูกใช้ได้ภายใต้ context ของ function basket นี้
// เราไม่จำเป็นต้องเก็บค่า seq ไว้ใน context ของ function นี้เมื่อเราใส่เข้ามาเป็น parameter ของ function
++seq;

// เมื่อผ่านการดำเนินการ buy item นี้แล้ว ผู้ใช้ basket ยังสามารถ buy item อื่นๆได้อีกต่อเนื่องกันไป
// นี่ก็คือคุณสมบุติของ Closure
return me;

};

return me;

};

ตัวอย่างใช้ประโยชน์

var chavpBasket = basket(1, 1);
chavpBasket.buyItem(1, 10).buyItem(2, 10).printOrder();// 1-1-1, QTY = 10 | 2-1-2, QTY = 10

ขอบคุณความรู้จาก

JavaScript: The Good Parts

บันทึกโดย

— #:P —

Advertisements