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快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
前端天气插件tpwidget使用方法详解
Jun 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英文字符串截取代码分享
2014/07/15 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python变量命名的7条建议
2019/07/04 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
采购员岗位职责
2013/11/15 职场文书
房地产广告词大全
2014/03/19 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
会议开幕词
2015/01/28 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
python中如何对多变量连续赋值
2021/06/03 Python