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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
iview中Select 选择器多选校验方法
Mar 15 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php动态变量定义及使用
2015/06/10 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
用户注册常用javascript代码
2009/08/29 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python实现端口复用实例代码
2014/07/03 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
中青班党性分析材料
2014/02/16 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
大学迎新生标语
2014/10/06 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书