js中函数动态调用

文章目录

一、场景

JS开发中,例如有些场景下,后端要求一个功能要请求不同的接口,但是传参及后续逻辑其实都是一样的,有些同学可能会想到在接口url处统一处理就好,但是不在本篇文章要讲的范围。在源头处理,动态调用多个方法名,其实也就可以了

二、方法

2.1、动态函数

javascript 复制代码
import { start, startFree } from "@/api/design";

export default {
  methods: {
    // 动态接口
    saveOne() {
	  const fun = !this.isAuth ? startFree : start
	  fun();
    },
    // 动态方法
    fn1() {},
    fn2() {},
    saveTwo() {
	  const fun = !this.isAuth ? 'fn1' : 'fn2'
	  this[`${fun}`]();
    }
  }
}

2.2、eval()函数

比如传入一个 funName这个参数,并且想要执行参数对应的的函数,可以使用eval()函数。

javascript 复制代码
function funName () {
	console.log('11111')
}
const test = 'funName'
// test() // 这样肯定报错
eval(test+'()');

三、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

相关推荐
c***V32323 分钟前
Vue优化
前端·javascript·vue.js
努力往上爬de蜗牛1 小时前
react native真机调试
javascript·react native·react.js
李@十一₂⁰2 小时前
HTML 特殊字体符号
前端·html
y***86693 小时前
TypeScript在Electron应用中的使用
javascript·typescript·electron
小奶包他干奶奶4 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy5 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
潘小安5 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen5 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端6 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js
q***d1736 小时前
React桌面应用开发
前端·react.js·前端框架