JavaScript: มารู้จัก method apply กับ call ของ function กันเถอะ

ในภาษา JavaScript หลายๆคนก็คงจะรู้จัก method apply และ call ของ function กันแล้ว และคงรู้ดีอยู่แล้วว่า function นั้นก็คือ first-class objects ของ JavaScript บทความนี้ก็มาทบทวนกันหน่อยก็แล้วกันครับ

method apply และ call คือวิธีการเรียก function วิธีหนึ่งโดย ทั้งคู่จะรับ input หรือมี interface รับสองค่า คือ function context และ arguments จะต่างกันก็แค่ method apply รับ parameter เป็น array โดยที่ method call รับ arguments เป็นค่าเรียงกันไปตรงๆเลย ดูตัวอย่าง code JavaScript ข้างล่างนี้เลย

function sum () { //ประกาศ function sum

var result = 0;

//วน loop ใน arguments เพื่อรวมค่า แล้วทดไว้ที่ตัวแปร result
for (var i = 0; i < arguments.length; i++) {

result += arguments[i];

}
this.result = result;//เก็บผลรวม result ไว้ที่ function context นี้

}

var ninja1 = {}; /* setup object ninja1 เป็น function context เตรียมไว้ทดสอบ method apply */
var ninja2 = {}; /* setup object ninja2 เป็น function context เตรียมไว้ทดสอบ method call */

/* เรียก method apply โดยกำหนด arguments เป็น array object [1, 2, 3, 4] */
sum.apply(ninja1, [1, 2, 3, 4]);

/* เรียก method call โดยกำหนด arguments เรียงต่อๆกันไปคือ 1, 2, 3, 4 */
sum.call(ninja2, 1, 2, 3, 4);

/* alert เพื่อดูผลซึ่งจะได้ค่า result เท่ากับ 10 */
alert(“sum.apply(ninja1, [1, 2, 3, 4]) = ” + ninja1.result + “, sum.call(ninja2, 1, 2, 3, 4) = ” + ninja2.result);

เรามาดูกรณีการใช้ วิธีการเรียก method แบบนี้ ในตอนนำไปประยุกต์ใช้กับ function แบบ Callback กันอีกหน่อย

code JavaScript ข้างล่างนี้คือการประกาศ function forEach ซึ่งจะทำงานเรียก function callback กับ list ที่เราใส่เข้าไป โดย interface ของ forEach จะรับ list ของ function context ที่สนใจ กับ function callback ที่แสดงเป็นพฤติกรรมที่เราต้องการให้เรียกกลับไปยัง function context ที่สนใจนั้น

function forEach (list, callback) {//ประกาศ function forEach

for (var i = 0; i < list.length; i++) {//วน loop เข้าไปใน list

/* เรียก method callback ในแบบ method call ของ function โดยใส้ function context เป็นสมาชิกใน list ตัวที่ i และส่ง parameter 1 ตัวเป็น index ของ list */
callback.call(list[i], i);

}

}

var list = [‘shuriken’, ‘katana’, ‘nunchucks’];//setup ค่า list เป็น array ของ string

/* เรียก function forEach โดยส่ง list ของ function context เป็น object string กับ function callback โดยจะ alert ค่า index กับ ตัวสมาชิกใน array list ออกมาเฉยๆ */
forEach(list, function (index) {

alert(“index: ” + index + “, this: ” + this);

});

ก็ขอจบไว้เพียงเท่านี้ หากท่านใดกำลังเขียน code JavaScript อยู่ก็คงจะได้ใช้ประโยชน์จากบทความนี้บ้างอย่างน้อยก็ยังดีนะครับ

แหล่งความรู้: Secrets of the JavaScript Ninja

ขอบคุณครับ

#:P

Advertisements

#javascript