整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript之匿名函数

JavaScript之匿名函数

avaScript中除了自定义函数之外,还有匿名函数?什么是匿名函数?

1. 匿名函数:没有函数名称的函数。

如:定义一个匿名函数,打印5个星星。

<script>

function (){ //没有函数名称

for(var i=0;i<5;i++){

document.write("*");

}

}

</script>

2. 调用匿名函数有2种方法:

(1) 通过变量名调用匿名函数可以理解为将整个匿名函数渎职给一个变量

然后在body标签中,定义一个按钮:

(2) 事件名调用匿名函数

同样在在body标签中,先定义一个按钮:注意在input标签中我们不通过onclick来调用匿名函数

然后我们通过2个事件调用2个匿名函数:

注意:window.onload:页面加载时触发的事件,这里也就是页面加载进来调用第一匿名函数

document.getElementById("btn"):获取id为btn的元素,也就是将按钮获取过来;document.getElementById("btn").onclick:点击按钮时,触发第二个匿名函数

一节 帮你精通JavaScript:简单求积分的方法 中,我们分享了应用抽象的sum函数近似求pi值的方法:

求pi的序列

function pi_sum(a, b) {
    function pi_term(x) {
        return 1 / (x * (x+2));
    }
    function pi_next(x) {
        return x + 4;
    }
    return sum(pi_term, a, pi_next, b);
}
//该函数收敛于pi/8

此案例中,我们不得不一本正经的写出两个“微不足道”的函数的定义,pi_term与pi_next,只为能在sum函数中顺利的调用。如果不繁琐费力的逐个定义,而只用其数学关系,岂不妙哉。

Lambda-Expression应运而生,pi_term与pi_next可被直接写为:

x=> x + 4 //pi_next
x=> 1 / (x * (x + 2)) //pi_term

此语法简洁优美,输入 x 然后输出所得值,用lambda-function重新撰写pi_sum函数:

function pi_sum(a, b) {
    return sum(x=> 1 / (x * (x + 2)),
               a,
               x=> x + 4,
               b);
}

匿名函数的语法为:

(parameters=> expression)

匿名函数与define的函数是等效的, 比如:

function plus4(x) {
  return x + 4;
}
//等效于
const plus4=(x=> x + 4); //加上括号,视觉上更加清晰

函数的调用也是相同的:

((x, y, z)=> x + y + square(z))(1, 2, 3);

从直觉上,我们可以将lambda-function的语法逐步拆解:

从了解js通过canvas压缩图片上传功能以后,小白对javascript的敬畏之心又提升了一大截,这两天在练习的时候发现自己平时熟悉的代码变得陌生起来,比如为什么定义函数时这两个方式都可以用。

带着这个疑问,小白找到了老朱。“朱哥,为啥在js里面要用两种定义函数的方式呢?”

老朱:“严格意义上来说上面那个不是定义一个函数,而是将一个变量指向了一个匿名函数,这里是引用的关系。你可以控制台输出一下两个函数名看看。”

小白执行了一下输出以后惊讶的说道:“果然不一样啊,一个有函数名,一个没有函数名。”

老朱:“在js中匿名函数用处非常大,这几天我们写的代码里面有很多的匿名函数,你可以找找。”

小白:“哇,随便翻了一下昨天的代码里面就有匿名函数啊。这段点击按钮上传图片的代码中就有两个。”

老朱:“匿名函数非常有个特点,匿名函数如果没有被引用,用完后会被销毁,也就是垃圾回收释放内存。如果被引用,而引用它的那个变量一直在内存中,它指向的匿名函数就会一直存在,不会被销毁。比如上面的代码中click里面的匿名函数没有被引用,用完后会被销毁,匿名函数中的success指向的匿名函数被引用,只有success被销毁时,这个匿名函数才会被回收。垃圾回收这块说起来会比较复杂,我们有时间详细聊聊。”

老朱顿了一下接着说道:“之前我们用到的匿名函数基本都用在了参数传递和引用上,在js中匿名函数还有一个非常重要的用法就是在页面加载以后执行一个匿名函数。”

“这个函数在页面加载后会立即执行,如果函数有参数,可以通过最后面的小括号进行传参。如果这个页面被其他页面加载调用,这里的匿名函数被加载以后就会立即执行,由于匿名函数中我们使用了var进行变量定义,因此匿名函数中的变量不会与主页面中的变量冲突,匿名函数执行结束以后内部的变量也会被销毁,不会占用内存。”

“另外如果你的页面中引入很多其他js文件,为了避免变量冲突,也需要在页面中使用上面的匿名函数来规避风险。”


想学H5的朋友可以关注老炉,您的关注是我持续更新《小白HTML5成长之路》的动力!