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实现的购物车效果可以运用在好多地方
May 09 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
解决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
配置支持SSI
2006/11/25 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
php引用传值实例详解学习
2013/11/06 PHP
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
python让列表倒序输出的实例
2018/06/25 Python
Python requests库用法实例详解
2018/08/14 Python
python实现汽车管理系统
2018/11/30 Python
python-opencv颜色提取分割方法
2018/12/08 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
解决python 找不到module的问题
2020/02/12 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python try...finally...的实现方法
2020/11/25 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
高中毕业自我鉴定
2013/12/19 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
规划编制实施方案
2014/03/15 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL