function(){}var fun=function(){}和function fun(){}的区别

Posted 2021-01-23 fhc1994

一、基本定义

1.函数声明：使用function声明函数，并指定函数名。

function fun() {
    // ......   
}

2.函数表达式：使用function声明函数，但未指定函数名，将匿名函数赋予一个变量。

var fun = function() {
    // ......
}

3.匿名函数：使用function声明函数，但未指定函数名。匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

function() {
    // ......
}

二、实例补充

1. 函数声明可在当前作用域下提前调用执行，函数表达式需等执行到该函数后，方可执行，不可提前调用。

fun();
function fun() {
    // ...... 
}
// 正确，函数声明可提前调用

fun()
var fun = function() {
    // ......
} 
// 错误，fun未保存对函数的引用，函数调用需放在函数表达式后面

2.函数表达式可直接在函数后加括号调用。

//传统方法
var fun1 = function() {
    console.log(‘哈哈‘);
}
fun1();

//函数表达式后直接加括号调用            
var fun2 = function() {
    console.log(‘哈哈‘);
}()

3.立即执行函数(function(){})()的第一个小括号必须要加，因为如果不加第一个小括号的话，虽然匿名函数属于函数表达式，但未进行赋值，所以javascript解析时将开头的function当做函数声明，故报错提示需要函数名。加了第一个小括号，意思就是将函数声明转化为函数表达式。

//正确 　    
(function(){
    console.log(‘哈哈‘);
})();
// 报错
function(){
    console.log(‘哈哈‘);
}();

4.(function(){})()立即执行函数的注意点：在第一对括号内是一个匿名函数，第二个括号会立即调用这个匿名函数的返回值，也就是匿名函数中的内容被立即执行。这个玩意儿的强大之处在于它独立了一个作用域(括号中内容执行完后会被立即回收)，内部变量外部无法访问，而它又能通过this保留字，来访问外部变量。好处：内部定义的变量不会跟外部的变量有冲突，达到保护内部变量的作用。

三、JavaScript变量提升的概念

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

1.变量可以在使用后声明，也就是变量可以先使用再声明。（因为函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部）

x = 5; // 变量 x 设置为 5
console.log(x);    //正常输出5
var x; // 声明 x


var y; // 声明 y
y = 5; // 变量 y 设置为 5
console.log(y);    //正常输出5

2.JavaScript初始化不会提升。（JavaScript 只有声明的变量会提升，初始化的不会。）

var x = 1;  // 初始化 x
var y = 2;  // 初始化 y
console.log(x);  //正常输出1
console.log(y);  //正常输出2


var a = 3;  // 初始化 a
console.log(a);  //正常输出3
console.log(b);  //输出undefined
var b = 4;  // 初始化 b

3.一个有趣的例子

var a = 1;  //初始化a为1
var b = 2;  //初始化b为2

var fun=function(){
    console.log(a); //undefined 
    var a = 22;
    console.log(b); //undefined 
    var b;
}
fun();

为什么会得到上述结果呢？原因如下：

JavaScript 只有声明的变量会提升，初始化的不会。所以在function中，有var a = 22，这是初始化，变量的声明会提升，但是变量的值没有提升。有var b , 声明的变量会提升到function最开头，但因为没有赋值，所以会输出undefined。上述代码等价于：

var a = 1;  //初始化a为1
var b = 2;  //初始化b为2
var fun=function(){
    var a;
    var b;
    console.log(a); //undefined 
    a = 22;
    console.log(b); //undefined 
}
fun();

4.另一个有趣的例子

var a = 1;  //初始化a为1
(function(){
    a=3;
    console.log(a);  //3
    var a;            
})();

(function(){
    console.log(this.a);  //1            
})();

var fun=function(){
    console.log(this.a);  //1
}
fun();

关键：立即执行函数、函数表达式和函数声明能通过this保留字，来访问外部变量。

当然如果function函数内部没有声明外部已有变量的话，function函数内部可直接使用外部已有变量，不使用this保留字也是可以的。（函数声明、函数表达式、立即执行函数结果都是这样，原因应该是当在function函数内部没有找到定义的变量时，会自动扩大作用域，向上搜索给出的变量）

var a = 1;  //初始化a为1
(function(){
    console.log(a);  //1        
})();
var fun=function(){
    console.log(a);  //1
}
fun();