JS 通过字符串名称调用函数 - Javascript

在JavaScript中，我们可以通过函数名来调用函数，但是有时候我们需要通过字符串的方式来动态调用函数。本文将介绍如何通过字符串名称调用函数。

通过 window 对象来调用函数

在全局作用域中，所有的全局函数都是 window 对象的属性。因此，我们可以通过 window 对象来动态调用函数。

function helloWorld() {
  console.log('Hello World');
}

// 通过字符串方式调用函数
window['helloWorld']();

通过 eval 函数来调用函数

eval 函数可以将字符串作为代码来执行，因此我们可以将函数名字符串作为参数传递给 eval 函数来动态调用函数。

function helloWorld() {
  console.log('Hello World');
}

// 通过 eval 函数调用函数
eval('helloWorld()');

注意，使用 eval 函数存在风险，因为它会执行任何传递给它的代码。因此，推荐尽量避免使用 eval 函数。

通过 Function 构造函数来调用函数

我们还可以使用 Function 构造函数来创建一个函数对象，然后通过调用该对象来调用函数。

function helloWorld() {
  console.log('Hello World');
}

// 通过 Function 构造函数调用函数
const fn = new Function('helloWorld()');
fn();

使用字符串名称调用对象的方法

我们还可以使用类似的方式来调用对象的方法。只需要将对象和方法名拼接成字符串，然后通过 window 对象或 eval 函数来动态调用方法即可。

const myObj = {
  sayHi() {
    console.log('Hi');
  }
}

// 通过 window 对象调用对象方法
window['myObj']['sayHi']();

// 通过 eval 函数调用对象方法
eval('myObj.sayHi()');

总结

通过字符串名称调用函数或对象方法是一种非常有用的技巧，可帮助我们实现更加灵活的程序。但是，使用这种技巧需要注意安全性和可维护性，因此建议谨慎使用。