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 01 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php后门URL的防范
2013/11/12 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Django中的静态文件管理过程解析
2019/08/01 Python
如何通过命令行进入python
2020/07/06 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
大型活动策划方案
2014/01/12 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
软件项目实施计划书
2014/05/02 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
公安学专业求职信
2014/07/27 职场文书
培训通知
2015/04/17 职场文书
毕业生入职感言
2015/07/31 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js