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学习小结(属性定义方法)
Nov 19 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
基于form-data请求格式详解
Oct 29 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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数学运算
2011/12/30 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php pdo操作数据库示例
2017/03/10 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
js创建数组的简单方法
2016/07/27 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
详解vue v-model
2020/08/31 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
经典c++面试题二
2015/08/14 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
职业女性的职业规划
2014/03/04 职场文书
新年团拜会主持词
2014/04/02 职场文书
信息工作经验交流材料
2014/05/28 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
超市收银员岗位职责
2015/04/07 职场文书
债务纠纷代理词
2015/05/25 职场文书
小学班主任工作随笔
2015/08/15 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书