理解JS立即执行函数调用原理

函数的两种定义方法:
函数声明

function fn1(){
      console.log('函数声明');
}

函数表达式

var fn2 = function(){
     console.log('函数表达式');
};

函数包括四个部分,function关键字、函数名、圆括号、花括号。
期中函数名称可以省略 ,此时函数被称为匿名函数
当这种写法出现在表达式,又称为函数 表达式

函数可以出现在任何允许表达式出现的地方 ---《javaScript语言精粹》

这两种定义函数的方法有什么区别呢?看看以下的对比:

//函数调用放置在声明函数之前,函数能够被正常调用
fn1()
function fn1(){
    console.log('函数声明')
}  //函数声明

//函数调用放置在函数表达式之前,结果出现报警
fn1()
var fn1 = function(){
    console.log('函数表达式')
}  //Uncaught TypeError: fn1 is not a function(…)

根据JavaScript的解析方式,先扫描一遍整个js部分,将函数声明提升至最前方(函数声明是一等公民),而函数表达式则只有在解析到其所在位置时才会被解析

根据这个情况,函数声明实际上实在其函数调用前解析的,所以它能够被正常调用
再看看下面的对比:

//函数声明后跟一对圆括号无法调用
function fn1(){
    console.log('函数声明')
}()  //Uncaught SyntaxError: Unexpected token ((…)

//函数表达式后跟一对圆括号可以立即调用
var fn1 = function(){
    console.log('函数表达式')
}()  //函数表达式

由以上对比可以知道,函数以表达式情况出现时,可以以后面加一对圆括号的方式立即调用
所以我们常见的这种立即调用的方法,实际上可以看成将匿名函数转换成了函数表达式,随后立即调用

//以下是调试台的调试结果,利用这些运算符可以将函数转换成表达式形式
//这些可以实现立即调用,而剩余符号会导致报错
//不过其余的运算符会出现将函数返回值进行运算的情况,所以常用括号

(function(){console.log('OK')})()
//OK
//undefined

+function(){console.log('OK')}()
//OK
//NaN

-function(){console.log('OK')}()
//OK
//NaN

~function(){console.log('OK')}()
//OK
//-1

!function(){console.log('OK')}()
//OK
//true

你可能感兴趣的:(理解JS立即执行函数调用原理)