function(){}、var fun=function(){}和function fun(){}的區別

1、基本定義javascript

1.函數聲明:使用function聲明函數,並指定函數名。java

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

2.函數表達式:使用function聲明函數,但未指定函數名,將匿名函數賦予一個變量。閉包

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

3.匿名函數:使用function聲明函數,但未指定函數名。匿名函數屬於函數表達式,匿名函數有不少做用,賦予一個變量則建立函數,賦予一個事件則成爲事件處理程序或建立閉包等等。函數

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

2、實例補充this

1. 函數聲明可在當前做用域下提早調用執行,函數表達式需等執行到該函數後,方可執行,不可提早調用。spa

fun();
function fun() {
    // ...... 
}
// 正確,函數聲明可提早調用
fun()
var fun = function() {
    // ......
} 
// 錯誤,fun未保存對函數的引用,函數調用需放在函數表達式後面

2.函數表達式可直接在函數後加括號調用。code

//傳統方法
var fun1 = function() {
    console.log('哈哈');
}
fun1();

//函數表達式後直接加括號調用            
var fun2 = function() {
    console.log('哈哈');
}()

3.當即執行函數(function(){})()的第一個小括號必需要加,由於若是不加第一個小括號的話,雖然匿名函數屬於函數表達式,但未進行賦值,因此javascript解析時將開頭的function當作函數聲明,故報錯提示須要函數名。加了第一個小括號,意思就是將函數聲明轉化爲函數表達式。blog

//正確      
(function(){
    console.log('哈哈');
})();
// 報錯
function(){
    console.log('哈哈');
}();

4.(function(){})()當即執行函數的注意點:在第一對括號內是一個匿名函數,第二個括號會當即調用這個匿名函數的返回值,也就是匿名函數中的內容被當即執行。這個玩意兒的強大之處在於它獨立了一個做用域(括號中內容執行完後會被當即回收),內部變量外部沒法訪問,而它又能經過this保留字,來訪問外部變量。好處:內部定義的變量不會跟外部的變量有衝突,達到保護內部變量的做用。事件

3、JavaScript變量提高的概念ip

變量提高:函數聲明和變量聲明老是會被解釋器悄悄地被"提高"到方法體的最頂部。

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();
相關文章
相關標籤/搜索