Javascript自执行匿名函数(function() { })()的原理浅析


Posted in Javascript onMay 15, 2016

函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数

下面是一个最常见的自执行函数:

// 传统匿名函数
(function() {
alert('hello');
})();

这段代码的执行效果就是在页面再载入时弹出:"hello"

是什么促使它自动执行的?,来看下面的代码

// 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,-
~function(){
alert('hello');
}();
!function(){
alert('hello');
}();
+function(){
alert('hello');
}();
-function(){
alert('hello');
}();

这些写法与上文所说的传统方式执行起来并无区别,

我发现,这些写法的共同点是运算符,其实传统方式的小括号()也属于运算的一种,出现在:a=b*(c+d),

运算符 + 传递给自生的参数 = 函数自动执行?但有些符号也不支持,比如“=,*,/”号,它自执行的原因还是很神秘,网上也找不到像样的答案

然后我发现了一个神奇的现象,这些运算符可以无限叠加。。。。。。

// function前面是特定符号可以无限叠加...
~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~~~~~~~~+-!!!!!!+function a(b) {
alert('hello');
}();

程序正常运行!!!!!!

但是,有两种情况会报错

如果连续出现三个及以上的“+”或“-”符号,则会出错;

如果连续出现两个“+”或“-”符号再接上其他符号,则会出错,例如“++~”,“--+”;

错误提示:Uncaught ReferenceError: Invalid left-hand side expression in prefix operation (意思是左侧表达式错误)

然后我用同样的符号来运算一个变量,发现一模一样,这或许已经可以说明是javascript的运算促使函数的自动执行,也可以理解为通过运算来调用这个函数!

并不是函数自己执行了,而是通过运算来调用这个函数!,但只支持部分运算方式!

此外,这个自执行函数,未必是匿名函数!看上方的代码,我在运算符后的函数中,定义了函数名称a,并没有什么异常,但也没什么卵用- -!,这个a依然无法被其他方法调用,但我觉得很多人都称其为匿名函数有点不妥!

以上所述是小编给大家介绍的Javascript自执行匿名函数(function() { })()的原理浅析,希望对大家有所帮助!

Javascript 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
JavaScript绑定事件监听函数的通用方法
May 14 #Javascript
易被忽视的js事件问题总结
May 14 #Javascript
jQuery防止重复绑定事件的解决方法
May 14 #Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 #Javascript
jquery动态切换背景图片的简单实现方法
May 14 #Javascript
You might like
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python对列表的操作知识点详解
2019/08/20 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
创意广告词
2014/03/17 职场文书
会计求职信
2014/05/29 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