JavaScript 动态执行字符串函数的两种实现方式

作者:拾光

时间:2026-10-24

浏览:353

本文介绍在JavaScript中动态执行字符串形式函数的两种常见方法。第一种通过eval直接解析执行,第二种利用window对象属性访问特性,将函数名作为字符串键值进行调用。文章结合jQuery代码示例,演示如何从checkbox的value属性中获取函数名,并将当前DOM元素作为参数传递给动态执行的函数,实现灵活的事件处理逻辑。

文章目录

JavaScript动态执行字符串函数的实现方法

接下来使用JavaScript代码来执行相关操作:


  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


-------------------------------

方法一:


  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


通过window对象动态调用函数

这是方法二:


在checkbox的value属性中设定了该checkbox要执行的函数名,而方法的参数则是将当前点击的checkbox元素作为参数传递过去。


此处我使用jQuery库来进行DOM操作。


}

jQuery实现Checkbox联动执行示例

代码如下:

 
$(function() {
$("ul li a").css("cursor", "pointer");
$("ul li a").click(function() {
var $ck = $(this).siblings(":checkbox");
if ($ck.attr("name") == "total") // 全选逻辑
{ 
if ($ck.attr("checked") == false) {
$ck.attr("checked", "checked");
$("[name='ck']:checkbox").attr("checked", "checked");
var ff = $ck.val(); // 获取要执行的函数名字符串
var cc = $ck.get(0); // 将jQuery对象转换为原生DOM对象
window[ff](cc); // 执行字符串表示的函数,并将当前checkbox DOM对象作为参数传入
} 
} else {
$ck.attr("checked", "");
$("[name='ck']:checkbox").attr("checked", "");
var ff = $ck.val();
var cc = $ck.get(0);
window[ff](cc);
} 
} 
} // 单个选择逻辑
{ 
if ($ck.attr("checked") == false) {
$ck.attr("checked", "checked");
var s = $ck.val();
var a = $ck.get(0);
window[s](a);
} 
} else {
$ck.attr("checked", "");
var s = $ck.val();
var cb = $ck.get(0);
window[s](cb);
} 
} 
}) 
}) 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章