1. 程式人生 > >【JavaScript】箭頭函式及其應用

【JavaScript】箭頭函式及其應用

什麼是箭頭函式?

  箭頭函式表示式的語法比函式表示式更短,並且不繫結自己的this,arguments,super或 new.target。箭頭函式與傳統函式最大的不同之處在,禁用new操作。
  將箭頭函式限制為使用固定this引用,有利於JavaScript引擎優化處理。
  其實箭頭函式本身沒有this,而自身的this會在函式宣告的時候做繫結,它是根據上級的function中的this來做繫結的

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6

  箭頭功能可以有一個“簡寫體”或常見的“塊體”。
  在一個簡寫體中,只需要一個表示式,並附加一個隱式的返回值。
  在一個塊體中,必須使用明確的return語句。

var func = x => x * x;                  
// 隱式返回,一個引數時可不加括號

var func = (x, y) => { return x + y; }; 
// 顯式返回,多個引數時必須加括號

var add = () => { console.log("hey foo") };
// 如果沒有引數,那麼你必須要有一個空括號——不能沒有

注意:箭頭函式在引數和箭頭之間不能換行。

箭頭函式支援rest引數、支援預設引數、可以返回物件字面量

為什麼要擁抱ES6的箭頭函式?

  柯里化箭頭函式不僅能讓程式碼更加清晰並具有可讀性(因為沒有ES5中多餘的語法干擾),還能減少錯誤的藏身之處,因為它能讓 bug 隱藏的部分更少。

“this”在箭頭函式中如何工作?

  箭頭函式沒有它自己的this值。箭頭函式中的this值總是從封閉範圍繼承。在JavaScript中,每個函式都有它自己的this值,這取決於程式碼是如何呼叫函式的。

什麼情況下不能用箭頭函式?

  箭頭函式無疑是 ES6 帶來的重大改進,在正確的場合使用箭頭函式能讓程式碼變的簡潔、短小,但某些方面的優勢在另外一些方面可能就變成了劣勢,在需要動態上下文的場景中使用箭頭函式你要格外的小心,這些場景包括:

  • 定義物件方法   
  • 定義原型方法   
  • 定義建構函式   
  • 定義事件回撥函式

相關推薦

JavaScript箭頭函式及其應用

什麼是箭頭函式?   箭頭函式表示式的語法比函式表示式更短,並且不繫結自己的this,arguments,super或 new.target。箭頭函式與傳統函式最大的不同之處在,禁用new操作。   將箭頭函式限制為使用固定this引用,有利於JavaScr

javascript記憶體洩露及其解決辦法

1、記憶體洩露:一般由於開發者使用不當導致不用的記憶體沒有被作業系統或者空閒記憶體池回收釋放。 2、造成記憶體洩露的常見原因: 1) 意外的全域性變數引起的記憶體洩露     2)閉包引起的記憶體洩露  閉包可以維持函式內區域性變數,使其得不到釋放。 上

JavaScript設計模式-module模式及其改進

uid ... hello 代碼 first 其中 nbsp amp 初學者 寫在前面 編寫易於維護的代碼,其中最重要的方面就是能夠找到代碼中重復出現的主題並優化他們,這也是設計模式最有價值的地方 說到這裏...... 《head first設計模式》裏有一篇文章,是說使用

轉載linux作業系統與應用程式的main函式

來源:https://blog.csdn.net/h542723151/article/details/52154871   這幾天一直在糾結: main函式是程式的入口,一個程式啟動後,經過bootloader的初始化就該經main函式進入C語言的世界,但是linux中每個應用程式的開始都是

JavaScript牛客程式設計:使用閉包實現函式 makeClosures

呼叫之後滿足如下條件: 1、返回一個函式陣列 result,長度與 arr 相同 2、執行 result 中第 i 個函式,即 resulti,結果與 fn(arr[i]) 相同 我第一次寫法是這樣的:

JavaScript(4)普通函式、動態函式定義格式,呼叫方式,注意的詳細細節

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

Unity3d學習筆記命令模式及其應用

開始       定義 命令模式:將一個請求封裝為一個物件,從而使你可用不同的請求對客戶進行引數化; 對請求排隊或記錄請求日誌,以及支援可撤銷的操作。 命令模式是一種回撥的面向物

JavaScript函式的引數傳遞和遞迴呼叫

引數傳遞 傳遞函式 這裡主要分享下,如果將一個函式作為引數進行傳遞 function box(sum,num3) //把函式本身作為引數傳遞,而不是函式的返回值 { return sum(num3); } functio

JavaScript函式內的this指向誰

首先宣告,this並不需要’查詢’這一個過程,this是在函式呼叫的時候就確定的。 function foo(){} 分別就函式的4中呼叫形式如何確定函式內的this. 1.Function Invocation Pattern 諸如’foo()’這樣直

JavaScript徹底明白this在函式中的指向

一、this,其實可以類比成人   說到this的話,我們在js中主要研究的都是函式中的this,在javascript中,this代表當前行為的執行主體,而context代表的是當前行為執行的的環境(區域)。   例如男神在北理珠吃飯,這句話分別代表的含義如下   男神    --

JavaScript讓事件支持先發布後訂閱

class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器,就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號,還是能看到歷史消息的。類似於qq離線消息,我先發給你,你登錄了

JavaScriptjs02

mode oninput on() tag tle blur replace absolute padding 正則對象。   聲明:     //var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。

轉載CSRF攻擊及其應對之道

詳細 訪問 選擇 nbsp tel appendto 局限 登陸 mail   在我最開始接觸JavaEE時,我工作的第一個內容就是解決項目中存在的CSRF漏洞,當時的解決方法是在Referer添加token的方法。我對CSRF攻擊的主要認知和解決的大部分思路都來自於這篇文

Javascriptcall 和aplly

方法的參數 call ava apply 調用 javascrip bsp 方法 rip apply和call是Function類型的原型函數。所有的函數都會自動繼承這兩個方法。 func.apply(thisArg, [argsArray])func.call(thisA

JavaScript插件參數的寫法

log var [0 gin script ams selector lpar cti 就是實現復制的一個過程 (function() { var Explode = function(container, params) { ‘use stric

JavaScriptexplode動畫

lte ctu 起點 運動 max cnblogs pic 位置 raw 這是一個js實現的粒子聚合文字或圖片的動畫特效 部分程序如下 n.container = n.container[0] || n.container; /*有且僅有一個cont

JavaScript富文本編輯器

bject repl active last rri file data 樣式 current 這是js寫的富文本編輯器,還存在一些bug,但基本功能已經實現,通過這個練習,鞏固了js富文本編輯方面的知識,裏面包含顏色選擇器、全屏、表情、上傳圖片等功能,每個功能實際對應的就

JavaScriptparticle

page 循環 通過 and die 不支持 rst window inner 這是js實現的粒子動畫,有兩種模式,分別是zoom和line,它們對應的效果不同,但是原理都相同,具體分析如下: 部分程序如下: var p = this;

JavaScript筆記01——Making Stuff Happen???

文件 eight tin clas 快捷 strong init chrome scrip While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is

JavaScript時間戳轉日期格式

number cnblogs 數據 style .ajax con etime subst new 時間戳: 1480570979000 $.ajax({ url : "getOrderMsg?ship