探索ES2015：箭頭函數（Arrow Functions）

pkwenda 發布于2019-08-19 18:02 / 2989人閱讀

摘要：注意箭頭函數有幾個使用注意點不可以使用對象，該對象在函數體內不存在。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。不可以使用命令，因此箭頭函數不能用作函數。

前言

在JavaScript的世界中函數被譽為一等公民，每當我們需要在JS定義一個新的函數，我們都會毫不猶豫的function() {}，也許我們可以開始換一種方式來定義一個函數，也就是本文的主角箭頭函數，一個來自ECMAScript 2015（又稱ES6）的全新特性。

語法

var func = p => p

上面的代碼等價于

var func = function(p) {
  return p
}

看出差異了么？最明顯的，我們不再需要寫function這個關鍵字，只要使用=>箭頭即可定義一個函數。我們在定義函數的時候根據根據需求的不同，箭頭函數也有一些細微的差異，我們來列舉一下：

如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。

// 無參函數
var func1 = () => 1

// 多參（大于1）函數
var func2 = (a, b) => a + b

如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

// 不需要顯示return
var func = p => p

// 需要大括號并且顯示return
var func p => {
  var a = p + 1

  return a
}

特性

箭頭函數除了讓我們少寫幾個字母外難道沒有更牛逼的特性？必須不是！下面我們來介紹一個牛逼閃閃的特性：父作用域共享關鍵字this。

JavaScript中的this做為一個古老的特性，有一個非常坑爹的特性this永遠指向的是當前函數的上下文

document.addEventListener("click", function() {
  setTimeout(function() {
    console.log(this) // ?
  })
}, false)

在運行上面代碼時，this指向的是什么呢？答案是window，原因是setTimeout是window對象下的一個方法。但是我們此時希望的是獲取到document，怎么解決呢，傳統的辦法是添加一個變量self保持對this的引用。

document.addEventListener("click", function() {
  var self = this;

  setTimeout(function() {
    console.log(self) // self => document
  })
}, false)

但是這種方法顯示不夠優雅，這個時候我們就可以利用箭頭函數來解決它，因為它不產生屬于它自己的this。

document.addEventListener("click", function() {
  var self = this;

  setTimeout(() => {
    console.log(this) // this => document
  })
}, false)

注意

箭頭函數有幾個使用注意點：

不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用解構參數代替。

不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

不可以使用yield命令，因此箭頭函數不能用作Generator函數。

總結

箭頭函數應該是我們在ES6中使用最多的，也是我最喜歡的特性之一，箭頭函數使得表達更加簡潔。當第一眼看到它的寫法時，就被它的優雅所吸引，建議大家多多嘗嘗ES6的各種新特性。

參考

MDN
ECMAScript 6 入門

云服務器 GPU云服務器箭頭函數 arrow functions disable_functions

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79123.html

React類，方法綁定（第三部分）

摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

livem 2019-08-20 17:59 評論0 收藏0
ES6和Babel你不知道的事兒

摘要：版本截圖當然，搜狗瀏覽器市場份額也不低，官方最新版本是，內核版本是，為之一驚。上面代碼的和分別是什么含義呢如果是下面的配置有何不可呢首先來明確一個概念是一系列的集合。比如做移動端開發不需要考慮之類的端產品線只考慮指定的瀏覽器等。因babel的版本從5升級到6有很多改動，比如babel本身不再提供任何transform的工作，都需要借助插件來完成，本文的所有討論都是建立在babel 6...

nidaye 2019-08-21 17:57 評論0 收藏0
babel入門

摘要：為了方便，團隊將一些集合在一起，并稱之為。先看一下直觀體驗源代碼配置編譯后的代碼通過對比可以看出，第二種方案直接從引入，避免自己定義，從而減少代碼的體積。 Babel Babel 是一個 JavaScript 編譯器，它可以將ES6+語法編譯為瀏覽器支持的ES5語法。要學好babel必須先理解相關的概念，但是你剛起步就去扣這些細節的話，很可能因為babel一些復雜而模糊的概念打擊你的信...

pkwenda 2019-08-22 16:40 評論0 收藏0
[譯]JavaScript ES6箭頭函數指南

摘要：以下例子的目的是使用來展示一個每秒都會更新的時鐘當嘗試在的回調中使用來引用元素時，很不幸，我們得到的只是一個屬于回調函數自身上下文的。前言胖箭頭函數（Fat arrow functions），又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>...

makeFoxPlay 2019-08-14 12:35 評論0 收藏0
babel學習筆記

摘要：經過一番折騰，總算是把自己項目里的配置調整好了，所有文件從原來的縮小到。折騰了不少時間，改動其實就一個地方，就是配置文件，記錄一下自己折騰的過程。本以為那這兩種方式取其一就行了。這感覺和想象中的不一樣啊，說好的一個搞定一切的呢。。。先是看到前端早讀課【第1065期】再見，babel-preset-2015，聽說現在有了babel-preset-env，別的什么preset都不需要了，...

Aomine 2019-08-21 17:18 評論0 收藏0