問題描述

一般定義函數(shù)

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

或者

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

那么下面這個這么解釋？

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

問題解答

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

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

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

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

直觀的例子

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

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

為什么會這樣？

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

foo.name; // bar

而在函數(shù)內(nèi)的執(zhí)行上下文中，當(dāng)前函數(shù)對象是在作用域中的，所以可以在內(nèi)部調(diào)用

以上

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

MDN JavaScript 函數(shù)中定義函數(shù)有多種方法：

函數(shù)聲明 (函數(shù)語句)

函數(shù)表達式 (function expression)

函數(shù)生成器聲明 (function* 語句)

函數(shù)生成器表達式 (function* 表達式)

箭頭函數(shù)表達式 (=>)

Function構(gòu)造函數(shù)

生成器函數(shù)的構(gòu)造函數(shù)

對于樓主的問題這里只談函數(shù)聲明和函數(shù)表達式。

1) 函數(shù)聲明

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

2) 函數(shù)表達式

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

name是可選的，當(dāng)省略函數(shù)名name的時候，函數(shù)就成為了匿名函數(shù)。

看到這里自然不必再繼續(xù)談為啥有第三種寫法了，不然確實鉆牛角尖了，但是這里不得不說一下函數(shù)聲明和函數(shù)表達式的區(qū)別，主要體現(xiàn)在變量提升的問題上：

JavaScript 僅提升聲明，而不是初始化。函數(shù)聲明下存在變量提升，而函數(shù)表達式下不會，所以函數(shù)表達式先調(diào)用函數(shù)，再聲明函數(shù)會報錯。

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

但是兩個function的執(zhí)行內(nèi)容是一樣的的，都把這個函數(shù)賦值給foo變量初始化對象

至于第二個，就是正常的聲明一個函數(shù)，然后調(diào)用函數(shù)

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