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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
Javascript Math对象
Aug 13 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
js实现右键菜单功能
Nov 28 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 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实现小型站点广告管理(修正版)
2006/10/09 PHP
php购物车实现方法
2015/01/03 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
分页栏的web标准实现
2011/11/01 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
python爬虫框架talonspider简单介绍
2017/06/09 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python随机数分布random均匀分布实例
2019/11/27 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
安全生产目标责任书
2014/04/14 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
爱耳日活动总结
2014/04/30 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Python字典和列表性能之间的比较
2021/06/07 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android