Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธี Execute JavaScript Function จากชื่อในตัวแปร

ใช้ Anonymous Functions (Function Expressions) กำหนดฟังก์ชันให้ตัวแปร แล้วเรียกผ่านตัวแปรนั้น

ตัวอย่างพื้นฐาน

var func = function() {
  alert('This is anonymous');
};
func(); // เรียกผ่านตัวแปร

Anonymous Function Expression

// ไม่มีชื่อ
var a = function() {
  return 5;
};

// Named Function Expression (มีชื่อภายใน)
var b = function bar() {
  return 5;
};

a(); // 5
b(); // 5
// bar(); // Error: bar is not defined

กรณี: ชื่อฟังก์ชันอยู่ใน String (Dynamic)

// ❌ ไม่แนะนำ: ใช้ eval (ไม่ปลอดภัย)
var funcName = "myFunction";
eval(funcName + "()"); // Security Risk!

// ✅ แนะนำ: Object/Map Lookup
const functions = {
  greet: () => "Hello",
  add: (a, b) => a + b,
  multiply: (a, b) => a * b
};

const funcName = "add";
if (functions[funcName]) {
  console.log(functions[funcName](5, 3)); // 8
}

// ✅ ใช้ window object (Global Functions เท่านั้น)
window["myGlobalFunction"]?.();

ใช้งานกับ Event Handlers

// ผูก Event ด้วย Function Reference (ไม่ใช่ String)
button.addEventListener('click', myHandler);

// หรือ Anonymous
button.addEventListener('click', function() { ... });

// Arrow Function
button.addEventListener('click', () => { ... });

สรุป: กำหนดฟังก์ชันให้ตัวแปร (Function Expression) แล้วเรียก variableName() หลีกเลี่ยง eval() ใช้ Object Lookup แทนสำหรับ Dynamic Function Names