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 focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
vue-cli4使用全局less文件中的变量配置操作
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
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python 可爱的大小写
2008/09/06 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
高中地理教学反思
2014/01/29 职场文书
电大本科自我鉴定
2014/02/05 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
银行授权委托书范本
2014/10/04 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书