首頁 web前端 js教程 JavaScript箭頭函數的用法介紹

JavaScript箭頭函數的用法介紹

Aug 16, 2017 am 11:05 AM
javascript js 介紹

本文我們介紹箭頭(arrow)函數的優點。

更簡潔的語法

#我們先來依照常規語法定義函數:
function funcName(params) {
return params + 2;
}
funcName(2);
// 4
登入後複製
函數使用箭頭函數可以使用僅僅一行程式碼搞定!
var funcName = (params) => params + 2
funcName(2);
// 4
登入後複製
是不是很酷!雖然是一個極端簡潔的例子,但很好的表達了箭頭函數在寫程式碼時的優勢。我們來深入了解箭頭函數的語法:
[code ](parameters) => { statements }[/code]如果沒有參數,那麼可以進一步簡化:
() => { statements }
登入後複製
如果只有一個參數,可以省略括號:
parameters => { statements }
登入後複製
如果傳回值隻隻有一個表達式(expression), 也可以省略大括號:
parameters => expression
 
// 等价于:
function (parameters){
return expression;
}
登入後複製
現在你已經學會了箭頭函數的語法,我們來實戰一下。開啟Chrome瀏覽器開發者控制台,輸入:
var double = num => num * 2
登入後複製
我們將變數double綁定到一個箭頭函數,該函數有一個參數num, 傳回 num * 2。 呼叫函數:
double(2);
// 4
 
double(3);
// 6
登入後複製
沒有局部this的綁定
和一般的函數不同,箭頭函數不會綁定this。 或則說箭頭函數不會改變this本來的綁定。
我們用一個例子來說明:

function Counter() {
this.num = 0;
}
var a = new Counter();
登入後複製

因為使用了關鍵字new構造,Count()函數中的this綁定到一個新的對象,並且賦值給a。透過console.log印出a.num,會輸出0。

console.log(a.num);
// 0
登入後複製

如果我們想要每過一秒將a.num的值加1,該如何實現呢?可以使用setInterval()函數。
function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}
登入後複製

我們來看看輸出結果:
var b = new Counter();
// NaN
// NaN
// NaN
// ..
登入後複製
你會發現,每隔一秒都會有一個NaN列印出來,而不是累加的數字。到底哪裡錯了呢?
首先使用以下語句停止setInterval函數的連續執行:

clearInterval(b.timer);
登入後複製
登入後複製
登入後複製
我們來試著理解為什麼出錯:根據上一篇部落格講解的規則,首先函數setInterval沒有被某個宣告的對象調用,也沒有使用new關鍵字,再之沒有使用bind, call和apply。 setInterval只是一個普通的函數。實際上setInterval裡面的this綁定到全域物件的。我們可以透過將this列印出來驗證這一點:
function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
console.log(this);
}, 1000);
}
var b = new Counter();
登入後複製
你會發現,整個window物件被印出來。 使用以下指令停止列印:
clearInterval(b.timer);
登入後複製
登入後複製
登入後複製

回到先前的函數,之所以列印NaN,是因為this.num綁定到window物件的num,而window.num未定義。
那麼,我們要如何解決這個問題呢?使用箭頭函數!使用箭頭函數就不會導致this被綁定到全域物件。
function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...
登入後複製
透過Counter建構函數綁定的this將會被保留。在setInterval函數中,this仍指向我們新建立的b物件。
為了驗證剛剛的說法,我們可以將 Counter函數中的this綁定到that, 然後在setInterval中判斷this和that是否相同。
function Counter() {
var that = this;
this.timer = setInterval(() => {
console.log(this === that);
}, 1000);
}
var b = new Counter();
// true
// true
// ...
登入後複製

正如我們所期望的,列印值每次都是true。最後,結束刷屏的列印:
clearInterval(b.timer);
登入後複製
登入後複製
登入後複製

總結
  1. 箭頭函數寫程式具有更簡潔的語法;

  2. 不會綁定this。

以上是JavaScript箭頭函數的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
wapi是什麼東西詳細介紹 wapi是什麼東西詳細介紹 Jan 07, 2024 pm 09:14 PM

