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 json 新手入门文档
Dec 03 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
js中的reduce()函数讲解
Jan 18 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
phpmyadmin操作流程
2006/10/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
传播学毕业生求职信
2013/10/11 职场文书
个人自我鉴定总结
2014/03/25 职场文书
英语分层教学实施方案
2014/06/15 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
个人欠条范本
2015/07/03 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Python合并多张图片成PDF
2021/06/09 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis