ข้อควรระวังในการแยกเมธอดและการประยุกต์ฟังก์ชันบางส่วน

ภาพรวม

ข้อควรระวังในการดึงออก

// Extraction loses this
const user = {
  name: "Ayla",
  label: function (prefix) {
    return prefix + ":" + this.name;
  }
};

console.log("method call:", user.label("Hi")); // "Hi:Ayla"

// Extract
const f = user.label;
console.log("extracted:", f("Hi")); // this is missing -> "Hi:undefined" (in strict mode this is undefined)

call/apply สำหรับการเรียกครั้งเดียว

// Fix by passing this explicitly using call/apply
console.log("call :", f.call(user, "Hi"));   // "Hi:Ayla"
console.log("apply:", f.apply(user, ["Yo"])); // "Yo:Ayla"

bind สำหรับนำกลับมาใช้ซ้ำ

// bind returns a new function with this fixed
const bound = f.bind(user);
console.log("bound once:", bound("Hey")); // "Hey:Ayla"
console.log("bound again:", bound("Yo")); // "Yo:Ayla"

การประยุกต์ใช้บางส่วน (แบบง่าย)

// Partial application: pre-fill arguments
function add(a, b, c) { return a + b + c; }

// Using bind: pre-fill a=10
const add10 = add.bind(null, 10);
console.log("add10(1,2):", add10(1, 2)); // 13

// Using an arrow wrapper: pre-fill prefix
const labelHi = function (obj) {
  return function () { return obj.label("Hi"); };
}(user);

console.log("arrow partial:", labelHi()); // "Hi:Ayla"

รูปแบบการใช้งานจริง

แบบทดสอบ bind เทียบกับ call/apply

สรุปทบทวน