从function前面的!想到的
最近没事喜欢看看,一些js库的源码,结果发现库前不是加一个!就是加+或者一个(),心中猜出个大概知道这个是让函数自动执行,可是这么多符号达到同一个目的,原理是什么呢,下面做一下剖析:
先从IIFE开始介绍
IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)
- function(){
- alert('IIFE');
- }
把这个代码放在console中执行会报错
因为这个是一个匿名函数,要想让它正常运行就必须给个函数名,然后通过函数名调用。
好了这下知道为啥我们看到很多类库写的时候也是匿名函数结果不报错了吧,就是因为这些前面加的符号的原因。
其实在匿名函数前面加上这些符号后,就把一个函数声明语句变成了一个函数表达式,是表达式就会在script标签中自动执行。
运算符
①为什么加上了这些运算符后就能让一个匿名函数变成一个不会报错的函数表达式呢?
我们自然会想到javascript的解析器到底是怎么工作识别的呢,js解析器执行js表达式这个肯定是没有问题的。其实无论是括号,还是感叹号,让整个语句合法做的事情只有一件,就是让一个函数声明语句变成了一个表达式。所以我们让一个函数定义变成一个函数表达式来执行就不会报错。
②原理
- 这样是一个函数声明
- function a(){
- alert('IIFE');
- }
- 这样是一个函数调用
- a();
- 理解一下就是在一个声明了的函数后面加上一个()就可以调用函数了
- function a(){
- alert('IIFE');
- }()
- 就这样
但是我们按上面在console中执行发现出错了
因为这样的代码混淆了函数声明和函数调用,以这种方式声明的函数 a
,就应该以 a();
的方式调用。
但是括号则不同,它将一个函数声明转化成了一个表达式,解析器不再以函数声明的方式处理函数a,而是作为一个函数表达式处理,也因此只有在程序执行到函数a时它才能被访问。所以,任何消除函数声明和函数表达式间歧义的方法,都可以被解析器正确识别。所以,赋值,逻辑,甚至是逗号,各种操作符都可以告诉解析器,这个不是函数声明,它是个函数表达式。并且,对函数一元运算可以算的上是消除歧义最快的方式,感叹号只是其中之一,如果不在乎返回值,这些一元运算都是有效的
- !function(){alert('iifksp')}() // true
- +function(){alert('iifksp')}() // NaN
- -function(){alert('iifksp')}() // NaN
- ~function(){alert('iifksp')}() // -1
性能
针对这些一元运算符,到底用哪个好呢,测试发现()的性能最优越,但是差别都不是特明显,所以对于一个库来说用几个这样的符号来说看不出什么影响,所以平常用! + -都可以,就看个人的代码习惯,当然最好还是用()。
参考:
①http://swordair.com/function-and-exclamation-mark/
② http://suqing.iteye.com/blog/1981591
从function前面的!想到的的更多相关文章
- JavaScript中Function函数与Object对象的关系
函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object.Array.Date.RegExp.Math.Error.这些名称实际上表示一个 类型,可以通过new操作符返回一个对 ...
- js中使用this的一些注意事项
先看看这段代码 var x =9; var fobj ={ x:1, test:function(callback){ var x= 2; callback(); } } function pp(){ ...
- js函数对象
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很 ...
- Javascript中的函数(三)
一:概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质 ...
- Kotlin 型变 + 星号投影(扯蛋)
Kotlin中的型变: 1. in,顾名思义,就是只能作为传入参数的参数类型 2.out, ..............,就是只能作为返回类型参数的参数类型 星号投影: 我们引用官网的吧-- For ...
- javascript 函数对象
http://hi.baidu.com/gdancer/blog/item/a59e2c12479b4e54f919b814.html jQuery的一些写法就是基于这篇文章的原理的.. 函数 ...
- javascript精雕细琢(四):认亲大戏——通过console.log彻底搞清this
目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言 JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...
- 深入理解JavaScript函数
本篇文章主要介绍了"深入理解JavaScript函数",主要涉及到JavaScript函数方面的内容,对于深入理解JavaScript函数感兴趣的同学可以参考一下. JavaScr ...
- Mybatis插入实体类字段为关键字解决方案
1. Mybatis插入实体类字段为关键字解决方案 1.1. 前言 可能你插入字段为关键字时报如下错误,且字段名不适合改变 You have an error in your SQL syntax; ...
随机推荐
- Java基础的一次总结
二重循环核心:就是我们学习的内容中,一直在不停的打印图形,当我们写完所有打印图形的题目后,我们站在一个 新的高度上来看二重循环解决图形问题的时候.我们知道核心思想就是:就是寻找外层循环变量i和内层循环 ...
- .NET 自带的动态代理+Expression 实现AOP
下面代码(摘抄之别处,原创在哪不知)是采用TransparentProxy和RealProxy实现对象的动态代理.碍于其使用反射掉用方法,所以就小试着将反射改成Expression以提高执行的效率.第 ...
- C#与数据库访问技术总结(十一)之数据阅读器(DataReader)1
数据阅读器 当执行返回结果集的命令时,需要一个方法从结果集中提取数据. 处理结果集的方法有两个: 第一,使用数据阅读器(DataReader): 第二,同时使用数据适配器(Data Adapter)和 ...
- Windows 服务器开通防火墙后,IISFTP和Serv U开通的FTP账号不能登录
应广大服务器客户要求一至反应Windows 服务器开通防火墙后,IISFTP和Serv U开通的FTP账号不能登录,出现列表超时的情况,特提供以下解决方案: 1. IIS FTP用户解决方法: 在防火 ...
- 如何利用tomcat搭建一个动态服务器
这篇文章只记录已解压缩包的方式安装,通常linux服务器上也是这样. 1.下载tomcat.zip压缩包. http://tomcat.apache.org/download-70.cgi 2.把zi ...
- How to install ZeroMQ on Ubuntu14.04
Prepare: sudo apt-get install libtool autoconf automake uuid-dev sudo apt-get install python-dev sud ...
- Atitit. 构造ast 语法树的总结attilax v2 q0f
Atitit. 构造ast 语法树的总结attilax v2 q0f 1. Ast结构树形1 2. ast view (自是个160k的jar )2 2.1. 多条语句ast结构2 2.2. 变量定义 ...
- atitit.表单验证 的dsl 本质跟 easyui ligerui比较
atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...
- hdu1875 畅通工程再续 最小生成树并查集解决---kruskal
http://acm.hdu.edu.cn/showproblem.php?pid=1875 New~ 欢迎“热爱编程”的高考少年——报考杭州电子科技大学计算机学院关于2015年杭电ACM暑期集训队的 ...
- [推荐] kylinPET是一款功能强大的性能测试工具
[推荐] kylinPET是一款功能强大的性能测试工具 官方网站: http://www.kylinpet.com/