JS函數-函式宣告和函數運算式之間的恩怨

JS函數-函式宣告和函數運算式之間的恩怨

“函式宣告”和“函數運算式”其實說白了 就是定義函數的方式

函式宣告：

 

function 函數名（）{.....}

通過上面方式定義的函數就是函式宣告

 

 

函數運算式：通過函數運算式定義函數的方式比較多

1. var a = function test(){...} // 這是命名的函數運算式

 

  var a = function(){...} // 這是匿名的函數運算式

 

2. 將“函式宣告”定義的函數 用一對小括弧括起來，這樣也形成了函數運算式

 

(function test（）{.....})  //這樣也是函數運算式

 

3. 還有就是在“函式宣告”前加位元運算符 也能構成函數運算式

例如：這些都是函數運算式

 

~function test（）{.....}+function test（）{.....}-function test（）{.....}!function test（）{.....}

 

區別： 函式宣告 和 函數運算式 有哪些區別那？？

 

1.函數運算式可以直接 在後面加小括弧執行（這就是函數自執行），而函式宣告不可以

例如：

 

var a = function test() {        alert("hello");} // 這是一個函數運算式,在這個運算式後面加個括弧，就可以自動執行函數了

 

 

var a = function test() {        alert("hello");// 重新整理頁面就彈出hello了 }();

 

 

而函式宣告的方式 加個小括弧是不可以執行的，例如 瀏覽器會提示這種寫法是錯誤的

 

function test() {        alert("hello");}();

 

2.函式宣告 可以 被預解析，而函數運算式不可以；如果不明白js預解析的小夥伴，請參考另一篇文章《JS預解析》

例如：

 

 window.onload = function () {        test();        function test() { // 函式宣告            alert("hello");        }}

 

通過函式宣告的方式定義的函數是可以被預解析的，所以在function test（）之前調用test()函數，自然彈出hello，

 

 window.onload = function () {        a();        var a = function () { // 函數運算式            alert("hello");        }}

 

通過函數運算式的方式定義的函數是不能被預解析的，所以在函數之前調用a(),就會報錯

 

再看一個例子：

 

window.onload = function () {        a();       if(true){           function a() {               alert("1");           }       }else{           function a() {              alert("2");           }       }}

我們本來想讓if成立的時候彈出1，不成立彈出2

 

但是因為js會預解析，所以永遠都是彈出2；但是使用函數運算式就可以避免這種情況

 

window.onload = function () {       if(true){           var a = function() {               alert("1");           }       }else{           var a = function() {              alert("2");           }       }       a(); }

因為函數運算式不會被預解析，所以會按正常的邏輯進行，自然就彈出的是1

 

 

所以記住： 在寫程式的時候，如果需要根據不同的條件判斷 來決定執行不同的函數，那麼此時一定要用“函數運算式”的形式來定義函數。這樣可以避免很多錯誤發生