ES6 箭頭函數從了解到深入

Eminjannn 發布于2019-08-20 16:37 / 2870人閱讀

摘要：有傳聞說，箭頭函數的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數是新增加的一個特性。箭頭函數沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數的的指向。

箭頭函數 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。

GPU云服務器云服務器深入了解javascript 深入了解php項目如何深入了解linux 箭頭函數

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

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

ES6 - 箭頭函數、箭頭函數與普通函數的區別總結

摘要：但是因為箭頭函數沒有自己的，它的其實是繼承了外層執行環境中的，且指向永遠不會隨在哪里調用被誰調用而改變，所以箭頭函數不能作為構造函數使用，或者說構造函數不能定義成箭頭函數，否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
深入ES6：箭頭函數

摘要：令人震驚的箭頭函數引入了寫入函數的新語法。使用箭頭函數創建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執行任何操作并返回未定義的箭頭函數。內部函數是一個箭頭函數，所以它從封閉范圍繼承此函數。箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內聯腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西： ...

MasonEast 2019-08-22 17:14 評論0 收藏0
《深入理解ES6》筆記——函數（3）

摘要：錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數，右邊表示輸出的結果。但是有了尾調用優化之后，遞歸函數的性能有了提升。作為前端切圖仔，越發覺得自己離不開函數了。說到JavaScript函數，腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平，那么函數對你來說沒有難度...

DoINsiSt 2019-08-20 18:04 評論0 收藏0