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的函数
Jan 31 Javascript
js的with语句使用方法
Sep 21 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
使用js画图之饼图
Jan 12 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Openlayers实现地图全屏显示
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,不用COM,生成excel文件
2006/10/09 PHP
屏蔽浏览器缓存另类方法
2006/10/09 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
诚信考试标语
2014/06/24 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
JavaScript实现简单计时器
2021/06/22 Javascript
利用 JavaScript 构建命令行应用
2021/11/17 Javascript