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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jQuery is()函数用法3例
May 06 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
js事件触发操作实例分析
Jun 21 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP中动态显示签名和ip原理
2007/03/28 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
使用TensorFlow实现SVM
2018/09/06 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
对python 调用类属性的方法详解
2019/07/02 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
学雷锋志愿者活动方案
2014/08/21 职场文书
校友回访母校寄语
2015/02/26 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js