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
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類