探索ES2015：箭頭函數(shù)（Arrow Functions）

pkwenda 發(fā)布于2019-08-19 18:02 / 2993人閱讀

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

前言

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

語法

var func = p => p

上面的代碼等價于

var func = function(p) {
  return p
}

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

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

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

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

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

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

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

  return a
}

特性

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

JavaScript中的this做為一個古老的特性，有一個非?？拥奶匦?b>this永遠指向的是當前函數(shù)的上下文

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

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

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

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

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

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

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

注意

箭頭函數(shù)有幾個使用注意點：

不可以使用arguments對象，該對象在函數(shù)體內(nèi)不存在。如果要用，可以用解構參數(shù)代替。

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

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

總結

箭頭函數(shù)應該是我們在ES6中使用最多的，也是我最喜歡的特性之一，箭頭函數(shù)使得表達更加簡潔。當?shù)谝谎劭吹剿膶懛〞r，就被它的優(yōu)雅所吸引，建議大家多多嘗嘗ES6的各種新特性。

參考

MDN
ECMAScript 6 入門

云服務器 GPU云服務器箭頭函數(shù) arrow functions disable_functions

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79123.html

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

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

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

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

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

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

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

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

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

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

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