資訊專欄INFORMATION COLUMN
摘要：注意箭頭函數(shù)有幾個(gè)使用注意點(diǎn)不可以使用對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。不可以使用命令，因此箭頭函數(shù)不能用作函數(shù)。
前言
在JavaScript的世界中函數(shù)被譽(yù)為一等公民，每當(dāng)我們需要在JS定義一個(gè)新的函數(shù)，我們都會(huì)毫不猶豫的function() {}，也許我們可以開始換一種方式來定義一個(gè)函數(shù)，也就是本文的主角箭頭函數(shù)，一個(gè)來自ECMAScript 2015（又稱ES6）的全新特性。
語(yǔ)法var func = p => p
上面的代碼等價(jià)于
var func = function(p) {
return p
}
看出差異了么？最明顯的，我們不再需要寫function這個(gè)關(guān)鍵字，只要使用=>箭頭即可定義一個(gè)函數(shù)。我們?cè)诙x函數(shù)的時(shí)候根據(jù)根據(jù)需求的不同，箭頭函數(shù)也有一些細(xì)微的差異，我們來列舉一下：
如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分。
// 無參函數(shù) var func1 = () => 1 // 多參（大于1）函數(shù) var func2 = (a, b) => a + b
如果箭頭函數(shù)的代碼塊部分多于一條語(yǔ)句，就要使用大括號(hào)將它們括起來，并且使用return語(yǔ)句返回。
// 不需要顯示return
var func = p => p
// 需要大括號(hào)并且顯示return
var func p => {
var a = p + 1
return a
}
特性
箭頭函數(shù)除了讓我們少寫幾個(gè)字母外難道沒有更牛逼的特性？必須不是！下面我們來介紹一個(gè)牛逼閃閃的特性：父作用域共享關(guān)鍵字this。
JavaScript中的this做為一個(gè)古老的特性，有一個(gè)非常坑爹的特性this永遠(yuǎn)指向的是當(dāng)前函數(shù)的上下文
document.addEventListener("click", function() {
setTimeout(function() {
console.log(this) // ?
})
}, false)
在運(yùn)行上面代碼時(shí)，this指向的是什么呢？答案是window，原因是setTimeout是window對(duì)象下的一個(gè)方法。但是我們此時(shí)希望的是獲取到document，怎么解決呢，傳統(tǒng)的辦法是添加一個(gè)變量self保持對(duì)this的引用。
document.addEventListener("click", function() {
var self = this;
setTimeout(function() {
console.log(self) // self => document
})
}, false)
但是這種方法顯示不夠優(yōu)雅，這個(gè)時(shí)候我們就可以利用箭頭函數(shù)來解決它，因?yàn)樗划a(chǎn)生屬于它自己的this。
document.addEventListener("click", function() {
var self = this;
setTimeout(() => {
console.log(this) // this => document
})
}, false)
注意
箭頭函數(shù)有幾個(gè)使用注意點(diǎn)：
不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用解構(gòu)參數(shù)代替。
不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。
不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。
總結(jié)箭頭函數(shù)應(yīng)該是我們?cè)贓S6中使用最多的，也是我最喜歡的特性之一，箭頭函數(shù)使得表達(dá)更加簡(jiǎn)潔。當(dāng)?shù)谝谎劭吹剿膶懛〞r(shí)，就被它的優(yōu)雅所吸引，建議大家多多嘗嘗ES6的各種新特性。
參考MDN
ECMAScript 6 入門
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79123.html
摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時(shí)，會(huì)保留上下文。我們能使用這個(gè)特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語(yǔ)法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...
摘要：版本截圖當(dāng)然，搜狗瀏覽器市場(chǎng)份額也不低，官方最新版本是，內(nèi)核版本是，為之一驚。上面代碼的和分別是什么含義呢如果是下面的配置有何不可呢首先來明確一個(gè)概念是一系列的集合。比如做移動(dòng)端開發(fā)不需要考慮之類的端產(chǎn)品線只考慮指定的瀏覽器等。 因babel的版本從5升級(jí)到6有很多改動(dòng)，比如babel本身不再提供任何transform的工作，都需要借助插件來完成，本文的所有討論都是建立在babel 6...
摘要：以下例子的目的是使用來展示一個(gè)每秒都會(huì)更新的時(shí)鐘當(dāng)嘗試在的回調(diào)中使用來引用元素時(shí)，很不幸，我們得到的只是一個(gè)屬于回調(diào)函數(shù)自身上下文的。 前言 胖箭頭函數(shù)（Fat arrow functions），又稱箭頭函數(shù)，是一個(gè)來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>...
摘要：經(jīng)過一番折騰，總算是把自己項(xiàng)目里的配置調(diào)整好了，所有文件從原來的縮小到。折騰了不少時(shí)間，改動(dòng)其實(shí)就一個(gè)地方，就是配置文件，記錄一下自己折騰的過程。本以為那這兩種方式取其一就行了。這感覺和想象中的不一樣啊，說好的一個(gè)搞定一切的呢。。。 先是看到前端早讀課【第1065期】再見，babel-preset-2015，聽說現(xiàn)在有了babel-preset-env，別的什么preset都不需要了，...
閱讀 1849·2021-11-24 09:39
閱讀 1776·2021-11-22 15:22
閱讀 1138·2021-09-27 13:36
閱讀 3495·2021-09-24 10:34
閱讀 3530·2021-07-26 23:38
閱讀 2702·2019-08-29 16:44
閱讀 1038·2019-08-29 16:39
閱讀 1195·2019-08-29 16:20
