最近没事喜欢看看,一些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前面的!想到的的更多相关文章

  1. JavaScript中Function函数与Object对象的关系

    函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object.Array.Date.RegExp.Math.Error.这些名称实际上表示一个 类型,可以通过new操作符返回一个对 ...

  2. js中使用this的一些注意事项

    先看看这段代码 var x =9; var fobj ={ x:1, test:function(callback){ var x= 2; callback(); } } function pp(){ ...

  3. js函数对象

    函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很 ...

  4. Javascript中的函数(三)

    一:概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质 ...

  5. Kotlin 型变 + 星号投影(扯蛋)

    Kotlin中的型变: 1. in,顾名思义,就是只能作为传入参数的参数类型 2.out, ..............,就是只能作为返回类型参数的参数类型 星号投影: 我们引用官网的吧-- For ...

  6. javascript 函数对象

    http://hi.baidu.com/gdancer/blog/item/a59e2c12479b4e54f919b814.html jQuery的一些写法就是基于这篇文章的原理的..     函数 ...

  7. javascript精雕细琢(四):认亲大戏——通过console.log彻底搞清this

    目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言        JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...

  8. 深入理解JavaScript函数

    本篇文章主要介绍了"深入理解JavaScript函数",主要涉及到JavaScript函数方面的内容,对于深入理解JavaScript函数感兴趣的同学可以参考一下. JavaScr ...

  9. Mybatis插入实体类字段为关键字解决方案

    1. Mybatis插入实体类字段为关键字解决方案 1.1. 前言 可能你插入字段为关键字时报如下错误,且字段名不适合改变 You have an error in your SQL syntax; ...

随机推荐

  1. sublime text配置记录

    代码编辑器有一直都有在尝试新的,如brackets/vs code/webstrom,最后还是用回sublime,每次要重新安装的时候都需要上网搜索相关配置资料,特些记录,以备下次使用: 下载地址 下 ...

  2. Web调试工具——Fiddler介绍

    Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...

  3. atitit.提升开发效率---MDA 软件开发方式的革命(5)----列表查询建模

    )----列表查询建模 1. 配置条件字段@Conditional 1 2. 配置条件字段显示类型为range----@Conditional(displayType = displayType.ra ...

  4. Leetcode 13 Roman to Integer 字符串处理+STL

    题意:将罗马数字1到3999转化成自然数字,这里用了STL库map将罗马字符映射到自然数字. I,V,X,L,C,D,M -> 1,5,10,50,100,500,1000 m[s[i]]< ...

  5. hive学习3(hive基本操作)

    hive基本操作 hive的数据类型 1)基本数据类型 TINYINT,SMALLINT,INT,BIGINT FLOAT/DOUBLE BOOLEAN STRING 2)复合类型 ARRAY:一组有 ...

  6. Python面试题(二)

    打印九九乘法表 思路:利用字符串的连接,梯形输出结果 >>> def st(num): ... l = [] ... for x in xrange(1, num + 1): ... ...

  7. 转:LAV Filter 源代码分析

    1: 总体结构 LAV Filter 是一款视频分离和解码软件,他的分离器封装了FFMPEG中的libavformat,解码器则封装了FFMPEG中的libavcodec.它支持十分广泛的视音频格式. ...

  8. java综合

    java环境变量配置:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 1.导入项目 当下载了包含Eclipse 项目的源代 ...

  9. 【转】javascript运行机制之this详解

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...

  10. runtime MethodSwizzle 实践之 奇怪crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance

    情景: 使用MethodSwizzle 实现对数组.字典 等系统方法的安全校验.显然能达到预期效果,但实际发现当 键盘显示的情况下  home app 进入后台,再单击app  图标 切换回前台时 发 ...