使用动态字符串作为函数名报错：“...is not a function”问题排查

问题场景 #

在jQuery 2.2环境中，尝试通过字符串作为函数名调用指定方法：

var barBaz = 'myFunctionName';

需要调用的目标方法：

myFunctionName.changeView('success');

直接调用该方法正常，但使用以下写法时报错：

[barBaz].changeView('success');

错误信息：

Uncaught TypeError: [...].changeView is not a function

尝试window[barBaz]的方式也失败，希望明确错误原因及解决办法。

错误原因分析 #

1. [barBaz]写法的问题：
   这种写法是创建了一个包含字符串'myFunctionName'的数组，数组本身并没有changeView方法，自然会抛出类型错误。

2. window[barBaz]失败的可能原因：
   如果myFunctionName不是全局变量（比如定义在闭包、jQuery的$(document).ready()回调等局部作用域内），它不会挂载到window对象上，此时window[barBaz]会返回undefined，调用方法自然失败。

解决办法 #

方法一：确保变量为全局作用域 #

如果myFunctionName是全局变量，直接通过window对象访问并调用方法：

window[barBaz].changeView('success');

注意：如果之前调用失败，检查myFunctionName是否真的被定义为全局变量，比如是否被闭包或局部作用域包裹。

方法二：使用局部对象存储函数 #

如果myFunctionName是局部作用域内的变量，建议将相关函数统一存储到一个局部对象中，再通过字符串索引访问：

// 定义存储函数的对象
var funcContainer = {
  myFunctionName: {
    changeView: function(status) {
      // 你的方法逻辑
      console.log('视图切换为：' + status);
    }
  }
};

// 通过字符串调用方法
var barBaz = 'myFunctionName';
funcContainer[barBaz].changeView('success');

方法三：针对jQuery插件实例的特殊情况 #

如果myFunctionName是某个jQuery插件的实例对象，需要先获取该插件的实例引用，再进行调用。例如：

// 假设是某个DOM元素的插件实例
var $elem = $('#target');
// 假设插件实例存储在元素的data中
var pluginInstance = $elem.data('myPlugin');
// 如果方法名是字符串，同样用索引访问
var methodName = 'changeView';
pluginInstance[methodName]('success');

内容的提问来源于stack exchange，提问作者Feature