JS匿名函数和匿名自执行函数概念与用法分析


Posted in Javascript onMarch 16, 2018

本文实例讲述了JS匿名函数和匿名自执行函数概念与用法。分享给大家供大家参考,具体如下:

1. 匿名函数的常见场景

js中的匿名函数是一种很常见的函数类型,比较常见的场景:

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  //匿名函数的第一种情形
  var btn=document.querySelector("#btn");
  btn.onclick=function(){
    // alert("aaaaa");
  }
  //匿名函数的第二种情形
  setInterval(function(){
    // alert("bbbbb");
  }, 1000);
  //匿名函数的第三种情形
  var fun=function(){
    alert("ccccc");
  }
  // fun();
  //匿名函数的第四种情形
  var obj={
    name:"dddd",
    say:function(){
      alert(this.name);
    }
  }
  obj.say();
</script>

上面展示的就是常见的匿名函数的使用场景。(注意:querySelector是H5中新增的查找dom元素的方法)

2. 匿名自执行函数

见名思义,匿名自执行函数首先是一个匿名函数,但是这个函数是可以自己自动执行的,不需要借助其他的元素。

<input type="button" value="点击" id="btn">
<script type="text/javascript">
//1,匿名函数的第一种实现方式
(function(data){
  // alert(data);
})("eee");
//2.匿名自执行函数的第二种实现方式
(function(){
  // alert("fff");
}());
//3.匿名自执行函数的第三种实现方式
!function(data){
  // alert(data);
}("hhh");
//4.匿名自执行函数的第四种实现方式
var fun=function(data){
  alert(data);
}("iii");

从上面的代码块中我们可以总结出实现匿名自执行函数的方法一般有四种。

3. 匿名自执行函数的作用

①. 匿名自执行函数最常见的作用是用于实现闭包的情况中。关于闭包的概念我会在后面的文章中详细介绍。这里简单说明一下闭包。闭包:闭包是js的一种特性,我们可以通过闭包实现函数内外部的连接,并且可以使得函数的局部变量始终存在于内存中。

②. 匿名自执行函数还可以用于在js中模拟创建块级作用域,即如果使用匿名自执行函数将某些代码包裹起来可以实现块级作用域的效果,减少全局变量的数量,在匿名自执行函数执行结束后变量就会被内存释放掉,从而也会节省了内存。

4. 匿名函数和匿名自执行函数总结

匿名函数可以简单理解为没有名字的函数,常见的场景一共就有4种。

匿名自执行函数可以简单理解为可以自己执行的匿名函数,实现匿名自执行函数的方式一共有4种。

匿名自执行函数的作用就是用于闭包和创建独立的命名空间两个方面。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
微信小程序日历效果
Dec 29 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
js判断密码强度的方法
Mar 18 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
vue-router相关基础知识及工作原理
Mar 16 #Javascript
axios post提交formdata的实例
Mar 16 #Javascript
在vue组件中使用axios的方法
Mar 16 #Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 #Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 #Javascript
vue axios 表单提交上传图片的实例
Mar 16 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python中几种导入模块的方式总结
2017/04/27 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
2014的自我评价
2014/01/13 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
公司任命书模板
2014/06/06 职场文书
教师辞职书范文
2015/02/26 职场文书
人事任命书范本
2015/09/21 职场文书
导游词之天津盘山
2019/11/01 职场文书
python实现A*寻路算法
2021/06/13 Python