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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
Position属性之relative用法
Dec 14 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 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
PHP编程与应用
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python中enumerate函数代码解析
2017/10/31 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python 异或加密字符串的实例
2018/10/14 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
《夹竹桃》教学反思
2014/04/20 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
在职证明书模板
2015/06/15 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python