主页 / 问题 / 1056104
Accepted
OPTIMUS PRIME
Asked:2020-12-09 03:51:16 +0000 UTC2020-12-09 03:51:16 +0000 UTC

如何使用函数名作为字符串调用函数？

  • 772

用户输入一个从中获取关键字的字符串，为此预先准备了一个类似名称的函数。有没有什么方法可以调用它eval()？

bubu("http://One.com/bubu.png");

function bubu(str) {
  let key = (str.match(/(One|Two|Three)/ig) || ["Other"])[0];

  window["handle" + "Test"](); // Работает для глобальной функции
  
  bubu["handle" + key](); // Error. Где же сохраняется функция?
                          // *Должен сработать handleOne()

  function   handleOne() { console.log( 'one' ); }
  function   handleTwo() { console.log( 'two' ); }
  function handleThree() { console.log('three'); }
  function handleOther() { console.log('other'); }
}


function handleTest() { console.log( 'Window-test' ); }

ps 好吧，功能代码稍微复杂点和多样化，导致无法创建一个带参数的）

javascript

3 个回答

  1. 局部函数和变量不是用户代码中任何对象的属性......因此，string如果不将它们放在对象中或使用eval.

    下面的内容并不完全是对所提问题的回答，而是关于对象中功能的部分评论：

    ...但是您必须在代码顶部放置一个带有函数的大对象，以便它们可用

    其实看到这样的问题是很心酸的，想象一下手动组装js文件等资产的痛苦。毕竟，现在它很容易自动化：

    1. 我们将node安装到系统中（如果之前没有这样做过），然后进入项目文件夹，我们通过初始化它$ npm init

    2. 安装任何 bundler aka bundler ( Webpack / Rollup / Parcel /...) 并根据其文档的第一页准备项目。这只是几分钟的事情，但您也可以从 github 获取完整的样板

    3. 创建一个文件src/utils/helpers.js *，我们在其中声明和导出辅助函数：

    function   one() { console.log( 'one' ); }
function   two() { console.log( 'two' ); }
function three() { console.log('three'); }
function other() { console.log('other'); }

export { one, two, three, other };
    1. 在src/index.js（或任何具有主要逻辑的 js 文件中） - 导入**并使用：
    import * as handlers from './utils/handlers.js';  // это создаст объект handlers, содержащий в своих свойствах все (*) именованные экспорты указанного файла 

bubu('http://One.com/bubu.png');

function bubu(str) {
  let key = (str.match(/One|Two|Three/i) || ['Other'])[0].toLowerCase();
  handlers[key](); 
}
    1. 我们启动程序集 ( $ npm run build) 或开发服务器 ( $ npm start/ $ npm run dev)。


    一般来说，汇编器不仅能够将几个 js 文件“拼接”成一个。作为一个相当通用的工具，它可以承担大量其他常规机械工作（处理 html 和 css 文件、图像、调用转译器/压缩器等）。
    此外，开发模式下的流行构建器提供了方便的 LiveReload - 无需重新加载页面 :)

    * 习惯上将所有源代码保存在 src/ 文件夹中，嵌套在其中的那些结构并不重要。但是“utils”文件夹的名称是可以识别的，而且不仅是人们可以识别的——例如，VS Code 会为它显示相应的图标（小事一桩，但仍然有助于更快地浏览项目文件夹树）。

    ** 并非所有模块导出都可以导入，但只能导入那些需要的模块。例如，
    import { one, three } from './utils/handlers.js';
    这不仅是为了秩序，还有一个实际的好处：tree shaking bundler 会自己发现并丢弃死（未使用）的代码。因此，您可以将个人开发保留在通用模块中，并在不同的项目中部分使用它们 - 无需担心最终组装的体积。最好的部分是许多现代库也支持此类导入。

    • 1

  2. 好吧，如果它在课堂上，那么我最好再决定，以免像@meine 的例子那样this把各种各样的事情都围起来。this.actions

    class Action {
    func(key) {
        key = this['handle' + key];
        if('function' === typeof key) {
            return key();
        }
    }

    handleOne() {
        return "1";
    }

    handleTwo() {
        console.log('2');
    }

    handleThree() {
        console.log('3');
    }

    handleOther() {
        console.log('other');
    }
}
let act = new Action();
console.log(act.func('One'));
act.func('Two');
    • 0
  3. Best Answer

    在课堂上，ES6 

    class Bubu {
  constructor() {
    this.actions = {
      'handleOne': 'handleOne',
      'handleTwo': 'handleTwo',
      'handleThree': 'handleThree',
      'handleOther': 'handleOther'
    };

    this._init();
  }

  _init() {
    const key = 'Three';

    this[this.actions['handle' + key]]();
  }

  handleOne() {
    console.log('1');
  }

  handleTwo() {
    console.log('2');
  }

  handleThree() {
    console.log('3');
  }

  handleOther() {
    console.log('other');
  }
}

new Bubu();

    • -1

相关问题