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 保存文件到本地实现方法
Nov 29 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 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
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue实现购物车加减
2020/05/30 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
使用Python进行目录的对比方法
2018/11/01 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python tornado使用流生成图片的例子
2019/11/18 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python属于跨平台语言码
2020/06/09 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
单位作风建设剖析材料
2014/10/11 职场文书
护理医院见习报告
2014/11/03 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
起诉意见书范文
2015/05/19 职场文书
纪委立案决定书
2015/06/24 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
python 实现图片特效处理
2022/04/03 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android