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打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
详解小程序云开发数据库
May 20 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
JS实现扫雷项目总结
May 19 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
非常好的js代码
2006/06/27 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
理解javascript模块化
2016/03/28 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中的闭包实例详解
2014/08/29 Python
python的sorted用法详解
2019/06/25 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
机关财务管理制度
2014/01/17 职场文书
图书室管理制度
2014/01/19 职场文书
幼儿园运动会口号
2014/06/07 职场文书