[JavaScript]function expression(函数陈述式) VS declaration (函数运算式)

摘要:[JavaScript]function expression(函数陈述式) VS declaration (函数运算式)

先前写过一篇[Javascript]Call method(调用函数)关于函数声明,这边进阶一下做一个比较。

但在开始前, 先来回忆一下如何自定一个JS函数

How to create JS custom function

第一种 - declaration (函数运算式)

function callTest(){
    console.log(123);
}

callTest();

第二种 - function expression(函数陈述式)

var callTest=function(){
    console.log(123);
}

callTest();

大致上常见的有上面两种, 其中第二种的变形使用很多变化，下面归纳两点差异让大家分辨

What’s different

• 1

  function declaration (函数运算式)最大差异就是调用自定函数时可在function前，如刚刚的第一种我们可以改成下面的样子依旧可以正常执行

  callTest();
  
  function callTest(){
      console.log(123);
  }
  

  但如果改用function expression(函数陈述式)成下面这样就会发现出现问题(变量未声明)

  callTest();
  
  var callTest=function(){
      console.log(123);
  }
  

• 2

  而在定义上，declaration (函数运算式)只要被定义过后就无法从内存中删除并回收，而function expression(函数陈述式)则是正常的跟着变量生命周期运行, 所以可能定义完后则直接被回收或是跟着变量的参考被移除时就结束等待GC回收,如下就是直接被回收与变量被回收的范例

  • declaration (函数运算式)直接被回收

    （function(val){
        console.log(val);
     })(123);
    

  • function expression(函数陈述式)变量被回收

    var callTest=function(){
        console.log(123);
    }
    
    callTest();
    callTest=null;
    callTest();
    

结语

看完定义跟比较后应该很明确的可以知道以后什么情况要用function expression与declaration了，不要再误用或以为都一样搂！

---

如果觉得文章还不错麻烦请在文章最上面给予推荐，你的支持是小弟继续努力产出的动力！

原文:大专栏  [JavaScript]function expression(函数陈述式) VS declaration (函数运算式)