淺談箭頭函數

NoraXie 發布于2019-08-21 11:16 / 2270人閱讀

摘要：來看看箭頭函數的情況可以發現在定時器這個匿名函數作用域里，所指向的對象，就是定義時所指的對象。對于構造函數來說，它就是的實例。如下據此，總結箭頭函數的三個優點語法簡潔，能夠寫出漂亮的單行函數。

ES6新引入了箭頭函數，它是一種表達簡潔的函數，下面我們來看看它有哪三個顯著優勢。
假設定義了一個名為names的數組，如下：

現在需要給數組的每一項后面添加’Bos’這個字符串，如果用傳統的函數語句來實現，我們會這么做：

（小注：因為用了模板字符串所以此例中使用了重音符’ ` ’）

那么，使用箭頭函數可以怎么做？第一步，用 => 替代 function ：

第二步，當參數僅有一個的時候，可以把括弧省略，如下：

是不是看上去簡潔了些？

第三步：無需顯示地寫return語句，箭頭函數內置 return 功能。即，如果你只想使用箭頭函數返回什么東西的話，那么無需顯示地寫出 return 。如下：

這一步，除了刪除return語句之外，還把花括號也刪除了，并且把多行代碼濃縮成一行。是不是非常簡潔？但在這需要注意的是，之所以刪除花括號，是因為函數體內僅有一句想要返回的語句。

當函數沒有參數的時候，箭頭函數還可以更進一步的簡潔，即把括弧給去掉，換成下劃線’_’。如下：

此處由于不需要形參，我們把括弧’ ( ) ’刪除用’ _ ’ 替代來假裝變量名，實際上你可以在此用任何你想用的變量名，反正他們也不會真正被用上。比如：

它們返回的都是’Cool Bos’組成的數組而已。

箭頭函數中的this關鍵字，指向的是定義時的對象，而不是使用時的對象。即，雖然在以往的函數中，this所指的對象只有在調用的時候才知道是誰，但是在箭頭函數中，它是固定不變的。我們拿兩個例子來比對一下：

傳統函數

無論輸出多少次p.age的值，都是0。因為作為Person構造函數實例的p對象，才是this所指的對象，而age這個私有屬性在構造函數中已經定義，this.age的值便是0。

箭頭函數

而用箭頭函數改寫后，打印出的p.age值每一次都不相同，每當過去1秒，它的值+1。

我們再來三個例子說明一下：

構造函數里嵌套定時器的傳統寫法

可看到，函數體里最后一行this.val打印出來是0，但是定時器里每隔1秒打印出來的是值是NaN，因為在定時器里面的this指向的是window，然后在全局環境下并沒有找到window.val的值，所以是NaN。

對上面的函數稍作修改

在全局作用域下定義val這個變量，并給其賦值-10。
從結果可以看出，每隔1秒打印出來的值是全局作用域下的-10累加增1。

來看看箭頭函數的情況

可以發現在定時器這個匿名函數作用域里，this所指向的對象，就是定義時所指的對象。對于構造函數來說，它就是Fn的實例p。所以，this.val的值基于0，每隔1秒增1。

最后補充一點：目前的JavaScript版本把所有箭頭函數當成匿名函數，但我們可以用一個變量指向匿名函數，以這種方式來仿造聲明函數（本文中的示例函數就是如此）。如下：

據此，總結箭頭函數的三個優點： 1. 語法簡潔，能夠寫出漂亮的單行函數。2. 內置return語句，當函數只想返回某個東西的時候，可以不必顯現地寫出return。3.this關鍵字無需重新指定，這在進行事件綁定時會很有幫助。

需要補充的是，箭頭函數里面沒有arguments參數，如果需要用到，可以這么寫(...arguments) => {...}。但是這種方法在嚴格模式下不適用。

翻譯自：http://wesbos.com/arrow-funct...

GPU云服務器云服務器箭頭函數設計淺談淺談javascript 淺談sdwan解決方案

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

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

淺談javascript里面的this、call、apply、bind

摘要：如果該參數的值為或，則表示不需要傳入任何參數，從開始可以使用類數組對象。當使用操作符調用綁定函數時，該參數無效。當綁定函數被調用時，這些參數將置于實參之前傳遞給被綁定的方法。在了解call,apply之前需要先了解下javascrit中this指向 this的指向在ES5里面，this永遠指向最后調用它的那個對象舉個栗子： var name = outerName; function...

Lemon_95 2019-08-22 11:21 評論0 收藏0
淺談react性能優化的方法

摘要：函數綁定的方式一般有下面種方式綁定構造函數中綁定然后可以使用時綁定使用箭頭函數以上三種方法，第一種最優。因為第一種構造函數只在組件初始化的時候執行一次，第二種組件每次都會執行第三種在每一次時候都會生成新的箭頭函數。這篇文章主要介紹了淺談react性能優化的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 React性能優化思路軟件的性能優化思路就像生...

HitenDev 2019-08-26 12:23 評論0 收藏0