javascript - 解釋下這種函數定義

問題描述

一般定義函數

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

或者

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

那么下面這個這么解釋？

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

問題解答

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

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

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

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

直觀的例子

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

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

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

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

為什么會這樣？

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

foo.name; // bar

而在函數內的執行上下文中，當前函數對象是在作用域中的，所以可以在內部調用

以上

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

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 僅提升聲明，而不是初始化。函數聲明下存在變量提升，而函數表達式下不會，所以函數表達式先調用函數，再聲明函數會報錯。

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

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

至于第二個，就是正常的聲明一個函數，然后調用函數

第三種就是賦值操作呀！把函數賦值給foo！如果在之前使用foo就是為定義和平時提前使用一個未定義的變量一樣?。∪绻阍谀闼鶎懙哪嵌未a后console.log（foo）是打印整個函數，加個（）自然就是調用此函數了！記住單等號在js中永遠是賦值操作等號右邊就是賦值的內容就好了！不要想的太麻煩了！就算等號后面再寫100個函數最多也只是進行了一個賦值而已！