js匿名函数自调用

JavaScript029

js匿名函数自调用,第1张

对于一个js匿名函数

自调用这个匿名函数

这样解释器会报错

为什么呢？ 原因可以看一个普通js函数的调用

这是一个函数声明，如果在这么一个声明后直接加上括号调用，解析器不能理解而会报错：

而a函数申明时候，调用就可以直接加 ()

这里可以看出无论是命名函数还是匿名函数，都是函数申明，而直接对匿名函数加 () 之后，解释器就不能理解而报错了

要自调用匿名函数，就需要把匿名函数声明语句变成一个表达式

JavaScript的函数定义分为函数声明和函数表达式。

表达式语句不得以 function 或者 { 开头：

ExpressionStatement → [lookahead ∉ {{, function}] Expression

”裸写“成function fname() { }的，是函数声明，它不能是匿名的。

var c = 1

function test(x) {

console.log(x)

}

// 调用

test(x)

嵌套定义的函数也可以是函数声明。

// innder、outer都是函数声明，只不过外界无法使用inner函数。。

function outer() {

var x = 1

function inner() {

console.log("Hi")

}

}

函数作为表达式出现、或者作为其他表达式的一部分时才是函数表达式（有点绕。。），此时函数可以是匿名或者有名的。

比如赋值表达式的右边；()和[]里面；!等符号后面；return语句后面；。。

var foo = function() {

...

}

(function foo() {})

[Function bar() {}]

function outer() {

var x = 1

return function inner() {

console.log(x)

}

}

描述不同语法结构的语义时，主要和表达式的求值相关。比如赋值的时候需要对=右边的表达式求值，return的时候需要对return后面的求值。

函数表达式的值可以是一个函数对象，或者对这个函数对象进行调用（也就是执行它）产生的结果。

// =右边表达式的”值“是一个函数对象，赋给t。不发生函数调用

var t = function () {

console.log(3)

}

// =右边表达式，先创建函数对象再调用它。t是5

var t = function (x) {

return x + 2

}(3)

函数声明自身不能“求值”。

!function跟(function(){... })()函数意义相同，叫做立即运行的匿名函数(也叫立即调用函数)。

js中可以这样创建一个匿名函数：

(function(){do something...})()

//或

(function(){do something...}())

而匿名函数后面的小括号()是为了让匿名函数立即执行，其实就是一个函数调用。

这样写会报错：

function(){alert(1)}()

因为function前面没有(或者! ~之类的运算符，js解析器会试图将关键字function解析成函数声明语句，而不是函数定义表达式。

作为组运算符，小括号()会将其内部的表达式当成一个整体，然后返回结果，所以定义一个匿名函数正确的格式就是用小括号将函数体括起来。

同样的! ~ + -等运算符也有同样的效果，这是因为匿名函数也是一种值，这些运算符会将后面的函数体当成一个整体，先对匿名函数进行求值，然后在对结果进行运算。

不过这些运算符虽然能够达到让匿名函数立即执行的目的，但是要小心他们是有副作用的，比如：

!function() {return 1}()//false

~function() {return 1}()//-2

-function() {return false}()//0

-function() {return false}()//0

没错，他们会对函数的返回值进行运算，这样可能会导致最终的结果和你想要的结果不一样。当然，对于那些没有返回值的函数来说，当然是没有什么影响了。

扩展资料：

匿名函数的调用：

var abc=function(x,y){

return x+y

}

alert(abc(2,3))// "5"

上面的操作其实就等于换个方式去定义函数，这种用法是我们比较频繁遇到的。

例如我们在设定一个DOM元素事件处理函数的时候，我们通常都不会为他们定名字，而是赋予它的对应事件引用一个匿名函数。

使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表）。

alert((new Function("x","y","return x*y"))(2,3))// "6"

参考资料来源：百度百科-JavaScript