JavaScript箭頭函數

来源:https://www.cnblogs.com/hleisurely/archive/2020/05/23/12941995.html
-Advertisement-
Play Games

JavaScript箭頭函數 語法 基礎語法 高級語法 描述 引入箭頭函數有兩個方面的作用：更簡短的函數並且不綁定 this 。 更短的函數 不綁定 this 在箭頭函數出現之前，每個新定義的函數都有它自己的 this 值(在構造函數的情況下是一個新對象，在嚴格模式的函數調用中為underfined ...


JavaScript箭頭函數

語法

基礎語法

(參數1, 參數2, ..., 參數N) => { 函數聲明 }

// 相當於：(參數1, 參數2, ..., 參數N) => { return 表達式; }
(參數1, 參數2, ..., 參數N) => 表達式(單一)

// 當只有一個參數時，圓括弧是可選的:
(單一參數) => { 函數聲明 }
單一參數 => { 函數聲明 }

// 沒有參數的函數應該寫成一對圓括弧
() => { 函數聲明 }

高級語法

//加括弧的函數體返回對象字面表達式:
參數=>({foo:bar})

//支持剩餘參數和預設參數
(參數1, 參數2, ...rest) => { 函數聲明 }

//同樣支持參數列表解構
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f() // 6

描述

引入箭頭函數有兩個方面的作用：更簡短的函數並且不綁定this。

更短的函數

var materials = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
];

materials.map(function(material) {
    return mateerial.length;
}); // [8, 6, 7, 9]

materials.map((material) => {
   return material.length; 
}); // [8, 6, 7, 9]

materials.map(material => material.length); // [8, 6, 7, 9]

不綁定this

在箭頭函數出現之前，每個新定義的函數都有它自己的this值(在構造函數的情況下是一個新對象，在嚴格模式的函數調用中為underfined，如果該函數被作為”對象方法“調用則為基礎對象等)。This被證明是令人厭煩的面向對象風格的編程。

function Person() {
    //	Person()構造函數定義 'this'作為它自己的實例.
    this.age = 0;
    
    setInterval(function growUp(){
        //	在非嚴格模式，growUp()函數定義 'this'作為全局對象，
        //	與在Person()構造函數中定義的'this'並不相同.
        this.age++;
    },1000)
}

var p = new Person();

在ECMAScript 3/5中，通過將this值分配給封閉的變數，可以解決this問題。

function Person() {
    var that = this;
    that.age = 0;
    
    setInterval(function growUp(){
        //	回調引用的是'that'變數,其值是預期的對象.
        that.age++;
    },1000);
}

或者，可以創建綁定函數，以便將預先分配的this值傳遞到綁定的目標函數(上述示例中的growUp( )函數)。

箭頭函數不會創建自己的this，它只會從自己的作用域鏈的上一層繼承this。因此，在下麵的代碼中，傳遞給setInterval的函數內的this與封閉函數中的this值相同:

function Person() {
    this.age = 0;
    
    setInterval(() => {
        this.age++;	//	|this|	正確地指向 p 實例
    },1000);
}

var p = new Person();
與嚴格模式的關係

鑒於this是詞法層面上的，嚴格模式中與this相關的規則都將被忽略。

function person() {
    this.age = 0;
    var closure = "123"
    setInterval(function growUp(){
        this.age++;
        console.log(closure)
    },1000);
}

var p = new Person();

function PersonX() {
    'use strict'
    this.age = 0;
    var closure = "123"
    setInterval(() => {
        this.age++;
        console.log(closure)
    },1000);
}

var px = new PersonX();

嚴格模式的其它規則依然不變.

通過call或apply調用

由於箭頭函數沒有自己的this指針，通過call()或apply()方法調用一個函數時，只能傳遞參數(不能綁定this)，他們的第一個參數會被忽略。(這種現象對於bind方法同樣成立)

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2（而不是3)

不綁定arguments

箭頭函數不綁定Arguments對象。因此，在本示例中，arguments只是引用了封閉作用域內的arguments:

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隱式綁定 foo 函數的 arguments 對象. arguments[0] 是 n
  return f();
}

foo(1); // 2

在大多數情況下，使用剩餘參數是相較使用arguments對象的更好選擇。

function foo(arg) { 
  var f = (...args) => args[0]; 
  return f(arg); 
}
foo(1); // 1

