函數聲明
在JavaScript中，對于函數的聲明有兩種表達形式， 聲明式 和 表達式 ，至于其他函數(如立即執行函數，箭頭函數等)都是基于這兩種形式衍生的。
// 聲明式
function foo () {
console.log('我是聲明式')
}
// 表達式
var foo = function () {
console.log('我是表達式')
}
具名函數
故名思意，具名函數就是有名稱的函數，這是我們最常見的一種函數，我們先來看看它的寫法。
// 具名函數
function foo () {
console.log('我是具名函數')
}
上邊說了，函數聲明的表達形式有兩種，具名函數是經典的聲明式，具名函數表達式的另外一種表現形式引出了另外一種函數類型- 具名函數表達式(NFE) 。
具名函數表達式
具名函數表達式就是具名函數的表達式寫法，嚴格來說，它并不是一種函數類型，只是一種寫法而已。
// 具名函數表達式
var fn = function foo () {
console.log('我是具名函數表達式');
}
fn() // 輸出：我是具名函數表達式
它有幾個特點：
- 函數名標識符私有化
- 函數名標識符常量化
函數名標識符私有化：即具名函數表達式的函數名不能從外部調用，僅供函數體內部使用，當外部調用時就會報錯。
// 函數名稱私有化
var fn = function foo () {
console.log(typeof foo);
}
fn() // function
foo() // Uncaught ReferenceError: foo is not defined
函數名標識符常量化：即具名函數表達式標識符的值不能修改，我們可以將其當作常量來使用。
var fn = function foo(){
foo = 12;
console.log(foo);
}
fn()
/*
輸出：
ƒ foo(){
foo = 12;
console.log(foo);
}
*/
我們來看一道經典的面試題
// 改寫以下代碼，使其分別輸出10、12
var foo = 10;
(function foo (){
foo = 12;
console.log(foo);
})()
// 改寫結果
var foo = 10;
(function foo (){
var foo = 12;
console.log(window.foo); // 10
console.log(foo); // 12
})()
匿名函數：即沒有名稱的函數，匿名函數不能像具名函數一樣直接聲明定義，在JavaScript中常見的用法就是將匿名函數當作回調參數使用或作為高階函數的返回值。
// 作為回調參數
setTimeout(function () {
console.log('我是匿名函數');
}, 1000);
// 作為高階函數的返回值
function foo () {
var num = 10;
return function (i) {
return num + i;
}
}
foo()(5) // 輸出：15
匿名函數有幾個缺點我們需要注意一下：
- 沒有函數名，調試困難
- 如需引用自身(如遞歸函數)，需要用 arguments.callee ，但是 arguments.callee 在嚴格模式下禁用
- 可讀性差
立即執行函數
立即執行函數(IIFE)：即當程序解析到該函數時就立即執行。
// 寫法一
(function () {
console.log('我是立即執行函數');
})()
// 寫法二
(function () {
console.log('我是立即執行函數');
}())
匿名函數的優點在于內部參數不會泄露，即變量私有化。
(function () {
var x = 10
console.log('我是立即執行函數');
}())
console.log(x); // Uncaught ReferenceError: x is not defined
有一道很經典的面試題，我們可以看一下。
// 改寫以下代碼，讓其依次輸出.
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(`值為${i}`)
}, 0)
}
// 此時會輸出5次 "值為5"
我們會立馬想到用 let ，但是還有沒有其他寫法呢?當然有，立即執行函數就是了。
// 改寫方法一
for (var i = 0; i < 5; i++) {
(function(num){
console.log(`值為${num}`)
})(i)
}
// 改寫方法二
for (var i = 0; i < 5; i++) {
var num = (function(){
return i;
})()
console.log(`值為${num}`)
}
原文地址：https://juejin.im/post/6891565170167021576?utm_source=tuicool&utm_medium=referral
