這篇文章給大家介紹如何理解es6箭頭，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

站在用戶的角度思考問題，與客戶深入溝通，找到玉泉街道網(wǎng)站設計與玉泉街道網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設計制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋玉泉街道地區(qū)。

在es6中，箭頭“=>”指的是箭頭函數(shù)，是一種函數(shù)的簡寫方法，它將原函數(shù)的“function”關鍵字和函數(shù)名都刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體；例語句“v=>v;”，就相當于“function (v){return v;}”。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

ES6標準新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。

基礎語法

通常函數(shù)的定義方法

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

function fn2(a, b) {
    return a + b
}

使用ES6箭頭函數(shù)語法定義函數(shù)，將原函數(shù)的“function”關鍵字和函數(shù)名都刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體。

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

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

當函數(shù)參數(shù)只有一個，括號可以省略；但是沒有參數(shù)時，括號不可以省略。

// 無參
var fn1 = function() {}
var fn1 = () => {}

// 單個參數(shù)
var fn2 = function(a) {}
var fn2 = a => {}

// 多個參數(shù)
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}

// 可變參數(shù)
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭頭函數(shù)相當于匿名函數(shù)，并且簡化了函數(shù)定義。箭頭函數(shù)有兩種格式，一種只包含一個表達式，省略掉了{ ... }和return。還有一種可以包含多條語句，這時候就不能省略{ ... }和return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

如果返回一個對象，需要特別注意，如果是單表達式要返回自定義對象，不寫括號會報錯，因為和函數(shù)體的{ ... }有語法沖突。

注意，用小括號包含大括號則是對象的定義，而非函數(shù)主體

x => {key: x} // 報錯
x => ({key: x}) // 正確

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

非箭頭函數(shù)

現(xiàn)在，箭頭函數(shù)完全修復了this的指向，this總是指向詞法作用域，也就是外層調用者Person

由于this在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了，所以，用call()或者apply()調用箭頭函數(shù)時，無法對this進行綁定，即傳入的第一個參數(shù)被忽略

JavaScript中的每一個Function對象都有一個apply()方法和一個call()方法

apply調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.apply(A, arguments)；即A對象調用B對象的方法。func.apply(thisArg, [argsArray])
call調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.call(A, args1,args2)；即A對象調用B對象的方法。func.call(thisArg, arg1, arg2, ...)

詳見《JavaScript中apply()和call()的區(qū)別和應用》

非箭頭函數(shù)，調用call()時打印的數(shù)據(jù)

使用箭頭函數(shù)之后，不再需要以前hack的寫法，var that = this。但不能盲目的使用ES6箭頭函數(shù)，請看下一節(jié)《正確使用箭頭函數(shù)——什么時候不該用ES6箭頭函數(shù)》。

總結

• 類似于匿名函數(shù)，在某些情況下使用，可減少代碼量

• 代碼簡潔，this提前定義

• 代碼太過簡潔，導致不好閱讀

• this提前定義，導致無法使用js進行一些在ES5里面看起來非常正常的操作（若使用箭頭函數(shù)，在監(jiān)聽點擊事件的回調函數(shù)中，就無法獲取到當前點擊的元素咯，詳見《正確使用箭頭函數(shù)——什么時候不該用ES6箭頭函數(shù)》）

• 總的來說，箭頭函數(shù)只是一種函數(shù)的簡寫，有其利弊，可用可不用，看大家心情，當然也得用的正確

關于如何理解es6箭頭就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。