【渗透】关于Javascript的函数声明和函数表达式

Javascript定义函数有两种类型

函数声明

// 函数声明
function wscat(type){
    return type==="wscat";
}

函数表达式

// 函数表达式
var oaoafly = function(type){
    return type==="oaoafly";
}

先看下面这个经典问题，在一个程序里面同时用函数声明和函数表达式定义一个名为getName的函数

getName()//oaoafly
    var getName = function() {
        console.log('wscat')
    }
    getName()//wscat
    function getName() {
        console.log('oaoafly')
    }
    getName()//wscat

上面的代码看起来很相似，感受也没什么太大差异。但实际上，Javascript函数上的一个“陷阱”就体如今Javascript两种类型的函数定义上。

JavaScript 解释器中存在一种变量声明被提高的机制，也就是说函数声明会被提高到做用域的最前面，即便写代码的时候是写在最后面，也仍是会被提高至最前面。
而用函数表达式建立的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用

var getName//变量被提高，此时为undefined
    
    getName()//oaoafly 函数被提高 这里受函数声明的影响，虽然函数声明在最后能够被提高到最前面了
    var getName = function() {
        console.log('wscat')
    }//函数表达式此时才开始覆盖函数声明的定义
    getName()//wscat
    function getName() {
        console.log('oaoafly')
    }
    getName()//wscat 这里就执行了函数表达式的值

因此能够分解为这两个简单的问题来看清楚区别的本质

var getName;
    console.log(getName)//undefined
    getName()//Uncaught TypeError: getName is not a function
    var getName = function() {
        console.log('wscat')
    }
            var getName;
    console.log(getName)//function getName() {console.log('oaoafly')}
    getName()//oaoafly
    function getName() {
        console.log('oaoafly')
    }

这个区别看似微不足道，但在某些状况下确实是一个难以察觉而且“致命“的陷阱。出现这个陷阱的本质缘由体如今这两种类型在函数提高和运行时机（解析时/运行时）上的差别。 固然咱们最后要给一个总结：Javascript中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提高，所以在同一个做用域内，无论函数声明在哪里定义，该函数均可以进行调用。而函数表达式的值是在JS运行时肯定，而且在表达式赋值完成后，该函数才能调用。这个微小的区别，可能会致使JS代码出现意想不到的bug，让你陷入莫名的陷阱中。