国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6~你跟箭頭函數(shù)升華之路

Faremax / 3362人閱讀

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

箭頭函數(shù) 1. 簡單的定義：

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

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

let f = v => v;

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

幾個小細節(jié) ：

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

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

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

箭頭函數(shù)還可以和解構(gòu)賦值 Destructuring 聯(lián)合使用.

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

可以簡化回調(diào)函數(shù)，大大簡化和縮短代碼行數(shù)。

2. 箭頭函數(shù)和普通函數(shù)的區(qū)別

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

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

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

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

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

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

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

上面的代碼中只有一個 this， 就是函數(shù)f的this 。這是因為所有的內(nèi)層函數(shù)都是箭頭函數(shù)
都沒有自己的this，都是最外層f函數(shù)的this。
注意：還有三個變量在箭頭函數(shù)中也是不存在的arguments , super, new.target所以順理成
章，箭頭函數(shù)也就不能再用這些方法call(),apply(),bind(),因為這是一些改變this指向的方法，
箭頭函數(shù)并沒有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. 怎么處理好箭頭函數(shù)的使用問題呢？

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

在其它場合都使用箭頭函數(shù)。

4. 使用箭頭函數(shù)的注意點

箭頭函數(shù)在參數(shù)和箭頭之間不能換行。

函數(shù)體內(nèi)的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"
  }
});

不可以當(dāng)作構(gòu)造函數(shù)，簡單說就是不能再使用new命令了，不然會報錯。

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

不可以使用arguments 對象，該對象在函數(shù)體內(nèi)不存在，如果實在要用可以用rest代替。

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

值得注意的一點就是this對象的指向是可變的，但在箭頭函數(shù)內(nèi)是固定的。

5. 總結(jié)

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

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

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

喜歡的小伙伴可以關(guān)注我的學(xué)習(xí)分享網(wǎng)站：

牧碼人keephhh

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89326.html

相關(guān)文章

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

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

    Snailclimb 評論0 收藏0

  • 前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網(wǎng)絡(luò)安全二三事

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

    syoya 評論0 收藏0

  • 從 ES6 高階箭頭函數(shù)理解函數(shù)柯里化

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

    Hujiawei 評論0 收藏0

  • es6/es2015語法之路(相關(guān)文章)

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

    李昌杰 評論0 收藏0

  • 我的React之路--入門

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

    qpwoeiru96 評論0 收藏0

發(fā)表評論

0條評論

Faremax

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<