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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 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横向重复区域显示二法
2008/09/25 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php数组查找函数总结
2014/11/18 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python在线运行代码助手
2016/07/15 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python re的findall和finditer的区别详解
2020/11/15 Python
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
银行实习自我鉴定
2013/10/12 职场文书
企业授权委托书范本
2014/04/02 职场文书
小学班主任事迹材料
2014/12/17 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
承诺书范本
2015/01/21 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
中秋节祝酒词
2015/08/12 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL