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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
详解React-Todos入门例子
Nov 08 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
Vue实现选择城市功能
May 27 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
layui table单元格事件修改值的方法
Sep 24 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模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python读取LMDB中图像的方法
2018/07/02 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
外包公司软件测试工程师
2014/11/01 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
表决心的诗句大全
2014/03/11 职场文书
保险专业求职信
2014/07/07 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python