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 相关文章推荐
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
js调试工具Console命令详解
Oct 21 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
解决vue中provide inject的响应式监听
Apr 19 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
什么是短波收听SWL
2021/03/01 无线电
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
文字幻灯片
2006/06/26 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
详解JS模块导入导出
2017/12/20 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
一套.net面试题及答案
2016/11/02 面试题
办公室主任职责范本
2014/03/07 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
开天辟地观后感
2015/06/09 职场文书
婚育证明样本
2015/06/16 职场文书