JS中超越现实的匿名函数用法实例分析


Posted in Javascript onJune 21, 2019

本文实例讲述了JS中超越现实的匿名函数用法。分享给大家供大家参考,具体如下:

一般函数:

function show1(name){
    alert(name); //打印:zhangsan
  }
show1("zhangsan");

匿名函数:

var show2 = function (name) {
    alert(name); //打印:张三
  }
show2("张三");

上面2种定义函数的区别:

1.我们知道所有的function都会在window对象里

function show1(name){
    alert(name); //打印:张三
  }
  window.show1("张三");

即使在函数定义之前调用

window.show1("张三");
  function show1(name){
    alert(name); //打印:张三
  }

这是因为这种”有名字”的函数在JS引擎初始化的时候就加载到作用域里面

2.如果是匿名函数

window.show2("李四");
  var show2 = function (name) {
    alert(name); //打印:李四
  }

控制台会打印:TypeError: window.show2 is not a function

二、如果我们需要合并上面2个函数

<script>
  function show(name) {
    return function () {
      alert(name); //内部函数是可以调用外层的变量的
    }
  }
  show("王五");
</script>

猜猜会打印什么?什么也没有,也不会报错。这是因为执行show()只是返回了一个函数本身,并没有执行这个函数。

show("王五")();

这样执行,就打印:王五

如果里面的函数也要传入变量

<script>
  function show(name) {
    return function (age) {
      alert(name); //打印:王五
      alert(age); //打印:18
    }
  }
  show("王五")(18);
</script>
<script>
  function show(name) {
    return function (name) {
      alert(name);
    }
  }
  show("王五")(18);
</script>

猜猜是打印“王五”还是“18”?只会打印“18”。

三、匿名函数的自执行

<script>
  (function (name) {
    alert(name);  //打印:哈哈
  })("哈哈")
</script>

以上是推荐的写法。

其他写法:

-function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")
+function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")
!function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")
[function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")]
new function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")
~function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")
void function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
js事件触发操作实例分析
Jun 21 #Javascript
微信小程序实现下拉刷新动画
Jun 21 #Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
Python迭代和迭代器详解
2016/11/10 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
python 录制系统声音的示例
2020/12/21 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
八年级生物教学反思
2014/01/22 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
财务担保书范文
2014/04/02 职场文书
求职信内容怎么写
2014/05/26 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js