函数的自执行,变量提升和函数提升
其实之前虽然刚开始学习JavaScript的时候经常看到function add(){}、var add=function(){}、function(){}之类的这种写法,但是具体是什么叫什么却没有去考虑过这个问题……
function add(){}这种写法叫做函数声明
var add=function(){}这种写法叫做函数表达式
function(){}这种是匿名函数
一、函数的自执行
那么有没有办法让它们不用通过我们的调用比如
function add(){}; add();
就可以自我执行呢?
我们来试试看这三种方法
//函数表达式自执行尝试 var add=function(x,y){ console.log(x+y); }(5,6); //结果:11(正确) ) //函数声明自执行尝试 function add(x,y){ console.log(x+y); }(5,6); //结果:无法执行,也没有抛出错误 //匿名函数自执行尝试 function(){ console.log(arguments[0]+arguments[1]); }(5,6); //结果:这个的问题就大了,抛出语法错误Uncaught SyntaxError: Unexpected token (
函数表达式后面加括号可以立即执行函数,然而函数声明却不可以!!
很奇怪地,匿名函数也是函数表达式,但是它为什么会抛出语法错误呢?这是因为匿名函数虽然属于函数表达式,但是很明显它没有赋值操作,JavaScript解析引擎会把它当做函数声明,会跟你要一个函数名,但是它是匿名函数,肯定没有名字,JavaScript混了,直接给你个错误让你反省一下。
那要怎么解决匿名函数自执行这个问题?其实很简单,只要告诉JavaScript解析器匿名函数不是函数声明就好了。
//加号 +function(){ console.log(arguments[0]+arguments[1]); }(5,6); //减号 -function(){ console.log(arguments[0]+arguments[1]); }(5,6); //感叹号 !function(){ console.log(arguments[0]+arguments[1]); }(5,6); //括号 (function(){ console.log(arguments[0]+arguments[1]); })(5,6); (function(){ console.log(arguments[0]+arguments[1]); }(5,6));
接下来就是解决函数声明自执行的问题了,其实方法跟匿名函数自执行的方法是一样的,加号,减号,感叹号,括号,都可以解决
!function add(x,y){ console.log(x+y); }(5,6); +function add(x,y){ console.log(x+y); }(5,6); -function add(x,y){ console.log(x+y); }(5,6); (function add(x,y){ console.log(x+y); })(5,6); (function add(x,y){ console.log(x+y); }(5,6));
二、变量提升、函数提升
函数声明才会提升,函数表达式是属于变量提升
我们先来看一下下面这段代码的结果是什么
console.log(a); console.log(b); console.log(c); var a=1; function b(){ return 2; } var c=function(){ return 3; }
结果
console.log(c)的结果跟console.log(a)是一样的,说明函数表达式是属于变量提升的。这样证明还是有点草率,我们再来看看下面的代码
console.log(b()); console.log(c()); function b(){ return 2; } var c=function(){ return 3; }
结果
结果很明显了,函数c只是提升了变量名c而已,函数声明才会提升!
那么变量的提升和函数声明的提升哪个提升的优先级比较高呢?
console.log(b); console.log(b()); var b=1; function b(){ return 2; }
结果
结果显示函数声明提升的优先级比变量提升还要高。