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 篱式条件判断
Aug 22 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python文件排序的方法总结
2020/09/13 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
晚会主持词开场白
2014/03/17 职场文书
求职意向书范文
2014/04/01 职场文书
12岁生日演讲稿
2014/05/14 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
4s店活动策划方案
2014/08/25 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
学雷锋倡议书
2015/01/19 职场文书
离职感谢信
2015/01/21 职场文书
Django框架中模型的用法
2022/06/10 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技