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的初始化与对象构建之浅析
Apr 12 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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 中文处理技巧
2010/04/25 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python自动生成model文件过程详解
2019/11/02 Python
python matplotlib拟合直线的实现
2019/11/19 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
网上开商店的创业计划书
2014/01/19 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python