javascript中如何将带参数函数包装成无参数函数

本文介绍了在JavaScript中如何将带参数的函数包装成无参数的事件函数,以便于绑定到HTML元素的事件上。通过一个公共静态函数`bind`,可以实现将带参数的函数转换,确保事件触发时正确传入参数。文中提供了两个示例,分别展示了动态增加表格行并绑定带参数事件和为定时器绑定带参数函数的应用场景。
摘要由CSDN通过智能技术生成

在编写javascript脚本时,可能需要将一个原本具有输入参数的函数包装成一个无输入参数的函数,这通常是为了将其绑定到某个事件函数上,事件函数是要求无输入参数的,例如下面的代码,就是为一个div绑定了onclick事件:

var  div  =  document.createElement( " div " );
div.onclick 
=  div_onclick;  // 为事件绑定事件函数

function  div_onclick()
{
    alert(
"div onclick event");
}

 可以注意到,这里的div_onclick()函数是没有输入参数的,因此,可以使用div.οnclick=div_onclick来为div绑定点击时触发的事件函数,但是,如果div_onclick是个带有输入参数的函数,那么,该如何绑定事件函数呢?

function  div_onclick(str)
{
    alert(str);
}

如上面所示的函数,div_onclick已经带有了一个str参数,如何来为上面的那个div的点击事件绑定这个带输入参数的函数呢,大多数刚刚接触javascript的人容易犯的错误就是写出下面的代码,这样的代码是不会得到想要的效果的:

var  str  =   " div onclick event " ;
var  div  =  document.createElement( " div " );
div.onclick 
=  div_onclick(str);  // <----------------错误的代码

function  div_onclick(str)
{
    alert(str);
}

其中错误的那行代码的真实运行情况应该是:先以str作为参数调用div_onclick函数,显然,调用的结果就是弹出了alert窗口,点击确定后,div_onclick函数将返回,返回值再给div.onclick赋值,这和我们打算将函数div_onclick绑定到div.onclick上的初衷是不符合的。

这就存在了一个问题,我们既要为div.onclick绑定一个函数,又要能够为绑定的函数传递一些参数,显然,我们需要能够将带参数的函数以及我们想要传递给它的参数一起包装成一个无参数的新函数,再将这个无参数的新函数绑定到相应的事件上面去,实现的方法有好多种,这里介绍一种比较简单通用的方法,这种方法可以将任意一个带参数的函数包装为一个不带参数的函数,该方法要求添加如下函数定义:

Function.prototype.bind    =     function ()   
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值