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 相关文章推荐
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
实现一个简单得数据响应系统
Nov 11 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python入门篇之对象类型
2014/10/17 Python
python matplotlib画图实例代码分享
2017/12/27 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
公司面试感谢信
2014/02/01 职场文书
毕业实习评语
2014/02/10 职场文书
企业诚信承诺书
2014/05/23 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
指导老师鉴定意见
2015/06/05 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
SpringBoot快速入门详解
2021/07/21 Java/Android