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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
Vue3.x源码调试的实现方法
Oct 13 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
php5.2.0内存管理改进
2007/01/22 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php与paypal整合方法
2010/11/28 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP生成plist数据的方法
2015/06/16 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
python自动安装pip
2014/04/24 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python求最大值最小值方法总结
2019/06/25 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python函数定义和调用过程详解
2020/02/09 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
护士长竞聘演讲稿
2014/04/30 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
奖励申请报告范文
2015/05/15 职场文书
2015教师节通讯稿
2015/07/20 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
Nginx安装配置详解
2022/06/25 Servers