1. 程式人生 > 實用技巧 >ES6新特性之箭頭函式語法

ES6新特性之箭頭函式語法

ES6標準新增了一種新的函式:Arrow Function(箭頭函式)。

基礎語法

通常函式的定義方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用ES6箭頭函式語法定義函式,將原函式的“function”關鍵字和函式名都刪掉,並使用“=>”連線引數列表和函式體。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

當函式引數只有一個,括號可以省略;但是沒有引數時,括號不可以省略。

// 無參
var fn1 = function() {}
var fn1 = () => {}
 
// 單個引數
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多個引數
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可變引數
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭頭函式相當於匿名函式,並且簡化了函式定義。箭頭函式有兩種格式,一種只包含一個表示式,省略掉了{ ... }和return。還有一種可以包含多條語句,這時候就不能省略{ ... }和return

() => return 'hello'
(a, b) => a + b
(a) => {
  a = a + 1
  return a
}

箭頭函式看上去是匿名函式的一種簡寫,但實際上,箭頭函式和匿名函式有個明顯的區別:箭頭函式內部的this是詞法作用域,由上下文確定。(詞法作用域就是定義在詞法階段的作用域。換句話說,詞法作用域是由你在寫程式碼時將變數和塊作用域寫在哪裡來決定的,因此當詞法分析器處理程式碼時會保持作用域不變 。)