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

所以记住： 在写程序的时候，如果需要根据不同的条件判断 来决定执行不同的函数，那么此时一定要用“函数表达式”的形式来定义函数。这样可以避免很多错误发生