wapi這個名詞使用者可能在使用網路得時候見過過,但是對於一部分人來說肯定都不知道wapi是什麼,下面就帶來了詳細介紹,幫助不知道小伙伴去了解。 wapi是什麼東西:答:wapi是無線區域網路鑑別和保密的基礎架構。這就像紅外線和藍牙等功能一樣,一般都覆蓋在辦公大樓等地方的附近。基本上都是為一個小部門所有的,所以這個功能涉及的範圍只有幾公里。 wapi相關介紹:1、wapi是無線區域網路裡面的一種傳輸協定。 2.這款技術是可以去避免窄頻帶通訊的問題,可以更好的去進行傳播。 3.只要只需要一個代碼就可以去傳送訊號了

詳解win11能否運行PUBG遊戲 詳解win11能否運行PUBG遊戲 Jan 06, 2024 pm 07:17 PM

pubg又稱絕地求生,是一款非常經典的射擊大逃殺類型遊戲,從2016年火爆以來一直擁有非常多的玩家。在最近的win11系統推出後,就有不少玩家想要在win11上游玩它,下面就跟著小編來看看win11是否可以玩pubg吧。 win11能玩pubg嗎:答:win11可以玩pubg。 1.在win11推出之初,因為win11需要開啟tpm的緣故,所以導致很多玩家被pubg封號處理了。 2.不過後來根據玩家的回饋,藍洞方面已經解決了這個問題,目前已經可以在win11中正常玩pubg了。 3.如果大家遇到了pub

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

i5處理器是否能裝win11詳細介紹 i5處理器是否能裝win11詳細介紹 Dec 27, 2023 pm 05:03 PM

i5是英特爾旗下的一系列處理器,擁有到現在11代i5的各種不同版本,每一代都有不同效能。因此對於i5處理器是否能夠安裝win11,還要看是第幾代的處理器,下面就跟著小編一起來分別了解一下吧。 i5處理器能裝win11嗎:答:i5處理器能裝win11。一、第八代及之後的i51、第八代及後續的i5處理器是能夠滿足微軟的最低配置需求的。 2.因此我們只需要進入微軟網站,下載一個「win11安裝助手」3、下載完成後,運行該安裝助手,根據提示進行操作就可以安裝win11了。二、第八代之前的i51、第八代之

介紹最新的Win 11聲音調法方法 介紹最新的Win 11聲音調法方法 Jan 08, 2024 pm 06:41 PM

很多用戶更新了最新的win11之後發現自己系統的聲音有了些許的變化,但是又不知道該怎麼去進行調整,所以今天本站就給你們帶來了電腦最新win11聲音調法介紹,操作不難而且選擇多樣,快來一起下載試試吧。電腦最新系統windows11聲音如何調1、先右鍵點選桌面右下角的聲音圖標,並選擇「播放設定」。 2、然後進入設定中點選播放列中的「揚聲器」。 3、隨後點選右下方的「屬性」。 4.點選屬性中的「增強」選項列。 5.此時如果「禁用所有聲音效果」前的√勾上了就把他取消。 6、之後就可以選擇下面的聲音效果來進行設定並點

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

什麼是狗狗幣 什麼是狗狗幣 Apr 01, 2024 pm 04:46 PM

狗狗幣是一種基於網路迷因創建的加密貨幣,沒有固定的供應上限,交易時間快速,交易費用低,擁有龐大的迷因社群。用途包括小額交易、打賞和慈善捐贈。然而,其無限供應量、市場波動和作為笑話幣的地位也帶來風險和擔憂。什麼是狗狗幣?狗狗幣是一種基於網路迷因和笑話創建的加密貨幣。起源與歷史:2013年12月,兩位軟體工程師BillyMarkus和JacksonPalmer創立狗狗幣。靈感來自於當時流行的"Doge"模因,一個以一隻柴犬為特徵的滑稽照片加上破碎英語。特徵與優勢:無限供應量:與比特幣等其他加密貨

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。

See all articles