JavaScript中的函數申明、函數表達式、箭頭函數

發布時間:2019-12-07 16:49 來源:互聯網 當前欄目:網站服務器

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;

總結

以上所述是小編給大家介紹的JavaScript中的函數申明、函數表達式、箭頭函數,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對IIS7站長之家網站的支持!如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、