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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js 函数的副作用分析
Aug 23 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
详解微信小程序回到顶部的两种方式
May 09 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和ACCESS写聊天室(六)
2006/10/09 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
Java中final关键字详解
2015/08/10 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
原生js实现购物车
2020/09/23 Javascript
python实现k-means聚类算法
2018/02/23 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python输入错误后删除的方法
2019/10/12 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python中如何打包用户自定义模块
2020/09/23 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
甜点店创业计划书
2014/01/27 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
2014年防汛工作总结
2014/12/08 职场文书
创业计划书之宠物店
2019/09/19 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python