1、函数表达式:函数可以通过一个表达式定义,函数表达式可以存储在变量中。
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函数实际上是一个匿名函数(函数没有名称)。
函数存储在变量中,不需要函数名称,通常通过变量名来调用。
上述函数以分号结尾,因为它是一个执行语句。
2、函数声明
function x(a, b) {
return a * b
};
3、自调用函数
函数表达式可以“自调用”,自调用表达式会自动调用。
如果表达式后面紧跟(),则会自动调用。
实例:(function(){
var x="Hello";})();
以上函数实际上是一个匿名自我调用的函数。
函数表达式与函数声明的区别
- 函数声明在函数解析时可以进行函数提升,因此在同一作用域内不论函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定的,并且在表达式赋值完成后该函数才调用。
函数提升是因为js代码是先预载的,在代码编译阶段把函数和函数整体都提前到执行环境顶部,所以我们可以在函数声明之前调用这个函数。
//函数声明 myFunction(5);//25 function myFunction(y) { return y * y; } //js编辑器在预编译阶段把代码编译后其实是这样的: var myFunction; myFunction=function(y) { return y * y; } myFunction(5); //函数表达式 myFunction(5);//Uncaught TypeError: myFunction is not a function var myFunction=function(y) { return y * y; } //函数表达式执行过程 //预编译阶段 var myFunction; //执行阶段 myFunction(5);//此时myFunction=undefined,d当然不是函数了 myFunction=function(y) { return y * y; }
- 函数声明理解为可以定义命名的函数变量,该变量无需赋值,必须以function开头
函数表达式将函数定义为表达式的一部分,通过函数表达式定义的函数可以是命名的,也可以是匿名的,不能以function开头
var a = function() { return 3; } var a = function bar() { return 3; } //匿名函数 (function sayHello() { alert("hello!"); })();
- 不要在块内声明函数,如果确实需要在块内定义函数,则使用函数表达式
if (x) { function foo() {} }//错误 if (x) { var foo = function() {} }//正确
求下面代码的输出结果
判断方法:先进行预编译阶段:定义变量和函数提升;再进行执行阶段。
(1)函数表达式在前,声明函数在后 var x=1,y=0,z=0; var add=function(x){//函数表达式 return x=x+1; } y=add(x); function add(x){ return x=x+3; } z=add(x); console.log(x,y,z);//1,2,2 原因:函数表达式不会被后面同名函数覆盖 //预编译阶段 var add; add=function(x){//函数声明提升 return x=x+3; } var add; //执行阶段 add=function(){ return x=x+1; } y=add(x);//2 z=add(x);//2 (2)同为声明函数 var a=1,b=0,c=0; function sum(a){ return a=a+1; } b=sum(x); function sum(a){ return a=a+3; } c=sum(a); console.log(a,b,c);//1,4,4 原因:声明函数会被后面同名函数覆盖 (3)函数声明在前,函数表达式在后 var x=1,y=0,z=0; function add(x){ return x=x+3; } y=add(x); var add=function(x){ return x=x+1; } z=add(x); console.log(x,y,z);//1,4,2 //预编译阶段 var add; add=function(x){//函数提升 return x=x+3; } var add;//因为之前声明过了,所以再次声明var会被忽略 //执行阶段 y=add(x);//4 add=function(x){ return x=x+1; } z=add(x);//2
例:
function fn (a) { console.log(a); var a = 123; console.log(a); function a () {} console.log(a); console.log(b); var b = function () {} console.log(b); function d () {} console.log(d); } fn(1);
//输出结果 //ƒ a () {} //123 //123 //undefined //ƒ () {} //ƒ d () {}