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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js仿京东放大镜效果
Aug 09 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
微信小程序实现圆形进度条动画
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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP中对数据库操作的封装
2006/10/09 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
js调用css属性写法
2013/09/21 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
vue生命周期的探索
2019/04/03 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python中import reload __import__的区别详解
2017/10/16 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
初中音乐教学反思
2014/01/12 职场文书
自我鉴定四大框架
2014/01/17 职场文书
求职教师自荐书
2014/06/19 职场文书
党员对照检查材料
2014/09/22 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
小学生通知书评语
2014/12/31 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
《司马光》教学反思
2016/02/22 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS