javascript - 解釋下這種函數定義

Question

一般定義函數

const foo = function(){console.log('666')}; 
foo(); //666

或

function foo(){console.log('666')}; 
foo(); //666

那下面這個這麼解釋？

const foo = function foo(){console.log('666')}; 
foo(); 

Answer 1

其實題主覺得第三種寫法奇怪，而且看起來雞肋，是因為沒有搞懂這種寫法的正確用法，第二個例子比較直觀

簡單來說，第一個和第三個都是函數表達式，第二個是函數宣告。第三個是比較特殊的函數表達式，擁有特殊能力。

要來解釋這個問題，我們需要搞懂'What, How, Why'.

所以第一個和第二個區別主要在於他們聲明的時機不一致，函數表達式是在程式碼執行到那條語句的時候才會給變數賦值，而函數宣告會在進入目前函數執行上下文的時候就提前賦值。

直觀的例子

console.log(foo); // undefined

var foo = function(){};
 
console.log(foo); // function(){}


console.log(bar); // function(){}

function bar() {}

console.log(bar); // function(){}

對於第三種，直觀的例子是這樣

console.log(foo); // undefined

var foo = function bar(){
    console.log(bar); // function(){...}
    console.log(foo); // undefined
};
 
console.log(foo); // function(){}
console.log(bar); // undefined

所以看出區別了吧，就是這種寫法的函數標示符和函數聲明的不一樣，它可以在函數內部訪問到，但是函數外部是訪問不到的。所以我們看到很多地方會這麼寫，有一個好處就是在使用遞歸的時候呼叫自身的時候，函數是有名字的，比較直覺

為什麼會這樣？

瀏覽器解析的時候其實是把表達式後面的標示符付給了當前的函數對象，所以上面的範例中

foo.name; // bar

而在函數內的執行上下文中，目前函數物件是在作用域中的，所以可以在內部呼叫

以上

Answer 2

補充第三種定義的解釋: 它本身是一個函數表達式,並不是函數定義語句. 函數表達式是可以有函數名的,但是這個函數名只能在該函數表達式內部使用.
參考Javascript權威指南8.1 函數定義這一小節:

Answer 3

MDN JavaScript 函數中定義函數有多種方法：

• 函數宣告 (函數語句)

• 函數表達式 (function expression)

• 函數產生器宣告 (function* 語句)

• 函數產生器表達式 (function* 表達式)

• 箭頭函數表達式 (=>)

• Function建構子

• 生成器函數的建構子

對於樓主的問題這裡只談函數宣告和函數表達式。

1) 函數宣告

function name([param[, param[, ... param]]]) { 
    statements 
}

2) 函數表達式

let function_expression = function [name]([param1[, param2[, ..., paramN]]]) {
   statements
};

name是可選的，當省略函數名稱name的時候，函數就成為了匿名函數。

看到這裡自然不必再繼續談為啥有第三種寫法了，不然確實鑽牛角尖了，但是這裡不得不說一下函數聲明和函數表達式的區別，主要體現在變數提升的問題上：

JavaScript 僅提升聲明，而不是初始化。函數宣告下存在變數提升，函數表達式下不會，所以函數表達式先呼叫函數，再宣告函數會報錯。

Answer 4

第一個foo => 沒名字的function
第三個foo => 有名字的function

但是兩個function的執行內容是一樣的，都把這個函數賦值給foo變數初始化物件

至於第二個，就是正常的宣告一個函數，然後呼叫函數

Answer 5

第三種就是賦值操作呀！把函數賦值給foo！如果在之前使用foo就是為定義和平時提前使用一個未定義的變數一樣啊！如果你在你所寫的那段程式碼後console.log（foo）是列印整個函數，加個（）自然就是呼叫此函數了！
記住單等號在js中永遠是賦值操作等號右邊就是賦值的內容就好了！不要想的太麻煩了！就算等號後面再寫100個函數最多也只是進行了一個賦值而已！