JavaScript中的函式可以通過幾種方式創建，如下，
// 函式宣告 function getName() { return 'Michael' } // 函式運算式 const getName = function() { return 'Michael' } // 箭頭函式（同樣也是運算式） const getName = () => { return 'Michael' }
函式宣告和運算式之間的差別是
JavaScript 解釋器中存在一種變數宣告被提升的機制，也就是說函式宣告會被提升到作用域的最前面，即使寫代碼的時候是寫在最后面，也還是會被提升至最前面，
而用函式運算式創建的函式是在運行時進行賦值，且要等到運算式賦值完成后才能呼叫
看一個例子
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') }
這個區別看似微不足道，但在某些情況下確實是一個難以察覺并且“致命“的陷阱，出現這個陷阱的本質原因體現在這兩種型別在函式提升和運行時機（決議時/運行時）上的差異，
箭頭函式
箭頭函式是語法和函式運算式比起來稍有不同的函式運算式，在上面的示例中，你可以看到箭頭函式看起來像函式運算式，但沒有單詞function，然后在括號和大括號之間帶有粗箭頭=>，
你可能聽說過，在JavaScript中，函式會創建自己的作用域，這意味著JavaScript函式會創建自己的背景關系this，如果我們需要一個函式但是這個函式卻沒有自己的上下this，那么就可能會遇到問題，箭頭函式的特征之一是它們不創建背景關系，因此箭頭函式的內部this與外部的this相同，
箭頭函式也可以很小巧，查看下面兩個完全相同的示例：
const getName = () => { return 'Michael' }
// 和上面的相同，但是更小巧
const getName = () => 'Michael'
當箭頭函式忽略其大括號時，表示我們希望粗箭頭右側的內容為回傳值（不用加return），這稱為隱式回傳值，關于箭頭函式，還有一些更細微的細節需要了解，例如如何回傳物件以及如何省略單個引數的括號，
// 箭頭函式直接回傳物件
const getStudent = () => ({ name: 'Michael', age: 18, });
// 省略單個引數的括號
const addOne = (n) => n+1;
const addOne = n => n+1;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165100.html
標籤：JavaScript
上一篇：vue中監聽路由引數的變化
下一篇：js 回呼地獄的另類解決方案嘗試