function foo(arg1,arg2) { 
    var f = (...args) => args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2

像函數一樣使用箭頭函數

如上所述，箭頭函數表達式對非方法函數是最合適的。讓我們看看當我們試著把它們作為方法時發生了什麼。

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined
obj.c(); 
// 10, Object {...}

箭頭函數沒有定義this綁定。另一個涉及Object.defineProperty()的示例:

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局對象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

obj.b; // undefined   "undefined"   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

使用new操作符

箭頭函數不能用作構造器，和new一起用會拋出錯誤。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

使用prototype屬性

箭頭函數沒有prototype屬性。

var Foo = () => {};
console.log(Foo.prototype);	//	undefined

使用yield關鍵字

yield 關鍵字通常不能在箭頭函數中使用（除非是嵌套在允許使用的函數內）。因此，箭頭函數不能用作生成器。

函數體

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

var func = x => x * x;                  
// 簡寫函數 省略return

var func = (x, y) => { return x + y; }; 
//常規編寫 明確的返回值

返回對象字面量

記住用params => {object:literal}這種簡單的語法返回對象字面量是行不通的。

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

這是因為花括弧（{} ）裡面的代碼被解析為一系列語句（即 foo 被認為是一個標簽，而非對象字面量的組成部分）。
所以，記得用圓括弧把對象字面量包起來：

var func = () => ({foo: 1});

換行

箭頭函數在參數和箭頭之間不能換行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

解析順序

雖然箭頭函數中的箭頭不是運算符，但箭頭函數具有與常規函數不同的特殊運算符優先順序解析規則。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

更多實例

// 空的箭頭函數返回 undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (這是一個立即執行函數表達式,可參閱 'IIFE'術語表) 


var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
// 66

var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);       
// [10, 12, 26, 0, 2, 36, 46]

// 更簡明的promise鏈
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// 無參數箭頭函數在視覺上容易分析
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

箭頭函數也可以使用條件(三元)運算符：

var simple = a => a > 15 ? 15: a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a: b

箭頭函數內定義的變數及其作用域

// 常規寫法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 標準的let作用域

// 參數括弧內定義的變數是局部變數（預設參數）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

// 對比：函數體內{}不使用var定義的變數是全局變數
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中國標準時間)

// 對比：函數體內{} 用var定義的變數是局部變數
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined

箭頭函數也可以使用閉包：

// 標準的閉包函數
function A(){
      var i=0;
      return function b(){
              return (++i);
      };
};

var v=A();
v();    //1
v();    //2


//箭頭函數體的閉包（ i=0 是預設參數）
var Add = (i=0) => {return (() => (++i) )};
var v = Add();
v();           //1
v();           //2

//因為僅有一個返回，return 及括弧（）也可以省略
var Add = (i=0)=> ()=> (++i);

箭頭函數遞歸

var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120

此筆記忘了是從哪裡保存的了，侵則刪


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript連載12-迴圈以及舉例
    一、if和switch的使用場景比較 1.分支比較多且無法窮盡的時候，最好使用if，其他情況可以視情況而定 2.如果數據不是很大，並且數據都是固定的可以使用switch 3.理論上Switch的效率更高 4.switch的弊端在於如果是無窮的可能性，那麼就不適合使用switch 二、迴圈 1.whi ...
  • JS - 基礎學習(6): reduce() 方法
    在前後端數據交互的過程中，為了能夠減少ajax請求次數，減輕帶寬壓力，後端往往會將當前介面所需的參數以對象的形式集體返回。這樣就導致一個問題：對象內欄位屬性過多，而有些小組件功能又壓根不需要這麼一個大對象參數(主要是對象屬性過多，難得理，也懶得找)，這時就需要對這個大對象做再加工處理。 比如：將小組 ...
  • h5+ 開發分享功能
    h5+ 開發微信、QQ分享功能 此處只做微信網頁分享示例代碼 方式一、JS+HTML+h5Plus 1.html代碼 <div class="button" onclick="shareWeb()">分享網頁</div> 2.JS代碼 // H5 plus事件處理function plusReady ...
  • 深入淺出Nodejs讀書筆記
    今天終於把樸靈老師寫的《深入淺出Node.js》給學習完了, 這本書不是一本簡單的Node入門書籍，它沒有停留在Node介紹或者框架、庫的使用層面上，而是從不同的視角來揭示Node自己內在的特點和結構。建議有一定Node基礎或者做過Node方面的小項目的同學閱讀，看完以後你的思維會有很奇特的碰撞，我 ...
  • 教你nodejs爬蟲製作知乎專欄RSS抓取程式
    現在這個社會是信息爆炸的社會，各個網站、app上鋪天蓋地的都是各種新聞和信息。 為了獲取信息，我們每天都要進行各種麻煩的操作，打開各種網站或者手機app,操作顯得低效，後來發現了一個神器，那就是RSS。 什麼是RSS RSS中文名是簡易信息聚合，就是讓網站一個按照一定周期更新網站的文章概要內容（有些 ...
  • 零基礎學習web前端需要掌握的技能和輔助工具?
    今天小編要跟大家分享的文章是關於想要學習web前端需要掌握哪些技能和工具?互聯網的快速發展和激烈競爭，使得用戶體驗成為一個重要的關註點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。因此想要學習前端技術的人越來越多，那麼零基礎學習web ...
  • web前端開發學習 自學web前端需要掌握哪些知識點？
    前端開發因為其上手快，開發難度適中，而應用非常廣泛，成為目前大部分想進入IT行業的年輕人的首選。目前前端開發崗位人員主要分類三類：高校畢業生，培訓生，自學人士三大類。今天主要和大家一起來探討一下，自學前端需要掌握哪些知識點。 ...
  • Ajax的步驟
    Ajax 非同步 JavaScript 和 XML 第一步： 創建 XMLHttpRequest 對象，var 對象名 = new XMLHttpRequest(); Xmlhttprequest 對象用來和伺服器交換數據 第二步： XMLHttpRequest 對象的 open（）和 send（）方 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類