ES6~你跟箭頭函數升華之路

Faremax 發布于2019-08-21 17:16 / 3370人閱讀

摘要：箭頭函數簡單的定義胖箭頭函數，又稱箭頭函數，是一個來自又稱的全新特性。箭頭函數是新增加的一個特性。使用箭頭函數的注意點箭頭函數在參數和箭頭之間不能換行。值得注意的一點就是對象的指向是可變的，但在箭頭函數內是固定的。

箭頭函數 1. 簡單的定義：

胖箭頭函數 Fat arrow functions，又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全
新特性。有傳聞說，箭頭函數的語法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的
=>語法一樣，共享this上下文。

箭頭函數的產生，主要由兩個目的：更簡潔的語法和與父作用域共享關鍵字this。接下來，讓我們來看幾個詳細的例子
當需要編寫一個簡單的單一參數函數時，可以采用箭頭函數來書寫，標識名 => 表達式。
這樣就可以省卻 function 和 return 的輸入，還有括號，分號等。箭頭函數是ES6新
增加的一個特性。

let f = v => v;

最直接的感覺就是簡便，當然不可能就是這么一點好處，下面就一起來探討一下。

幾個小細節：

如果箭頭函數的代碼塊多余一條語句，就必須要使用大括號將其括起來，并且使用
return 語句返回。

由于大括號會被解釋位為代碼塊，所以如果箭頭函數直接返回一個對象，必須在外
面加上括號。

  let f = id => ({age: 22, name: Alice })

箭頭函數還可以和解構賦值 Destructuring 聯合使用.

  const f = ({first, last}) => first + "" + last;

可以簡化回調函數，大大簡化和縮短代碼行數。

2. 箭頭函數和普通函數的區別

this的指向
普通函數與箭頭函數有個微小的不同點。 箭頭函數沒有自己的this值 ，其this值是通

過繼承其它傳入對象而獲得的,通常來說是上一級外部函數的 this 的指向。

  function f() {
    setTimeout( () => {
      console.log("id:", this.id);
    },100);
  }

  f.call( { id: 42 }); //id: 42;

這個例子中， setTimeout 的參數是一個箭頭函數，每隔100毫秒運行一次，如果是普通函
數，執行的 this 應該指向全局對象，但是箭頭函數會讓 this 總是指向函數所在的對象

箭頭函數里面嵌套箭頭函數會有多少個this呢？
看一個簡單的例子

  function f() {
    return () => {
      return () => {
        return () => {
          console.log("id:", this.id);
        };
      };
    };
  }
  f().call( {id: 42})()()(); //id: 42

上面的代碼中只有一個 this，就是函數f的this 。這是因為所有的內層函數都是箭頭函數
都沒有自己的this，都是最外層f函數的this。
注意：還有三個變量在箭頭函數中也是不存在的arguments , super, new.target所以順理成
章，箭頭函數也就不能再用這些方法call(),apply(),bind(),因為這是一些改變this指向的方法，
箭頭函數并沒有this啊。

  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));

3. 怎么處理好箭頭函數的使用問題呢？

使用非箭頭函數來處理由object.method()語法調用的方法。因為它們會接收到來自調用者的
有意義的this值。

在其它場合都使用箭頭函數。

4. 使用箭頭函數的注意點

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

函數體內的this對象就是定義時所在的對象，而不是使用時所在的對象。

"use strict";
var obj = { a: 10};
Object.defineProperty(obj, "b", {
    get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10;
    // represents global object "Window", therefore "this.a" returns "undefined"
  }
});

不可以當作構造函數，簡單說就是不能再使用new命令了，不然會報錯。

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

不可以使用arguments 對象，該對象在函數體內不存在，如果實在要用可以用rest代替。

不可以使用yield命令，箭頭函數不可用作Generator函數。

值得注意的一點就是this對象的指向是可變的，但在箭頭函數內是固定的。

5. 總結

箭頭函數是我最喜歡的ES6特性之一。使用=>來代替function是非常便捷的。但我也曾見過只使用
=>來聲明函數的代碼，我并不認為這是好的做法，因為=>也提供了它區別于傳統function，其所
獨有的特性。我個人推薦，僅在你需要使用它提供的新特性時，才使用它。

當只有一條聲明語句(statement)時，隱式 return。

需要使用到父作用域中的this。

喜歡的小伙伴可以關注我的學習分享網站：

牧碼人keephhh

云服務器 GPU云服務器箭頭函數 ES6 網絡之路成長之路

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

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

從-1開始的ES6探索之旅01：顏文字成精的箭頭函數上篇 - 大哥，你指哪呢？

摘要：基礎語法參數參數參數函數聲明參數參數參數表達式單一相當于參數參數參數表達式當只有一個參數時，圓括號是可選的單一參數函數聲明單一參數函數聲明沒有參數的函數應該寫成一對圓括號。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？之前在某些大神的代碼中出現一串神秘符號類似于num =>...

Snailclimb 2019-08-21 18:36 評論0 收藏0
前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網絡安全二三事

摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

syoya 2019-08-21 17:48 評論0 收藏0
從 ES6 高階箭頭函數理解函數柯里化

摘要：于是開始各種搜索，先是知道了多個連續箭頭函數就是的多次柯里化的寫法，對于函數柯里化，很久以前就知道這個名次，但是并不理解，也沒有去了解?？梢詫σ粋€連續的箭頭函數進行多次柯里化。前言：第一次看到多個連續箭頭函數是在一個 react 項目中，然鵝確認了下眼神，并不是對的人，因為看得一臉懵逼。em......于是開始各種搜索，先是知道了多個連續箭頭函數就是 es6 的多次柯里化的寫法，對于...

Hujiawei 2019-08-23 13:59 評論0 收藏0
es6/es2015語法之路(相關文章)

摘要：語句用于從給定文件或模塊導出函數和對象可以很好的模塊化嘗試中的箭頭函數 1：export語句用于從給定文件（或模塊）導出函數和對象 https://developer.mozilla.org...(可以很好的模塊化)2:嘗試 ES6 中的箭頭函數 https://imququ.com/post/arrow...

李昌杰 2019-08-21 11:19 評論0 收藏0
我的React之路--入門

摘要：在構造函數里面初始化的數據，把數據放在頁面上，點擊時候調用方法改變中的數據。是中父組件向子組件通信的方式，下面是一個簡單的例子使用組件我是顯示的數據我們定義組件時候在構造函數中可以接收到參數，并且要使用傳到的構造方法中。 React的學習之路還要繼續走下去，最近一邊在做未完成的項目一邊學習React，項目是vue寫的，后面還需要有一個后臺管理系統計劃使用react完成，寒假說長也不長，...

qpwoeiru96 2019-08-22 13:52 評論0 收藏0